初识Ajax

AJAX学习记录

---

前言

AJAX 是开发者的梦想，因为您能够：

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

---

一、AJAX是什么？

AJAX = Asynchronous JavaScript And XML.

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

二、XMLHttpRequest 对象

1.创建对象

代码如下（示例）：

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

所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是：

variable = new XMLHttpRequest();

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

创建 XMLHttpRequest 的语法是：

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

2.发送请求

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

代码如下（示例）：

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

方法	描述
open(method, url, async)	规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）

---

3.服务器响应

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”）

服务器响应属性

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

服务器响应方法

属性	描述
getResponseHeader()	从服务器返回特定的头部信息
getAllResponseHeaders()	从服务器返回所有头部信息