Ajax的步骤

• readyState状态
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

第一步 : 初始化 & 实例化

var xhr = new XMLHttpRequest()

第二步 : 创建链接, 用什么链接,和谁链接 同步 false 异步 true

xhr.open('get','http://baidu.com',true) // 默认异步

第三步 : 监听改变

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

第四步 : 传输数据

xhr.send()

封装方法

function ajax(opt){
 //默认
var default_opt = {
url:'',
method: 'GET',
async: true,
data: {},
success:null,
callback:null
}
//合并
var newOpt = Object.assign(default_opt, opt);
//实例化
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
  newOpt.callback && newOpt.callback(xhr.responseText)
  }
}  
//get?
var search = '';
if(newOpt.method.toUpperCase() === 'GET'){
// ?name=zdd&age=30
search = '?' + Object.keys(newOpt.data).map(function(k){
  return k + '=' + newOpt.data[k]
}).join('&');
}
//建立链接
 xhr.open(newOpt.method, newOpt.url + search, newOpt.async);
//post?
var data = {};
if(newOpt.method.toUpperCase() === 'POST'){
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form- 
urlencoded');
data = JSON.stringify(newOpt.data);
}
xhr.send(data);
}

-----------------------------------------------------------


ajax({
url: 'http://127.0.0.1:3000/api/data',
method: 'post',
async: true,
data: {
  name: 'zdd',
  age: 30
},
success: function (data) {
  console.log('yes');
},
callback: function (data) {
  console.log(JSON.parse(data));
}
})