AJAX待补充

AJAX

	AJAX 是一种用于创建快速动态网页的技术。

	AJAX 并不是编程语言。

	AJAX 是一种从网页访问 Web 服务器的技术。

	AJAX 代表异步 JavaScript 和 XML。

ajax工作机制：

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

XMLHttpRequest 对象

XMLHttpRequest对象用于同幕后服务器交换数据

可以更新部分网页部分，而不需要重新加载整个页面

创建 XMLHttpRequest 的语法：

variable = new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：

variable = new ActiveXObject("Microsoft.XMLHTTP");

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

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

W3School，XMLHttpRequest 对象方法，对象属性

向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法：

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

open(method, url, async)

规定请求的类型

• method：请求的类型：GET 还是 POST

• url：服务器（文件）位置

• async：true（异步）或 false（同步）

• open() 方法的 url 参数，是服务器上文件的地址：

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

send()向服务器发送请求（用于 GET）

send(string)向服务器发送请求（用于 POST）

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

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

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

onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

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

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

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

使用回调函数

回调函数是一种作为参数被传递到另一个函数的函数。

如果您的网站中有多个 AJAX 任务，那么应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。

该函数应当包含 URL 以及当响应就绪时调用的函数。