原生AJAX请求

ajax即Asynchronous Javascript And XML，不是一门新的语言，而是对现有技术的综合利用。其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步：指某段程序执行时不会阻塞其他程序执行，其表现形式为程序的执行顺序不依赖于程序本身的书写顺序，相反则为异步

XMLHttpRequest对象

浏览器的内建对象，用于在后台和服务器通信，由此我们可以实现网页的局部更新，而不必整个刷新页面

所有的现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建XMLHttpRequest对象。老版本的IE5、IE6使用ActiveX对象

方法	描述
open(method,url,async)	规定请求的类型、url以及是否异步处理（true为异步、false为同步）
send(string)	将请求发送到服务器。string(仅用于post请求)

...

---

get请求

get请求需要放在url地址的参数中。并通过urlencode的方式传参，也就是?隔开url和参数，然后多个参数用&连接，参数格式为：key = val

var xhr = new XMLHttpRequest();

xhr.open();
xhr.send();

xhr.onreadystatechange = function(e) {
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText);
  }
}

post请求

post请求需要添加一个请求头，让后端知道我们请求的参数的格式，这样后端才能解析我们的数据。另外，传输的数据需要格式化到send方法中。

var xhr = new XMLHttpRequest();

xhr.open('POST',"/try/ajax/demo_post2.php",true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(xhr.send("fname=Henry&lname=Ford"))；

xhr.onreadystatechange = function(e) {
  if(xhr.readyState === 4 && xhr.status === 200){
       cosole.log(xhr.responseText)
  }
}

...

---

接受数据并处理数据

XMLHttpRequest对象的相关属性和事件

属性	说明
status	200（"ok"）
responseText	获取字符串形式的相应数据
responseXML	获得XML形式的相应数据
readyState	存有XMLHttpRequest的状态。请求发送到后台后，状态会从0到4发生变化。 0：请求为初始化 1：服务器连接已建立 2 : 请求已接受 3 : 请求处理中 4 : 请求已完成，且相应已就绪
onreadystatechange	每当readyState属性改变时，就会调用该函数

开发人员，可以通过监听XMLHttpRequest对象的onreadystatechange事件，在事件的回调函数中判断readyState的状态，可以帮助我们进行对象请求结果的判断处理。

封装原生ajax请求

封装get请求

/*
 * Ajax的GET请求辅助方法
 * params {string} url 请求后台的地址
 * params {Function} callback 请求成功后调用的回调函数
 * return undefined
 */ 
function ajaxGet(url,callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET',url,true);
  xhr.send();

  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200){
      callback(xhr.responseText);
    }
  }
}
//调用
ajaxGet('/user.json',function(data) {
  console.log(data)
})

封装post请求

function ajaxPost(url,data,callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST',url,true);
  xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  xhr.send(data);
  
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200){
      callback(xhr.responseText);
    }
  }
}

//调用
ajaxPost('/api/user', 'id=9&com=aicoder', function(data){
  // 后台返回的数据就是 字符串类型。要转成json，必须自己手动转换。
  var user = JSON.parse(data);
  console.log(user.id);
  console.log(user.com);
})