AJAX

2016-11-29

摘要：AJAX 的相关知识

示例

原生：

// 1.创建 XMLHttpRequest 对象
if (window.XMLHttpRequest) { // IE7+、Firefox、Chrome、Safari以及Opera
  var xhr = new XMLHttpRequest();
} else { // IE5和IE6
  var xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
// 2.初始化请求
xhr.open("GET", "demo.php?name=niuxiaokui&age=23", true);
// xhr.open("POST","demo.php",true);
// 2.设置请求头
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 4.发送请求
xhr.send();
// xhr.send({name:"niuxiaokui",age:23});
// 5.绑定事件
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) { // 成功
    success(JSON.parse(xhr.responseText));
  } else {
    console.log(xhr.readyState + ' ' + xhr.status);
  }
}
xhr.onerror = function() {
  console.error(this.statusText);
}
function success(data) {
  console.log("接收到：",data)
}

jQuery：

$.ajax({
  url: 'demo.php', // 请求地址
  type: 'POST', // 方式
  data: { name: "niuxiaokui", age: 23 }, // 传递的参数
  // data:"username=niuxiaokui&age=23",
  async: true, // 是否为异步，默认为true
  timeout: 10000, // 超时限制，单位是毫秒
  dataType: 'json', // 返回的数据格式
  success: function (data) { // 成功
    console.log(JSON.parse(data));
  },
  error: function (e) {
    console.log(e);
  }
})

readyState

readyState 五种状态：
0：请求未初始化（还没有调用 open()）
1：请求已经建立，但是还没有发送（还没有调用 send()）
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
4：响应已完成；您可以获取并使用服务器的响应了
还有另一种状态解释：
0：（未初始化）还没有调用send()
1：（载入）正在发送请求，已调用send()方法
2：（载入完成）send()方法执行完成，已经接收到全部响应内容
3：（交互）正在解析相应内容
4：（完成）响应内容解析完成，可以在客户端调用
大多支持第二种解释，因为它将解析内容这一步也考虑到了

参考：
jQuery - AJAX 简介
 Ajax总结篇
 重拾Ajax
经典的20道AJAX面试题