初识AJAX

Posted 2021-01-15 spy-chiang

初识AJAX

---

1 简介

Asynchronous javascript + XML（异步的JavaScript和XML）, 其本身不是一种新技术，而是一个在2005年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: html or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后，网页能够快速地将 增量更新 呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

2 AJAX入门

2.1 原理

AJAX 使用XMLHttpRequest对象与服务器进行通信。它可以以各种格式发送和接收信息，包括JSON，XML，HTML和文本文件。AJAX最吸引人的特性是它的“异步”特性，这意味着它可以与服务器通信，交换数据和更新页面而无需刷新页面。

2.2 主要功能

AJAX的主要功能允许您执行以下操作：
在不重新加载页面的情况下向服务器发出请求（无刷新发请求）
接收和处理来自服务器的数据（接收并处理响应）

2.3 发送AJAX请求

JavaScript使用XMLHttpRequest对象向服务器发送HTTP请求。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    // Process the server response here.
}
xhr.open(‘GET‘, ‘http://www.example.org/some.file‘, true);
xhr.send();

var xhr = new XMLHttpRequest();
创建一个XMLHttpRequest对象，有向服务器发起HTTP请求，并接收服务器给出的响应的功能

xhr.onreadystatechange = function() {}
声明readyState改变时触发的事件

xhr.open(‘GET‘, ‘http://www.example.org/some.file‘, true);
xhr.send();
调用HTTP请求对象的open()和send()方法用于发送实际的请求。

open()方法

第一个参数是HTTP 请求方法。GET，POST，HEAD或服务器支持的其他方法。按照HTTP标准 保持方法全大写，否则某些浏览器（如Firefox）可能无法处理请求。
第二个参数是您要发送 请求的URL。作为安全功能，默认情况下，您无法在第三方域上调用URL。无法进行跨域请求。
第三个参数（可选）设置请求是否是异步请求。如果true（默认值），JavaScript执行将继续，并且用户可以在服务器响应尚未到达时与页面进行交互。这是AJAX中的第一个A.

send()方法

方法的参数可以是您在发送POST请求时要发送到服务器的任何数据。表单数据应以服务器可以解析的格式发送，如查询字符串：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
或其他格式，如multipart/form-dataJSON，XML等。

请注意，如果您想要POST数据，则可能必须设置请求的MIME类型。例如，在调用send()作为查询字符串发送的表单数据之前，请使用以下命令：

httpRequest.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);

2.4 处理服务器返回的响应

发送请求时，声明了readyState改变时处理响应的函数，也可以按下面的方式来声明处理响应的函数。
xhr.onreadystatechange = nameOfTheFunction;
这个函数应该做什么？首先，该函数需要检查请求的状态。如果状态的值为XMLHttpRequest.DONE（对应于4），则表示已收到完整的服务器响应，您可以继续处理它。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

完整的readyState值列表记录在XMLHTTPRequest.readyState中，如下所示：

readyState	状态描述	说明
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

接下来，检查HTTP响应的HTTP响应状态代码 。在下面的示例中，通过检查200 OK响应代码来区分成功和不成功的AJAX调用。

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

在检查请求的状态和响应的HTTP状态代码之后，您可以使用服务器发送的数据执行任何操作。您有两种方法可以访问该数据：

httpRequest.responseText - 将服务器响应作为一串文本返回
httpRequest.responseXML- 将响应作为XMLDocument可以使用JavaScript DOM函数遍历的对象返回
请注意，只有在使用异步请求（第三个参数open()未指定或设置为true）时，上述步骤才有效。如果您使用 同步请求，则不需要指定功能，但这是非常不鼓励的，因为它会带来糟糕的用户体验。

详细内容请参考：https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started