十四、AJAX
异步 JavaScript 和 XML(或 Ajax)是一种在后台与服务器交换数据的方法，无需刷新整个页面。这允许基于用户事件来更新页面的元素，而不中断用户在页面上所做的事情，从而实现了高度响应的 web 应用的开发。
交换数据
Ajax 请求是使用XMLHttpRequest对象发出的。发出请求的第一步是创建这个对象的一个实例。
var myRequest = new XMLHttpRequest();
为了处理服务器的响应，将一个事件处理程序附加到该对象的 onload 事件。这里用responseText属性检索响应，并显示在控制台中。
myRequest.addEventListener('load', myHandler);
function myHandler() {
console.log(this.responseText);
}
使用对象的open方法初始化请求，调用该方法有三个参数:检索方法、URL 和一个布尔值。检索方法通常是“GET”或“POST”获取数据时通常使用“GET”方法，发送数据时通常使用“POST”方法。URL 位置是服务器数据可用的位置。这可以是任何文本文件，如 HTML 或 XML 文档，也可以是生成文本响应的服务器端脚本。最后一个参数指定请求是否将被异步处理，这通常是首选，或者是否应该让send方法等到收到响应。
var url = "mytext.txt";
myRequest.open("GET", url, true);
请求准备好了，现在可以使用send方法发送了。如果信息要提交给服务器上的脚本，这个数据被指定为send方法的参数。
myRequest.send();
为了跟踪和测试这个 Ajax 请求，可以将一个名为mytext.txt的文本文件和一些示例文本放在 web 文档所在的文件夹中。请记住，Ajax 受 JavaScript 同源策略的约束，这意味着指定的位置必须位于加载脚本的同一服务器上。
服务器响应
当收到服务器响应时，应该检查 HTTP 状态代码以确保请求成功。通过status属性可以获得状态代码，一个成功的请求由数字 200 表示。其他状态代码表示响应有问题，如 404，表示找不到文件。
function myHandler() {
if (this.status === 200)
console.log(this.responseText);
}
这里使用responseText属性检索响应，该属性将响应作为文本字符串返回。如果响应是 XML 数据，那么可以使用responseXML属性将其作为 XML 对象进行检索。可以使用标准的 DOM 方法遍历这样的对象。
Ajax 事件
Ajax 请求的状态可以从XMLHttpRequest对象的readyState属性中检索。该状态用 0 到 4 的数字表示，当状态达到 4 时，响应被完全接收。可以在onreadystatechange属性上附加一个函数来响应每个状态变化事件。这可用于向用户更新请求的进度。
myRequest.onreadystatechange = stateObserver;
function stateObserver() {
switch(this.readyState) {
case 0: console.log("Request not sent"); break;
case 1: console.log("Request sent"); break;
case 2: console.log("Response header received"); break;
case 3: console.log("Downloading data"); break;
case 4: console.log("Response data received"); break;
}
}
版权属于：月萌API www.moonapi.com，转载请注明出处
