当前位置:首页 >> JavaScript>>正文

原生JS的ajax封装与使用示范

栏目:JavaScript时间:2018-05-03热度:
本文标签: js ajax 封装

  在平时的网页开发中,ajax经常使用到,但是我们发现ajax每次使用基本都是相同的4步,仅给定的参数和对返回的数据的处理不同,所以今天试着将其封装成函数,方便以后使用.


/*
ajax()用于支持所有情况下的ajax请求发送
参数:
type:请求类型,get/post/delete/put
rul:请求地址,"...php"
data:请求参数,要求必须是:可以没有"参数名=值&参数名=值&..."
dataType:返回结果字符串的类型:json或不写
success:回调函数.
在成功收到服务器响应后自动执行
执行时,会自动传入服务器响应结果数据作为参数
*/
function ajax({type,url,data,dataType}){
return new Promise(function(success){
  //1.创建xhr
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
  //2.监听
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
  var res=xhr.responseText;
  if(dataType==="json"){
  var res=JSON.parse(res);
  
  }
  success(res);
}
  }
  
  if(type==="get"&&data!==undefined){
  url+="?"+data;
  }
  //3.打开连接
  xhr.open(type,url,true);
  if(type==="post"){
  xhr.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded"
  );
  }
  //4.发送请求
  if(type==="get"){
  xhr.send(null);
  }else if(data!==undefined){
  xhr.send(data);
  }
  })
}


    使用示范:

ajax({
type:"get",
url:"test.php",
dataType:"json"
}).then(function(test){
//console.log(test);
})


热门标签

最新评论