AJAX学习(二) --------- AJAX异步实现步骤

---

一、AJAX异步实现步骤

1. 创建异步对象

//创建异步对象
var xmlHttp = new XMLHttpRequest();

2. 给异步对象绑定onreadystatechange事件

onreadystatechange：当异步对象发起请求、获取数据都会触发这个事件(或者说是每当readyState改变时，就会触发onreadystatechange事件) 。该事件要求指定一个处理函数function。

什么是readyState？

异步对象的属性 readyState 表示异步对象请求的状态变化

0 ： 创建异步对象，new XMLHttpRequest()
1 ： 初始化异步请求对象，xmlHttp.open()
2 ： 异步对象发送请求， xmlHttp.send()
3 ：异步对象接收应答数据，从服务端返回数据。XMLHttpRequest 内部处理
4 ：异步对象把接收的数据处理完成后。此时开发人员才可以读取数据，对数据进行处理

除此之外，onreadystatechange还有两个重要属性：

onreadystatechange属性：内部定义函数，每当每当 readyState 属性改变时，就会调用该函数

status属性：

• 200 ： 请求成功
• 404 ：未找到页面

语法格式：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        //可以处理服务器端的数据，更新当前页面
    }
}

3. 初始化异步请求参数

• 方法：

open(method, url, async) ：初始化异步请求

参数说明：

• method ： 请求类型， GET 或 POST
• url ： 服务器servlet地址
• async ： true(异步) 或 false (同步)

例如

xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

4. 使用异步对象发送请求

xmlHttp.send();

5. 接收服务器响应数据

如需获得来自服务器的响应， 请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText : 获得字符串形式的响应数据
responseXML : 获得 XML 形式的响应数据

调用形式:
xmlHttp.responseText
xmlHttp.responseXML

二、异步请求与同步请求

• XMLHttpRequest 对象 open( method , url, true ) 第三个参数 true 表示异步请求
  异步请求特点：
  (1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。
  (2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令。
  (3)当响应就绪后再对响应结果进行处理

• XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求
  同步请求特点：
  (1)某一个时刻，浏览器只能委托一个同步请求对象发送请求，必须等待请求处理完成。
  (2)浏览器委托同步请求对象工作期间，浏览器处于等待状态。不能执行其他命令。
  (3)不推荐使用。