AJAX请求的五个步骤及步骤详解

什么是AJAX?

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和 XML），是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

AJAX的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示： AJAX工作原理图

AJAX请求的五个步骤

1.建立XMLHttpRequest对象;
2.设置回调函数;
3.配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
4.向服务器发送数据;
5.在回调函数中针对不同的响应状态进行处理;

1.创建XMLHttpRequest异步对象

var xhr;  //定义一个变量,用于存放XMLHttpRequest对象
if(window.XMLHttpRequest) { 
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xhr = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.设置回调函数

xhr.onreadystatechange = callback；

3.使用open方法与服务器建立连接

// get 方式
xhr.open("get", "test.php", true)

// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4.向服务器发送数据

// get 不需要传递参数
xhr.send(null)

// post 需要传递参数
xhr.send("name=jay&age=18")

5.在回调函数中对不同的响应状态进行处理

function callback() {
  // 判断异步对象的状态
  if(xhr.readyState == 4) {
    // 判断交互是否成功
    if(xhr.status == 200) {
      // 获取服务器响应的数据
      var res = xhr.responseText
      // 解析数据
      res = JSON.parse(res)
    }
  }
}

ajax中的五种状态码
- 0：请求未初始化
- 1：服务器连接已建立(已调用open方法，但还未调用send)
- 2：请求已接收(已调用send方法)
- 3：请求处理中(请求已到达服务端，正在处理)
- 4：请求已完成，且响应已就绪
- 状态： 200——正确、404——未找到页面、500——错误

AJAX请求成功和失败判断

ajax 的 success 和 error 方法根据响应状态码来触发。
当 XMLHttpRequest.status 为 200 的时候，表示响应成功，此时触发 success(). 其他状态码则触发 error()。

error判断，请求失败

error: function (data) {
    var json =  JSON.stringify(data);
        alert(json);
}

打印结果：

【readyState】：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

完整的AJAX实例

// -----1.创建XMLHttpRequest对象，也就是创建一个异步调用对象
var xhr = new XMLHttpRequest();
// -----3. 创建一个新的HTTP请求，并指定该请求的方法、URL及验证信息
xhr.open('post','www.xxx.com',true)
// 接收返回值
// -----2、设置响应HTTP请求状态变化的函数------5.回调函数对不同状态进行处理
xhr.onreadystatechange = function(){    //xhr.onreadystatechange = callback;时间回调
  if(xhr.readyState === 4) {
    if(xhr.status >= 200 && xhr.status < 300 || CharacterData.status == 304) {
      console.log(xhr.responseText);
    }
  } 
}
// -----处理请求参数
postData = {"name1": "value1", "name2": "value2"};
postData = (function(value){
  var dataString = "";
  for(var key in value){
       dataString += key+"="+value[key]+"&";
  };
    return dataString;
}(postData));

// 设置请求头
xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
  console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// ----4.发出请求
xhr.send(postData);

参考文档：参考文档1、参考文档2