ajax原生

ajax并不算是一种新的技术，可以说是已有技术的一种组合，主要用来实现客户端与服务端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生的支持ajax，可以使用iframe方式变相实现异步效果，后来的浏览器提供了对ajax的支持。

ajax的基本过程
1创建XMLHTTPRequest对象，也就是创建一个异步调用对象
2创建一个新的HTTP请求，并指定该HTTP请求的方法，url及验证信息
3设置相应HTTP请求状态变化的函数
4发送HTTP请求
5获取异步调用返回的数据
6使用JavaScript和Dom实现局部刷新

 //最简单的请求过程
 var  xhr = new XMLHttpRequest();
 xhr.open("type","url",true);//true代表异步 url 请求地址  type 表示请求姿势；
 //通过实践监听状态。
 xhr.onreadystatechange=function(){
     if(xhr.readyState == 4 && xhr.status==200){
         console.log(xhr.responseText);//请求成功后
     }
 }
 xhr.send();

封装get 与post的ajax数据交互过程

```css
function ajax(options){
var {type,url.success,data}=options
  type=type||"get";
  data=data||{};
  var str="";
  for(var i in data){
      str+=`${i}=${data[i]}&`;
  }
  if(type=="get"){
    var d=new Date();
    url=url+"?"+str+"__ss="+d.getTime();//为什么增加时间戳  
  }
  var ajax=newXMLHTTPRequest();
  ajax.open(type,url,true)
  ajax.readystatechange=function(){
      if(ajax.readystate==4&&ajax.status==200){
          success(ajax.responseText)
      }
  }
  if(type=="get"){
  	ajax.send(str)
  };
  else if(type=="post"){
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    ajax.send(str.slice(0,str.length-1))
  }
}

jsonp解决跨域封装

function jsonp(url,success,data){
    data=data||{}
    var str="";
    for(var i in data){
        str+=`${i}=${data[i]}&`
    }
    url=url+"?"+str
    var script=document.creatElement("script");
    script.src=url
	document.body.appendChild(script)
	window[data[data.columnName]]=function(res){
   	 		success（res）
	}
}

三合一封装（ajax的post，get和jsonp）

function ajax(options){
 var {type,url,success,error,data,timeout}=options
  	 type=type||"get";
  	 data=data||{};
  	 timeout=timeout||1000;
 var str="";
 for(var i in data){
     str+=`${[i]}=${data[i]}&`
 }
 if(type=="get"||type=="jsonp"){
     var d=Date();
     url=url+"?"+str+"__sd="+d.gettime();
 }
 if(type=="jsonp"){
     var script=document.createElement("script")
     script.src=url
     document.body.appendChild(script)
     window[data[data.columnName]]=function(res){
         success&&success(res);
         error=null;
     }
     setTimeout(()=>{
         error&&error();
         success=null;
     },timeout)
 }else{
          var xhr = new XMLHTTPRequest();
    	  xhr.open(type,url,true)
    	  xhr.onreadystatechange=function(){
          	if(xhr.readyState==4&&xhr.status==200){
             	success(xhr.responseText)
            }else if(xhr.readyState==4&&xhrstatus!=200){
            	 error&&error(xhr.status)
         	}
          }
          if(type=="get"){
          		xhr.send(str);
          }else if(type=="post"){
          	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          	xhr.send(str.slice(0,str.length-1))
          }   	
 }  
}