AJAX原理剖析
发布时间：2020-12-16 01:52:47 所属栏目：百科 来源：网络整理
导读：AJAX原理剖析 相信对于所有刚接触javascript的前端开发者来说，ajax都是你必须学习的一课。最近看了一些ajax的相关原理介绍，觉得DEVELOPER上的一篇介绍文章不错，翻译过来分享给大家，希望能帮助大家了解ajax。 什么是AJAX? AJAX指的是Asynchronous JavaScri
|
AJAX原理剖析 相信对于所有刚接触javascript的前端开发者来说，ajax都是你必须学习的一课。最近看了一些ajax的相关原理介绍，觉得DEVELOPER上的一篇介绍文章不错，翻译过来分享给大家，希望能帮助大家了解ajax。 什么是AJAX? AJAX指的是Asynchronous JavaScript and XML。概括地说，它使用XMLHttpRequest对象来与服务端脚本交流。它可以发送和接收不同格式的信息，包括JSON，XML，HTML，甚至是文本文件。但是，AJAX最吸引人的特点是它的”asynchronous”(异步)的本质，它意味着它可以做所有这些事情而不需要刷新页面。这使得你可以基于用户事件只更新页面的一部分。 AJAX的两大特点是： 你可以给服务器发送请求而不需要重新加载页面 接收和处理服务器端的数据 步骤1 — 怎样发送一个HTTP请求 为了用JavaScript给服务器端发送一个HTTP请求，你需要一个类的实例来实现这个功能。最初，IE引入了这样的一个类作为一个ActiveX对象，被称作XMLHTTP。接着Mozilla，Safari和其他的浏览器也都进行了支持，实现了一个XMLHttpRequest类来支持Microsoft原来的ActiveX对象所拥有的方法和属性。 结果，为了实现这样的跨浏览器的实例对象，你可以像下面这样操作： 1 var httpRequest; 2 if (window.XMLHttpRequest) { // Mozilla,Safari,... 3 httpRequest = new XMLHttpRequest(); 4 } else if (window.ActiveXObject) { // IE 8 and older 5 httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 6 } 注意：为了阐述的目的，上面只是创建一个XMLHTTP实例的简化的代码，更详细的例子，见文章中的步骤3。 接下来，你需要决定当你接收到服务器端返回的数据后你想要做什么处理。你只需要告诉HTTP请求对象哪个JavaScript函数将处理这些返回的数据。这是通过设置onreadystatechange属性来实现的： 1 httpRequest.onreadystatechange = nameOfTheFunction; 注意这里函数名后没有括号，也没有参数被传入，因为你只是简单的给函数分配一个引用，而不是真正地调用它。除了分配一个函数名，你也可以定义一个匿名函数并在里面定义处理返回数据的行为： 1 httpRequest.onreadystatechange = function(){ 2 //process the server response 3 } 然后，在你声明了你收到返回数据后将发生什么后，你需要真正的发送这个请求。你需要调用HTTP请求类的open()和send()方法： 1 httpRequest.open(‘GET’,‘http://www.example.org/some.file’,true); 2 httpRequest.send(null); open()方法的第一个参数是HTTP请求方法：GET，POST，HEAD或者任何其他的你想使用的服务器支持的方法，必须大写，否则一些浏览器(如Firefox)可能不会处理请求。 第二个参数是你希望给它发送请求的网页的URL，出于安全性考虑，你不能访问第三方域名下的页面。请确定你所有的页面都使用正确的域名，否则你将收到一个“拒绝访问”错误。 可选的第三个参数设置请求是否异步。缺省为true，表示当服务器端还没有返回数据时JavaScript函数将继续执行。这也就是AJAX中的A。 Send()方法的参数可以是任何你想发送给服务器的数据(如果是在post请求之后)，发送的数据格式应该是服务器可以解析的。这可以是一个查询字符串，如： “name=value&anothername=”+encodeURIComponent(myVar)+”$so=on” 或者是其他的数据格式，包括JSON，SOAP等。 注意如果你希望POST数据，你也许必须发送请求的MIME类型。例如，在你调用send()方法之前，使用下行代码： 1 httpRequest.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’); 步骤2 — 处理服务器响应 记住当你在发送请求时，你提供了一个JavaScript函数名被分配来处理响应。 1 httpRequest.onreadystatechange = nameOfTheFunction; 让我们看看这个函数应该做些什么。首先，函数需要检查请求的状态。如果状态值是4，那意味着完整的服务器响应已经被接收，你可以继续处理它。 1 if(httpRequest.readyState === 4){ 2 //everything is good,the response is received 3 }else{ 4 //still not ready 5 } readyState值的完整列表如下： ? 0(未初始化) ? 1(加载中) ? 2(加载完成) ? 3(交互式的) ? 4(完成) 接下来需要检查的是HTTP服务器响应的返回码。所有可能的编码都可以在W3C中查询到。在下面的例子中，我们通过检查返回码是否为200 OK来区分成功的和失败的AJAX调用。 1 if(httpRequest.status === 200){ 2 //perfect! 3 }else{ 4 //there was a problem with the request,5 //for example the response may contain a 404 (Not Found) 6 //or 500 (Internal Server Error) response code 7 } 注意当你检查了请求的状态和HTTP返回的状态码后，你就可以开始对你从服务器接收到的数据做任何你想做的事了。你有两种选择来使用这些数据： httpRequest.responseText – 以文本字符串的形式返回服务器响应 httpRequest.responseXML – 以XMLDocument对象形式返回服务器响应 注意只有当你使用的是一个异步AJAX请求时，上述步骤才正确。如果你使用一个同步请求，你不需要指明一个函数，在调用send()方法之后，你可以直接使用服务器返回的数据，因为此时脚本会停止往下执行转而等待服务器响应。 步骤3 – 一个简单的实例 让我们把所有的步骤连在一起实现一个简单的HTTP请求实例。我们的JavaScript将会请求一个HTML文档test.html，它包含文本”I’m a test”，然后我们会弹出test.html文档中的内容。 01 <span id=”ajaxButton” style=”cursor: pointer; text-decoration: underline”>Make a request 02 </span> 03 <script type=”text/javascript”> 04 (function() { 05 var httpRequest; 06 document.getElementById(“ajaxButton”).onclick= function() { 07 makeRequest(‘test.html’); 08 }; 09 function makeRequest(url) { 10 if (window.XMLHttpRequest) { // Mozilla,… 11 httpRequest = new XMLHttpRequest(); 12 } else if (window.ActiveXObject) { // IE 13 try { 14 httpRequest = new ActiveXObject(“Msxml2.XMLHTTP”); 15 }catch (e) { 16 try { 17 httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”); 18 }catch (e) {} 19 } 20 } 21 if (!httpRequest) { 22 alert(‘Giving up L Cannot create an XMLHTTP instance’); 23 return false; 24 } 25 httpRequest.onreadystatechange = alertContents; 26 httpRequest.open(‘GET’,url); 27 httpRequest.send(); 28 function alertContents() { 29 if (httpRequest.readyState === 4) { 30 if (httpRequest.status === 200) { 31 alert(httpRequest.responseText); 32 } else { 33 alert(‘There was a problem with the request.’); 34 } 35 } 36 } 37 })(); 38 </script> 在这个实例中： ? 用户点击”Make a request”； 事件处理程序调用makeRequest()函数，并传入一个参数为相同目录下的HTNL文档的文档名； ? 发送请求，然后将执行传递给alertContents()； ? alertContents()检查响应是否被接收，如果是OK，然后弹出test.html文档中的内容。 注意1：如果你没有设置请求头为Cache-Control: no-cache，浏览器将cache响应而不会再提交请求，你也可以追加一个始终不同的额外的GET参数，像时间戳或者一个随机数。 注意2：如果httpRequest变量在全局中使用，调用makeRequest()也许会覆盖彼此，引起竞争情况。在一个闭包中声明一个httpRequest局部变量包含AJAX函数可以阻止竞争情况的发生。 注意3：在通信错误的情况下(例如网络服务器出现故障)，onreadystatechange方法中，当你尝试进入status字段，一个异常会被抛出。所以，请确定你已将你的if…then声明放在一个try…catch块中。 01 function alertContents(httpRequest) { 02 try { 03 if (httpRequest.readyState === 4) { 04 if (httpRequest.status === 200) { 05 alert(httpRequest.responseText); 06 } else { 07 alert(‘There was a problem with the request.’); 08 } 09 } 10 }catch( e ) { 11 alert(‘Caught Exception: ‘ + e.description); 12 } 13 } 步骤4 – 处理XML响应 在前面的例子中，当接收到HTTP请求的响应后，我们使用了请求对象的responseText属性，它包含test.html文档的内容。现在，让我们尝试使用另一个属性responseXML。 首先，我们创建一个我们稍后将请求的正确的XML文档。文档(test.xml)如下： 1 <?xml version=”1.0” ?> 2 <root> 3 I’m a test. 4 </root> 在脚本中，我们只需要改变下面这行： 1 … 2 onclick=”makeRequest(‘test.xml’)”> 3 … 在alertContents()方法中，我们需要替换行alert(httpRequest.responseText);为： 1 var xmldoc = httpRequest.responseXML; 2 var root_node = xmldoc.getElementsByTagName(‘root’).item(0); 3 alert(root_node.firstChild.data); 代码通过responseXML属性获取到了XMLDocument对象，然后使用DOM方法获取到了XML文档中的内容。 步骤5 – 处理数据 最后，让我们发送数据给服务器并接收响应。我们的JavaScript这次将请求一个动态的页面test.php，它将获取我们发送的数据并返回“计算了的”字符串 - “Hello,[user data]” – 我们将弹出它。 首先，我们添加一个文本框使用户可以输入他们的名字： 1 <label>Your name: 2 <input type="text" id="ajaxTextbox" /> 3 </label> 4 <span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> 5 Make a request 6 </span> 我们也需要给事件处理器添加几行来从文本框中获取数据并把它发送给makeRequest()函数，伴随着服务端脚本的URL： 1 document.getElementById("ajaxButton").onclick = function() { 2 var userName = document.getElementById("ajaxTextbox").value; 3 makeRequest('test.php',userName); 4 }; 我们需要修改makeRequest()方法使它能接收用户数据并传递给服务器。我们将把GET请求改为POST请求，并在调用httpRequest.send()时传入我们的数据参数： 1 function makeRequest(url,userName) { 2 ... 3 httpRequest.onreadystatechange = alertContents; 4 httpRequest.open('POST',url); 5 httpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 6 httpRequest.send('userName=' + encodeURIComponent(userName)); 7 } 函数alertContents()可以像在步骤3那样写来弹出我们计算后的字符串，如果那是服务器返回的全部内容。但是，服务器将返回计算后的字符串和原始的数据，所以，如果我们在文本框中输入”Jane”，服务器返回的数据看起来会像下面这样： 1 {"userData":"Jane","computedString":"Hi,Jane!"} 在alertContents()中使用这些方法，我们不能只是弹出responseText，我们必须解析它，然后弹出计算后的字符串： 01 function alertContents() { 02 if (httpRequest.readyState === 4) { 03 if (httpRequest.status === 200) { 04 var response = JSON.parse(httpRequest.responseText); 05 alert(response.computedString); 06 } else { 07 alert('There was a problem with the request.'); 08 } 09 } 10 } （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |