Ajax异步请求几步曲——可直接引入

引入函数ajax（method,url,postStr,dataType="json"）{

　　return new Promise((resolve,reject)=>{...}

)};

function ajax(method,url,postStr,dataType="json"){
  return new Promise((resolve,reject)=>{

method： 请求方式，string类型，常取值：get   post...

url：请求地址,string类型

postStr：当method取post时需要发送给服务端的数据字符串

dataType：响应消息头，默认json，告诉浏览器是什么格式以及什么类型

 

1.获取xhr

var xhr = function(){
　　if(window.XMLHttpRequest){
　　　　return new XMLHttpRequest();
　　}else{
　　　　return new ActiveXObject("Microsoft.XMLHttp")
　　}
}

 

 2.创建请求

  xhr.open(method,url,true); 

 

 3.设置请求消息头

如果method取值为post，则需修改消息头

if(method=="post"){
      xhr.setRequestHeader(
        "Content-Type", "application/x-www-form-urlencoded");
    }

　　

4.设置回调并发送

xhr.onreadystatechange = function(){
　　if(xhr.readyState==4){
　　　　if(xhr.status==200){
　　　　　　if(url.indexof(".php")!=-1&&dataType.toLowerCase()=="json"){
　　　　　　　　console.log(xhr.responseText);
　　　　　　　　resolve(JSON.parse(xhr.responseText));　
　　　　　　}else{
　　　　　　　　console.log(xhr.responseText);
　　　　　　　　resolve(xhr.responseText);
　　　　　　}
　　　　}else{
　　　　　　　　reject("ajax出错了"+xhr.status);
　　　　}
　　}
　　xhr.send(postStr);
}

　　完整代码如下，服务器PHP，用JSON解析，不同的可以相应改动一下。

function ajax(method,url,postStr,dataType="json"){  //
  return new Promise((resolve,reject)=>{
    //1、获取 xhr
    var xhr = (function(){
      if(window.XMLHttpRequest){
        return new XMLHttpRequest();
      }else{
        return new ActiveXObject("Microsoft.XMLHttp");
      }
    })();
    //2、创建请求
    xhr.open(method,url,true);
    
    //4、设置请求消息头
    if(method=="post"){
      xhr.setRequestHeader(
        "Content-Type", "application/x-www-form-urlencoded");
    }
    //3、设置回调
    xhr.onreadystatechange=function(){
      if(xhr.readyState == 4)
        if(xhr.status == 200){
          if(url.indexOf(".php")!=-1
            &&dataType.toLowerCase()=="json"){
            console.log(xhr.responseText);
            resolve(JSON.parse(xhr.responseText));
          }else{
            console.log(xhr.responseText);
            resolve(xhr.responseText);
          }
        }else
          reject("ajax出错啦！"+xhr.status);
    }
    //5、发送
    xhr.send(postStr);
  })
}