原生js封装ajax以及原生js封装通过jsonp跨域解决问题

原生js封装ajax

代码如下，调用时候类似于Jquery封装的ajax

function myajaxnormol(obj){
    defaults={
      type:"get", //获取类型
      url:"#", //目标地址
      datetype:"json",//数据类型
      data:{}, //key-value值
      asnyc:true, //是否异步
      success:function(result){}//回调函数
    }
    for(var key in obj){
      defaults[key]=obj[key]; //实现覆盖
    }
    var xhr =window.XMLHttpRequest? new XMLHttpRequest():new window.ActiveXObject('Microsoft.XMLHTTP');//1.创建异步对象，ie6兼容处理
    var params="";
    for(var attr in defaults.data){
      params+=attr +'='+defaults.data[attr]+"&";
    }
    if(params){
      params=params.substring(0,params.length-1);//去除最后一个&
    }
    if(defaults.type=='get'){//get方式拼串
      defaults.url+="?"+params;
      // console.log(defaults.url);//测试url有无出错
    }
    //2设置请求方式和地址
    xhr.open(defaults.type,defaults.url,defaults.asnyc);
    //3发送请求
    if(defaults.type=='get'){
      xhr.send(null)
    }else if(defaults.type=='post'){
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//post方式设置请求头
      xhr.send(params);//post方式send方法需要传递参数（key-value）
    }
    if(defaults.asnyc){
      xhr.onreadystatechange = function () {
        //4.1判断状态&请求是否成功并使用数据
        if (xhr.readyState == 4  ) {
          if(xhr.status == 200){
          // 4.2解析数据
          var result=null;
          if(defaults.datetype=='json'){
            result=JSON.parse(xhr.responseText);
          }else if(defaults.datetype=='xml'){
            result=xhr.responeXML;
          }else{
            result=xhr.responseText;
          }
          defaults.success(result);
        }
      }
      };
    }else{
      if (xhr.readyState == 4 && xhr.status == 200) {
          // 解析数据
          var result=null;
          if(defaults.datetype=='json'){
            result=JSON.parse(xhr.responseText);
          }else if(defaults.datetype=='xml'){
            result=xhr.responseXML;
          }else{
            result=xhr.responseText;
          }
          defaults.success(result);
    }
}
}

原生js封装通过jsonp跨域方法

function myajaxcross(obj){
var defaults={
type:“get”,//
url:"",
data:{},
datetype:‘jsonp’,
success:function(data){},
jsonp:"", //各个接口不同
jsonpcallback:"" //函数名称 可以认伊定义
};
for(key in obj){
defaults[key]=obj[key];
}
//创建script对象
var script=document.createElement(“script”);
var params="";
for(var arr in defaults.data){
params+= arr + “=” + defaults.data[arr]+"&";
}
//设置script的src属性，设置请求地址
script.src=defaults.url+"?"+params+defaults.jsonp+"="+defaults.jsonpcallback;
console.log(script.src);
//设置回调函数
window[defaults.jsonpcallback]=function(data){
defaults.success(data);
};
var head=document.querySelector(“head”);
//将script标签写入head标签内
head.appendChild(script);
}