微网站开发策划,鹤峰网站制作,做网站公司在深圳,营销自己的网站关键词#xff1a;
ajax
Asynchronous
JavaScript
Xml 目录 什么是AJAX#xff1f; 第一步#xff1a;如何发出一个HTTP请求 第二步#xff1a;处理服务器的响应 第三步#xff1a;一个简单的例子 第四步#xf…关键词
ajax
Asynchronous
JavaScript
Xml 目录 什么是AJAX 第一步如何发出一个HTTP请求 第二步处理服务器的响应 第三步一个简单的例子 第四步与XML响应协同工作 什么是AJAX
AJAX是一个新的合成术语隐含了两个已经存在多年的JavaScript特性但是直到最近随着一些诸如Gmail、Google Suggest以及Google Maps的轰动才被许多网络开发者所注意到。
我们所讨论的两个JavaScript的特性是你能够
向服务器发出请求而不需重新加载任何页面 解析XML文档并且与之协同工作 AJAX是一个缩写A是指asynchronous异步的它表示你可以在向服务器发出一个HTTP请求后边做其他的事情边等待服务器的响应。JA表示JavaScriptX表示XML可扩展标记语言。
第一步如何发出一个HTTP请求
为了用JavaScript向服务器发出一个HTTP请求你需要一个类的实例来提供给你这种功能。这个类原本在IE里被作为一个ActiveX对象提出叫XMLHTTP。然后Mozilla、Safari以及一些其他的浏览器相继跟随出现了一个XMLHttpRequest类其支持微软的ActiveX对象原本的方法和属性。
所以为了能够跨浏览器地创建这个类的对象你需要这样
if (window.XMLHttpRequest) { // Mozilla, Safari,http_request new XMLHttpRequest();} else if (window.ActiveXObject) { // IEhttp_request new ActiveXObject(Microsoft.XMLHTTP);} 以上例子中的代码是一个用来构建XMLHTTP实例的简单版本实际使用时的例子请参见本文的第三步 如果服务器端的响应中没有包含XML的mime-type报头header有些版本的Mozilla浏览器可能不会处理。所以为了安全起见你可以用一个特殊的方法来给服务器端发出的响应强加上这个报头以防其不是text/xml类型。
http_request new XMLHttpRequest();http_request.overrideMimeType(text/xml); 下一步就是你来决定在服务器对你的请求作出响应后你准备做什么。这一阶段你只需要告诉HTTP请求对象HTTP request object用哪一个JavaScript函数来处理这一响应。这一步用设置该对象onreadystatechange属性为相应的JavaScript函数名来实现
http_request.onreadystatechange nameOfTheFunction; 注意在函数名后面没有括号。另外如下定义处理响应的函数
http_request.onreadystatechange function(){// 处理响应}; 接下来既然你已经声明了在接到响应后干什么你就需要去发出请求。你需要调用HTTP请求类的open()和send()方法
http_request.open(GET, http://www.example.org/some.file, true);http_request.send(null);
open()方法的第一个参数是HTTP请求的方式——GET、POST、HEAD或者任何其它你想使用的你的服务器支持的方式。方式的名称要大写否则有些浏览器如Firefox可能就不会处理请求。可以去 W3C specs获取更多的你可以使用的HTTP请求方式的信息。 第二个参数是你所请求页面的URL。 第三个参数是用来设置请求是否为异步的。如果是TRUE则在服务器尚未返回响应的时候JavaScript的函数会继续执行。这也就是AJAX中的A的含义。 send()方法的参数可以使任何你希望传递给服务器的数据数据应该为如下格式的查询串
namevalueanothernameothervaluesoon 第二步处理服务器响应
记住当你向服务器发出了一个请求你也就发出了一个被设计用来处理响应的JavaScript函数的名字。
http_request.onreadystatechange nameOfTheFunction;
我们来看看这个函数都应该做些什么。首先其需要检查请求的状态如果状态的值为4那么就意味着全部的服务器响应都已接受完毕你可以继续来处理了。
if (http_request.readyState 4) {// 一切就绪相映已接受完成} else {//尚未就绪}
readyState全部值的列表如下
0未初始化/uninitialized 1正在加载/loading 2加载完毕/loaded 3交互/interactive 4完成/complete (
来源) 下一步是检查HTTP服务器响应的情况代码。所有可能的代码都被列在了W3C的网站上。目前我们只对200 OK响应感兴趣。
if (http_request.status 200) {// 棒极了} else {// 请求出了些问题// 比如响应可能是404(Not Found)未找到// 或者500内部服务器错误} 在你检查完请求的状态和HTTP响应情况后你就可以自己决定对服务器发送给你的数据作什么样的处理了。你有两种途径来访问这些数据
http_request.responseText将会把服务器的响应作为一个文本串返回 http_request.responseXML将把响应作为一个XMLDocument对象返回你可以用JavaScript的文档对象模型DOM的函数来处理 第三步一个简单的例子
我现在来做一个简单的HTTP请求。我们的JavaScript脚本将会请求一个HTML文档test.html其包含了一段文本——“这是一个测试。”——然后我们会alert() test.html的内容。
script typetext/javascript languagejavascriptvar http_request false;function makeRequest(url) {http_request false;if (window.XMLHttpRequest) { // Mozilla, Safari,...http_request new XMLHttpRequest();if (http_request.overrideMimeType) {http_request.overrideMimeType(text/xml);}} else if (window.ActiveXObject) { // IEtry {http_request new ActiveXObject(Msxml2.XMLHTTP);} catch (e) {try {http_request new ActiveXObject(Microsoft.XMLHTTP);} catch (e) {}}}if (!http_request) {alert(Giving up :( 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 was a problem with the request.);}}}/scriptspanstylecursor: pointer; text-decoration: underlineonclickmakeRequest(test.html)发出请求/span
在这个例子中
用户在浏览器里点击“发出请求”make a request 这会调用makeRequest()函数并且附有参数test.html一个自阿同一目录下的HTML文档的名字。 请求被发出然后onreadystatechange操作被传递给alertContents() alertContents()检查响应是否被接收和是否状态为“OK”然后alert() test.html文件的内容。 你可以在这里测试这个例子并且可以在这里看见测试文件。
与XML响应协同工作
在上个例子中在HTTP响应被接收完毕后我们和使用了请求对象的responseText属性其包含了test.html文件的内容。现在让我们试试responseXML属性。
让我们现在就创建一个有效的XML文档这个文档稍后会被我们请求。文档test.xml包括
?xml version1.0 encodingutf-8 ?root这是个测试./root 我们只需要在脚本中用下面的内容替换请求行
...onclickmakeRequest(test.xml)... 然后在
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文档中所包含的某些内容。你可以在这里浏览到test.xml更新后的脚本可以在这里得到。
可以去Mozillas DOM implementation获取更多的DOM方法。
