再也不学AJAX了！使用AJAX

Posted SegmentFault

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了再也不学AJAX了！使用AJAX相关的知识，希望对你有一定的参考价值。

在上一篇文章中我们知道，AJAX是一系列技术的统称。在本篇中我们将更进一步，详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚，我们首先要搞清楚我们是从哪里获取数据的，其次我们关注的才是获取数据的具体方式。

一、获取数据

我们知道AJAX用来在项目中以阻止页面刷新的方式获取数据，那么数据从哪里来呢？我们又怎么知道如何获取这些数据？答案是我们通常使用API与各式各样的数据库交互。

“API”是“Application Programming Interface”(即：应用程序接口)的缩写，你可以想象一些数据是开放的并且在等待被使用，而我们获取这些数据的方式便是使用API。API通常的形式是一个URL，并提供指定的参数名和参数值用来帮助你定位所要获取的数据。

还记得我们提过AJAX需要服务器端的相应设置吗？我们之后会再来谈这一点。

二、AJAX技术的核心 - XMLHttpRequest对象

让我们先把服务器端的设置抛在一边，聚焦AJAX技术的核心环节： XMLHttpRequest对象。

XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，当然整个过程中，浏览器页面不会被刷新。它将是本文接下来的主角，让我们先站在较高的层次，对该对象有一个全局的概览：

  1. XMLHttpRequest只是一个javascript对象，确切的说，是一个构造函数。换句话说，它一点也不神秘，它的特殊之处只在于它是由客户端(即浏览器)提供的（而不是JavaScript原生的），除此之外，它有属性，有方法，需要通过 new关键字进行实例化，我们只需掌握它们就好；

  2. XMLHttpRequest对象是不断被扩展的。随着XML对象被广泛的接收，W3C也开始着手制定相应的标准来规范其行为。目前， XMLHttpRequest有两个级别：1级提供了XML对象的实现细节，2级进一步发展了XML对象，额外添加了一些方法，属性和数据类型。但是，并不是所有浏览器都实现了XML对象2级的内容（并不意外，对吧？）；

让我们先从剖析 XMLHttpRequest实例的属性和方法开始，先创建一个XML对象的实例：

 
   
   
 
    
  
    
    
  
  1.     const xhr = new XMLHttpRequest()
    2.

该实例的属性、方法有：

方法

  • .open()：准备启动一个AJAX请求；

  • .setRequestHeader()：设置请求头部信息；

  • .send()：发送AJAX请求；

  • .getResponseHeader(): 获得响应头部信息；

  • .getAllResponseHeader()：获得一个包含所有头部信息的长字符串；

  • .abort()：取消异步请求；

属性

  • .responseText：包含响应主体返回文本；

  • .responseXML：如果响应的内容类型时 text/xml或 application/xml，该属性将保存包含着相应数据的XML DOM文档；

  • .status：响应的HTTP状态；

  • .statusText：HTTP状态的说明；

  • .readyState：表示“请求”/“响应”过程的当前活动阶段

另外，浏览器还为该对象提供了一个 onreadystatechange监听事件，每当XML实例的 readyState属性变化时，就会触发该事件的发生。

至此，关于XMLHttpRequest实例对象的属性方法就全部罗列完毕了，接下来，我们将更进一步的探究如何使用这些方法，属性完成发送AJAX请求的流程。

三、准备AJAX请求

要想与服务器交互，我们首先需要回答以下问题：

  • 我们是要获取数据还是存储数据？ --表现为请求方式的不同： GET或 POST；

  • 以何种方式等待响应？ --有“同步”和“异步”两种选择；（网络传输是一个过程，请求和响应不是同时发生的。）

下面是一个 .open()方法调用的例子：

 
   
   
 
    
  
    
    
  
  1.     // 该段代码会启动一个针对“example.php”的GET同步请求。
    2. 
  
    
    
  
  2.     xhr.open("get", "example.php", false)
    3.

相当于开始做饭前，将工具准备齐备，将菜洗好， .open()方法也同样出色地完成了发送AJAX请求的准备工作。

现在，让我们再深入聊聊一些准备工作的细节：

（一）GET请求 与 POST请求

GET请求

GET请求用于获取数据，有时候我们需要获取的数据需要通过“查询参数”进行定位，在这种情况下，我们会将查询参数追加到URL的末尾，令服务器解析。

查询参数是指一个由 ?号起始，由 &符号分割的包含相应键值对的字符串。用来告知浏览器所要查询的特定资源。

 
   
   
 
    
  
    
    
  
  1.     const query = "example.php?name=tom&age=24" // "?name=tom&age=24"即是一个查询参数
    2.

需要注意的是，查询字符串中每个参数的名和值都必须使用encodeURIComponent()进行编码（这是因为URL中有些字符会引起歧义，例如“&”）。

POST请求

POST请求用于向服务器发送应该被保存的数据，因此POST请求天然比GET请求多需要一份需要被保存的数据。那么这些数据应该放在何处呢？毕竟，我们的 .open()方法接收的三个参数都没有合适的位置。

答案是需要发送的数据会作为 .send()方法的参数最终被发往服务器，该数据可以是任意大小，任意类型。

这里需要注意以下两点：

  1. .send()方法的参数是不可为空的，也就是说，对于不需要发送任何数据的GET请求，也需要在调用 .send()方法时，向其传入 null值；

  2. 目前为止，我们知道了两种向服务器发送数据的方式：表单提交以及发送POST请求，要注意服务器对待这两种方式并不一视同仁，这意味着服务器需要有相应的代码专门处理POST请求发送来的原始数据。

但好在我们可以通过POST请求模拟表单提交，只需要简单两步：

  1. 设置请求头参数： Content-Type:application/x-www-form-urlencoded（表单提交时的内容类型）；

  2. 将表单数据序列化为查询字符串形式，传入 .send()方法；

（二）请求URL地址

这里需要注意若使用相对路径，请求URL是相对于执行代码的当前页面。

（三）同步请求与异步请求

人们通常认为AJAX是异步的，实际上并非如此，AJAX是避免页面在获取数据后刷新的一种技术，至于等待服务器响应的方式是同步还是异步，需要开发人员结合业务需求进行配置（虽然通常是异步的）。

你可能会好奇，什么时候我们需要使用同步的AJAX？就我个人经验而言，似乎很难找到相应的场景。Stack Overflow上有一个类似的问题，有兴趣的不妨点击查看。

最后我们再简单解释一下“同步”等待响应与“异步”等待响应的区别：“同步”意味着一旦请求发出，任何后续的JavaScript代码不会再执行，“异步”则是当请求发出后，后续的JavaScript代码会继续执行，当请求成功后，会调用相应的回调函数。

四、设置请求头

每个HTTP请求和响应都会带有相应的头部信息，包含一些与数据，收发者网络环境与状态等相关信息。XMLHttpRequest对象提供的 .setRequestHeader()方法为开发者提供了一个操作这两种头部信息的方法，并允许开发者自定义请求头的头部信息。

默认情况下，当发送AJAX请求时，会附带以下头部信息：

  • Accept：浏览器能够处理的内容类型；

  • Accept-Charset: 浏览器能够显示的字符集；

  • Accept-Encoding：浏览器能够处理的压缩编码；

  • Accept-Language：浏览器当前设置的语言；

  • Connection：浏览器与服务器之间连接的类型；

  • Cookie：当前页面设置的任何Cookie；

  • Host：发出请求的页面所在的域；

  • Referer：发出请求的页面URI；

  • User-Agent：浏览器的用户代理字符串；

注意：部分浏览器不允许使用 .setRequestHeader()方法重写默认请求头信息，因此自定义请求头信息是更加安全的方法：

 
   
   
 
    
  
    
    
  
  1.     // 自定义请求头
    2. 
  
    
    
  
  2.     xhr.setRequestHeader("myHeader", "MyValue")
    3.

五、发送请求

 
   
   
 
    
  
    
    
  
  1.     // 发送AJAX请求！
    2. 
  
    
    
  
  2.     const xhr = new XMLHttpRequest()
    3. 
  
    
    
  
  3.     xhr.open("get", "example.php", false)
    4. 
  
    
    
  
  4.     xhr.setRequestHeader("myHeader", "goodHeader")
    5. 
  
    
    
  
  5.     xhr.send(null)
    6.

呃，简单的有些令人尴尬不是吗？换个POST请求试试看：

 
   
   
 
    
  
    
    
  
  1.     // 发送AJAX请求！
    2. 
  
    
    
  
  2.     const xhr = new XMLHttpRequest()
    3. 
  
    
    
  
  3.     xhr.open("post", "example.php", false)
    4. 
  
    
    
  
  4.     xhr.setRequestHeader("myHeader", "bestHeader")
    5. 
  
    
    
  
  5.     xhr.send(some_data)
    6.

额，总觉得还是差点什么？放轻松伙计，因为我们只是发出了请求，还没有处理响应，我们这就来看看它。

六、处理响应

让我们直接看看如何处理一个同步的GET请求响应：

 
   
   
 
    
  
    
    
  
  1.     const xhr = new XMLHttpRequest()
    2. 
  
    
    
  
  2.     xhr.open("get", "example.php", false)
    3. 
  
    
    
  
  3.     xhr.setRequestHeader("myHeader", "goodHeader")
    4. 
  
    
    
  
  4.     xhr.send(null)
    5. 
  
    
    
  
  5.     // 由于是同步的AJAX请求，因此只有当服务器响应后才会继续执行下面的代码
    6. 
  
    
    
  
  6.     // 因此xhr.status的值一定不为默认值
    7. 
  
    
    
  
  7.     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    8. 
  
    
    
  
  8.         alert(xhr.responseText)
    9. 
  
    
    
  
  9.     } else {
    10. 
  
    
    
  
  10.         alert("Request was unsuccessful: " + xhr.status)
    11. 
  
    
    
  
  11.     }
    12.

上面的代码不难理解，我们通过之前提到的xhr .status属性（如果你忘记了，它存储着响应的HTTP状态）判断请求是否成功，如果成功的话，我们将读取xhr .responseText属性中存储的返回值。但是，当我们的请求为异步时，问题就稍微变得复杂了，由于是异步的请求，在 xhr.send(null)语句被执行后，JavaScript引擎会紧接着执行下面的判断语句，而这时由于尚未来得及响应，我们注定会得到一个默认的xhr.status值，因此，我们永远都不可能获取请求的资源了。

如何解决这个问题？答案是通过为XMLHTTPRequest实例添加 onreadystatechange事件处理程序（当然你也可以直接使用DOM2级规范规定的 .addEventListener()方法，但是注意，IE8是不支持该方法的）。

xhr实例的 readystatechange事件会监听xhr .readyState属性的变化，你可以将这个属性想象为一个计数器，随着AJAX流程的推进而不断累加，其可取的值如下：

  1. 未初始化 -- 尚未调用 .open()方法；

  2. 启动 -- 已经调用 .open()方法，但尚未调用 .send()方法；

  3. 发送 -- 已经调用 .send()方法，但尚未接收到响应；

  4. 接收 -- 已经接收到部分响应数据；

  5. 完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了；

有了这个时间处理程序对AJAX进程做监听，剩下的事就简单多了，一个异步的GET请求代码如下：

 
   
   
 
    
  
    
    
  
  1.     const xhr = new XMLHttpRequest()
    2. 
  
    
    
  
  2.     xhr.onreadystatechange = () => {
    3. 
  
    
    
  
  3.         if (xhr.readystate == 4) {
    4. 
  
    
    
  
  4.             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    5. 
  
    
    
  
  5.                 alert(xhr.responseText)
    6. 
  
    
    
  
  6.             } else {
    7. 
  
    
    
  
  7.                 alert("Request was unsuccessful: " + xhr.status)
    8. 
  
    
    
  
  8.             }
    9. 
  
    
    
  
  9.         }
    10. 
  
    
    
  
  10.     }
    11. 
  
    
    
  
  11.     xhr.open("get", "example.php", true)
    12. 
  
    
    
  
  12.     xhr.send(null)
    13.

注意：为了确保跨浏览器的兼容性，必须要在调用 .open()方法之前指定事件处理程序，仔细想想也有道理，毕竟 .open()方法的执行也包含在该事件处理程序的监听范围之内对吧？

七、取消异步请求

有时候，你可能需要在接收到响应之前取消异步请求，这时候，你需要调用 .abort()方法。

该方法会令XHR对象实例停止触发事件，并且不再允许访问任何和响应有关的对象属性。没了监控器，我们再也没法判断响应了不是吗？

但是需要注意的是，当终止AJAX请求后，你需要手动对XHR对象实例进行解绑以释放内存空间。

以上是关于再也不学AJAX了！使用AJAX的主要内容，如果未能解决你的问题，请参考以下文章

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

AJAX相关JS代码片段和部分浏览器模型

ajax序列化表单，再也不用通过data去一个个的传值了

再也不学Threadlocal了，看这一篇就忘不掉了（万字总结）

执行AJAX返回HTML片段中的JavaScript脚本

Ajax 片段元标记 - Googlebot 未读取页面内容