《2022年AJAX基础教程 .pdf》由会员分享，可在线阅读，更多相关《2022年AJAX基础教程 .pdf（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、AJAX基础教程 AJAX:开始 这篇文章将带您浏览整个AJAX的基本概貌, 并展示两个简单的例子让您轻松上路. 什么是 AJAX? AJAX (异步 JavaScript 和 XML) 是个新产生的术语, 专为描述JavaScript的两项强大性能. 这两项性能在多年来一直被网络开发者所忽略 , 直到最近Gmail, Google suggest和 google Maps的横空出世才使人们开始意识到其重要性 . 这两项被忽视的性能是: ? 无需重新装载整个页面便能向服务器发送请求. ? 对 XML 文档的解析和处理步骤 1 请! - 如何发送一个HTTP 请求 为了用 JavaScript向
2、服务器发送一个HTTP 请求, 需要一个具备这种功能的类实例. 这样的类首先由 Internet Explorer 以 ActiveX 对象引入, 被称为XMLHTTP. 后来 Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类, 它支持微软的 ActiveX 对象所提供的方法和属性. 因此, 为了创建一个跨浏览器的这样的类实例 (对象), 可以应用如下代码: if (window.XMLHttpRequest) / Mozilla, Safari, . http_request = new XMLHttpRequest(); else if (win
3、dow.ActiveXObject) / IE http_request = new ActiveXObject(Microsoft.XMLHTTP); (上例对代码做了一定简化, 这是为了解释如何创建XMLHTTP 类实例. 实际的代码实例可参阅本篇步骤 3.) 如果服务器的响应没有XML mime-type header,某些 Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header 不是text/xml, 可以调用其它方法修改该header. http_request = new XMLHttpRequest(); 名师资料总结 - - -精品资料欢迎下载
4、 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 5 页 - - - - - - - - - http_request.overrideMimeType(text/xml); 接下来要决定当收到服务器的响应后, 需要做什么. 这需要告诉HTTP 请求对象用哪一个JavaScript函数处理这个响应. 可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名, 如下所示: http_request.onreadystatechange = nameOfTheFunction;注
5、意: 在函数名后没有括号, 也无需传递参数. 另外还有一种方法, 可以在扉页(fly)中定义函数及其对响应要采取的行为, 如下所示: http_request.onreadystatechange = function() / do the thing ; 在定义了如何处理响应后, 就要发送请求了. 可以调用HTTP 请求类的open()和send()方法, 如下所示: http_request.open(GET, http:/www.example.org/some.file, true); http_request.send(null); ? open() 的第一个参数是HTTP 请求方式
6、 GET, POST, HEAD 或任何服务器所支持的您想调用的方式. 按照 HTTP 规范 ,该参数要大写 ;否则 ,某些浏览器 (如 Firefox) 可能无法处理请求.有关 HTTP 请求方法的详细信息可参考http:/www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs ? 第二个参数是请求页面的URL. 由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到 permission denied 的错误提示 .一个常见的错误是访问站点时使用domain.t
7、ld, 而当请求页面时,却使用 www.domain.tld. ? 第三个参数设置请求是否为异步模式.如果是 TRUE , JavaScript 函数将继续执行,而不等待服务器响应.这就是 AJAX 中的 A. 如果第一个参数是POST,send()方法的参数可以是任何想送给服务器的数据 . 这时数据要以字符串的形式送给服务器, 如下所示: name=value&anothername=othervalue&so=on步骤 2 收到! - 处理服务器的响应 当发送请求时, 要提供指定处理响应的JavaScript函数名. http_request.onreadystatechange = na
8、meOfTheFunction;我们来看看这个函数的功能是什么. 首先函数会检查请求的状态. 如果状态值是4,就意味着一个完整的服务器响应已经收到了, 您将可以处理该响应. if (http_request.readyState = 4) / everything is good, the response is received 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 5 页 - - - - - - - - - else / still not ready re
9、adyState的取值如下: ? 0 (未初始化 ) ? 1 (正在装载 ) ? 2 (装载完毕 ) ? 3 (交互中 ) ? 4 (完成 ) ( Source) 接着, 函数会检查HTTP 服务器响应的状态值. 完整的状态取值可参见 W3C site . 我们着重看值为200 OK的响应. if (http_request.status = 200) / perfect! else / there was a problem with the request, / for example the response may be a 404 (Not Found) / or 500 (Inte
10、rnal Server Error) response codes 在检查完请求的状态值和响应的HTTP 状态值后, 您就可以处理从服务器得到的数据了. 有两种方式可以得到这些数据: ? http_request.responseText 以文本字符串的方式返回服务器的响应? http_request.responseXML 以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM 函数步骤 3 万事俱备! - 简单实例 我们现在将整个过程完整地做一次, 发送一个简单的HTTP 请求. 我们用 JavaScript请求一个 HTML 文件, t
11、est.html, 文件的文本内容为Im a test.然后我们alert()test.html文件的内容. var http_request = false; function makeRequest(url) http_request = false; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 5 页 - - - - - - - - - if (window.XMLHttpRequest) / Mozilla, Safari,. http_request = n
12、ew XMLHttpRequest(); if (http_request.overrideMimeType) http_request.overrideMimeType(text/xml); else if (window.ActiveXObject) / IE try http_request = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try http_request = new ActiveXObject(Microsoft.XMLHTTP); catch (e) if (!http_request) alert(Giving up:(
13、 Cannot create an XMLHTTP instance); return false; http_request.onreadystatechange = alertContents; http_request.open(GET, url, true); http_request.send(null); function alertContents() if (http_request.readyState = 4) if (http_request.status = 200) alert(http_request.responseText); else alert(There
14、was a problem with the request.); Make a request 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 5 页 - - - - - - - - - 本例中: ? 用户点击浏览器上的请求 链接 ; ? 接着函数makeRequest() 将被调用 .其参数 HTML 文件 test.html在同一目录下 ; ? 这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertContents(); ? ale
15、rtContents()将检查服务器的响应是否成功地收到,如果是 ,就会 alert()test.html文件的内容 . 步骤 4 X- 文档 - 处理XML 响应 在前面的例子中, 当服务器对HTTP 请求的响应被收到后, 我们会调用请求对象的reponseText属性. 该属性包含了test.html文件的内容. 现在我们来试试responseXML属性. 首先, 我们新建一个有效的XML 文件, 后面我们将使用这个文件. 该文件(test.xml)源代码如下所示: Im a test. 在该脚本中, 我们只需修改请求部分: . onclick=makeRequest(test.xml)
16、. 接着, 在alertContents()中, 我们将alert()的代码alert(http_request.responseText);换成: var xmldoc = http_request.responseXML; var root_node = xmldoc.getElementsByTagName(root).item(0); alert(root_node.firstChild.data); 这里, 我们使用了 responseXML提供的 XMLDocument 对象并用 DOM 方法获取存于 XML文件中的内容 . 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 5 页 - - - - - - - - -