[zt]AJAX基础

fkys · 发表于 2006-4-19 17:22:05

<h2 class="post-title">Start AJAX</h2><div class="post-body">最近开始研究AJAX（Asynchronous Javascript and XML），很幸运google到了这篇发表在<a href="http://developer.mozilla.org/" target="_blank">Devmo</a>上的<a href="http://developer.mozilla.org/en/docs/AJAX:Getting_Started" target="_blank">AJAX: Getting Started</a>。现把这篇简洁易懂的文章翻译如下，与大家共享，希望能对大家有所帮助！这篇文章会使你对AJAX有一个基本了解，并给出两个容易上手的例子。<h3>目录</h3><ol><li><a href="http://www.marchbox.com/blog/post/start_ajax.html#what-s-ajax" target="_blank">什么是AJAX？</a> </li><li><a href="http://www.marchbox.com/blog/post/start_ajax.html#http-request" target="_blank">第一步：如何发出一个HTTP请求</a> </li><li><a href="http://www.marchbox.com/blog/post/start_ajax.html#server-response" target="_blank">第二步：处理服务器的响应</a> </li><li><a href="http://www.marchbox.com/blog/post/start_ajax.html#simple-example" target="_blank">第三步：一个简单的例子</a> </li><li><a href="http://www.marchbox.com/blog/post/start_ajax.html#xml-response" target="_blank">第四步：与XML响应协同工作</a></li></ol><h3 id="what-s-ajax" name="what-s-ajax">什么是AJAX</h3>AJAX是一个新的合成术语，隐含了两个已经存在多年的Javascript特性，但是直到最近，随着一些诸如Gmail、Google Suggest以及Google Maps的轰动，才被许多网络开发者所注意到。我们所讨论的两个Javascript的特性是你能够： <ul><li>向服务器发出请求而不需重新加载任何页面 </li><li>解析XML文档并且与之协同工作</li></ul>AJAX是一个缩写，A是指"asynchronous"（异步的），它表示你可以在向服务器发出一个HTTP请求后，边做其他的事情，边等待服务器的响应。JA表示"Javascript"，X表示"XML"（可扩展标记语言）。<h3 id="http-request" name="http-request">第一步：如何发出一个HTTP请求</h3>为了用Javascript向服务器发出一个HTTP请求，你需要一个类的实例来提供给你这种功能。这个类原本在IE里被作为一个ActiveX对象提出，叫XMLHTTP。然后，Mozilla、Safari以及一些其他的浏览器相继跟随，出现了一个XMLHttpRequest类，其支持微软的ActiveX对象原本的方法和属性。所以，为了能够跨浏览器地创建这个类的对象，你需要这样：if (window.XMLHttpRequest) { // Mozilla, Safari, http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_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);<ul><li>open()方法的第一个参数是HTTP请求的方式——GET、POST、HEAD或者任何其它你想使用的，你的服务器支持的方式。方式的名称要大写，否则有些浏览器（如Firefox）可能就不会处理请求。可以去 <a title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C specs</a>获取更多的你可以使用的HTTP请求方式的信息。 </li><li>第二个参数是你所请求页面的URL。 </li><li>第三个参数是用来设置请求是否为异步的。如果是TRUE，则在服务器尚未返回响应的时候，Javascript的函数会继续执行。这也就是AJAX中的A的含义。</li></ul>send()方法的参数可以使任何你希望传递给服务器的数据，数据应该为如下格式的查询串：name=value&anothername=othervalue&so=on<h3 id="server-response" name="server-response">第二步：处理服务器响应</h3>记住，当你向服务器发出了一个请求，你也就发出了一个被设计用来处理响应的Javascript函数的名字。http_request.onreadystatechange = nameOfTheFunction;我们来看看这个函数都应该做些什么。首先，其需要检查请求的状态，如果状态的值为4，那么就意味着全部的服务器响应都已接受完毕，你可以继续来处理了。if (http_request.readyState == 4) { // 一切就绪，相映已接受完成 } else { //尚未就绪 }readyState全部值的列表如下： <ul><li>0（未初始化/uninitialized） </li><li>1（正在加载/loading） </li><li>2（加载完毕/loaded） </li><li>3（交互/interactive） </li><li>4（完成/complete）</li></ul>(<a title="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate 1.asp" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">来源</a>) 下一步是检查HTTP服务器响应的情况代码。所有可能的代码都被列在了<a title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C的网站</a>上。目前，我们只对200 OK响应感兴趣。if (http_request.status == 200) { // 棒极了！ } else { // 请求出了些问题， // 比如响应可能是404(Not Found)，未找到 // 或者500，内部服务器错误 }在你检查完请求的状态和HTTP响应情况后，你就可以自己决定对服务器发送给你的数据作什么样的处理了。你有两种途径来访问这些数据： <ul><li>http_request.responseText将会把服务器的响应作为一个文本串返回 </li><li>http_request.responseXML将把响应作为一个XMLDocument对象返回，你可以用Javascript的文档对象模型（DOM）的函数来处理</li></ul><h3 id="simple-example" name="simple-example">第三步：一个简单的例子</h3>我现在来做一个简单的HTTP请求。我们的Javascript脚本将会请求一个HTML文档，test.html，其包含了一段文本——“这是一个测试。”——然后我们会about

) test.html的内容。<script type="text/javascript" language="javascript"> var 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) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { about

'Giving up

Cannot create an XMLHTTP instance'); return false; } http_request.onreadystatechange = about:Contents; http_request.open('GET', url, true); http_request.send(null); } function about:Contents() { if (http_request.readyState == 4) { if (http_request.status == 200) { about:(http_request.responseText); } else { about:('There was a problem with the request.'); } } } </script> <span style="cursor: pointer; text-decoration: underline" onload="makeRequest('test.html')"> 发出请求 在这个例子中： <ul><li>用户在浏览器里点击“发出请求”（make a request）； </li><li>这会调用makeRequest()函数，并且附有参数test.html，一个自阿同一目录下的HTML文档的名字。 </li><li>请求被发出，然后（onreadystatechange）操作被传递给about:Contents()； </li><li>about:Contents()检查响应是否被接收和是否状态为“OK”，然后about:() test.html文件的内容。</li></ul>你可以在<a title="http://www.w3clubs.com/mozdev/httprequest test.html" href="http://www.w3clubs.com/mozdev/httprequest_test.html">这里</a>测试这个例子，并且可以在<a title="http://www.w3clubs.com/mozdev/test.html" href="http://www.w3clubs.com/mozdev/test.html">这里</a>看见测试文件。<h3 id="xml-response" name="xml-response">与XML响应协同工作</h3>在上个例子中，在HTTP响应被接收完毕后，我们和使用了请求对象的responseText属性，其包含了test.html文件的内容。现在，让我们试试responseXML属性。让我们现在就创建一个有效的XML文档，这个文档稍后会被我们请求。文档（test.xml）包括：<?xml version="1.0" encoding="utf-8" ?> <root> 这是个测试. </root>我们只需要在脚本中用下面的内容替换请求行：... onload="makeRequest('test.xml)"> ...然后在about:Contents()里把about:()行替换成about:(http_request.responseText);，并且，在其上方写下：var xmldoc = http_request.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); about:(root_node.firstChild.data);这样，我们获取了responseXML中的XMLDocument对象，并且用DOM方法来访问了XML文档中所包含的某些内容。你可以在<a title="http://www.w3clubs.com/mozdev/test.xml" href="http://www.w3clubs.com/mozdev/test.xml">这里</a>浏览到test.xml，更新后的脚本可以在<a title="http://www.w3clubs.com/mozdev/httprequest test xml.html" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">这里</a>得到。可以去<a title="http://www.mozilla.org/docs/dom/" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a>获取更多的DOM方法。</div>

		自动登录	找回密码
密码			欢迎注册