前言

前俩天学习了ajax原理，今天学习下对ajax进行封装

function ajax(options) {
  // 1. 创建XMLHttpRequest对象。
  var xhr=null;  
  if (window.XMLHttpRequest){
    // 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    xhr=new XMLHttpRequest();  
  } else{// 兼容 IE6, IE5 
    xhr=new ActiveXObject("Microsoft.XMLHTTP");  
  } 
  let params = [];
  for(let i in options.params) {
    params.push(i + '=' + options.params[i])
  }
  params.join('&');
  // 2. 设置请求方式和参数。
  if(options.type == 'get') {
    xhr.open(options.type,options.url + params, options.async);
    // 3.发送请求
    xhr.send();
  }else if(options.type == 'post'){
    xhr.open(options.type,options.url,options.async);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
    // 3.发送请求
    xhr.send(params);
  }
  // 4. 响应处理。
  xhr.onreadystatechange=function()  { 
    if (xhr.readyState==4 &&xhr.status==200)  { 
       console.log('成功', responseText);
       // 处理结果
    }
  } 
}

总结

当我们了解ajax原理之后 对ajax的封装其实特别好理解，就是用一个函数包装XMLHttpRequest对象的请求过程。