首页  »   Ajax

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

网友分享于:2017-10-07  浏览:0次
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解析,不同的可以相应改动一下。

 1 function ajax(method,url,postStr,dataType="json"){  //
 2   return new Promise((resolve,reject)=>{
 3     //1、获取 xhr
 4     var xhr = (function(){
 5       if(window.XMLHttpRequest){
 6         return new XMLHttpRequest();
 7       }else{
 8         return new ActiveXObject("Microsoft.XMLHttp");
 9       }
10     })();
11     //2、创建请求
12     xhr.open(method,url,true);
13     
14     //4、设置请求消息头
15     if(method=="post"){
16       xhr.setRequestHeader(
17         "Content-Type", "application/x-www-form-urlencoded");
18     }
19     //3、设置回调
20     xhr.onreadystatechange=function(){
21       if(xhr.readyState == 4)
22         if(xhr.status == 200){
23           if(url.indexOf(".php")!=-1
24             &&dataType.toLowerCase()=="json"){
25             console.log(xhr.responseText);
26             resolve(JSON.parse(xhr.responseText));
27           }else{
28             console.log(xhr.responseText);
29             resolve(xhr.responseText);
30           }
31         }else
32           reject("ajax出错啦!"+xhr.status);
33     }
34     //5、发送
35     xhr.send(postStr);
36   })
37 }

 

相关解决方案

最新解决方案