AJAX

AJAX（Asynchronous JavaScript And XML）并不是编程语言，而是一种从网页访问Web服务器的技术，它代表异步JavaScript和XML，并且仅仅组合了：

• 浏览器内建的XMLHttpRequest对象（从web服务器请求数据）
• JavaScript和HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

AJAX的作用：

• 不刷新页面更新网页
• 在网页加载后从服务器请求数据
• 在页面加载后从服务器接收数据
• 在后台服务器发送数据

AJAX的工作过程

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心，用于同服务器交换数据，这意味着可以更新网页的部分，而不需要加载整个页面

创建XMLHttpRequest对象

// 为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
}else{
    // CODE FOR IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP")
}

跨域访问

出于安全原因，现代浏览器不允许跨域访问，这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。

XMLHttpRequest对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求 : method：请求的类型 GET 或 POST url：服务器（文件）位置 async: true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

向服务器发送请求

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

GET 还是 POST？

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

异步

如需异步发送请求，open() 方法的 async 参数必须设置为 true：

xhttp.open("GET", "ajax_test.asp", true);

通过异步发送，JavaScript 不必等待服务器响应，而是可以：

• 在等待服务器响应时执行其他脚本
• 当响应就绪时处理响应

onreadystatechange属性

通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。

这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的：

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: “OK” 403: “Forbidden” 404: “Page not found”
statusText	返回状态文本（例如 “OK” 或 “Not Found”）

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

当 readyState 为 4，status 为 200 时，响应就绪

服务器响应属性

属性	描述
responseText	获取字符串形式的响应数据
responseXML	获取 XML 数据形式的响应数据