ajax封装

    ajax想必做前端开发的，没有不对冲熟悉的，异步获取数据，不用刷新整个页面，局部dom刷新就可以进行前后交互，前后的基本流程大概如下：

       ①先本地创建一个XMLHttpRequest对象，var xmlHttp = new XMLHttpRequest();

　　②创建连接，xmlHttp.open('GET','demo.php','true');

　　③向后台发送请求，xmlHttp.send()；

　　④根据返回状态处理数据，xmlHttp.onreadystatechange = function(){

      　　if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

      　　}

  　　}。

 

   上述只是简单的一个ajax的介绍，具体在工作中使用的话，需要把各种情况考虑到，进而对ajax，进行封装处理，下面将仔细进行如下解析：

　　①：把json对象转换为字符串的一个封装函数，下面用get请求的话需要拼接url.

　　 function json2url(json){

　　　　json.t = Math.random();

　　　　var arr = [];

　　　　for(var name in json){

　　　　　　arr.push(name+"="+encodeURIComponent(json[name]));/字符转换  防止乱码
　　　　}

　　　　return arr.join("&");

　　}

 　　

　　②个人理解对ajax，进行了封装，考虑了不同浏览器的兼容性，考虑了请求超时 ，成功，失败三种情况下的处理，考虑了不同请求方式  get  post 考虑了乱码情况等。

function jaxa(json){
	//默认值
  json = json || {};
  if(!json.url)return;
  json.data = json.data || {};//请求后台数据需要的字段
  json.type = json.type || "GET";//请求方式
  json.timeout = json.timeout || 10000;//请求超时默认时间
  if(window.XMLHttpRequest){//chrome fixefox 高级浏览器
    var oAjax = new XMLHttpRequest();
  }else{//IE浏览器
  	var oAjax = new ActiveXObject("MIcrosoft.XMLHTTP");
  }
  //建立连接 是否异步
  switch(json.type.toLowerCase()){//两种不同方式进行不同的建立方式
  	case "get":
  	oAjax.open("GET",json.url+"?"+json2url(json.data),true);
  	//get  GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连
  	oAjax.send();//发送
  	break;
  	case "post":
  	oAjax.open("POST",json.url,true);
  	oAjax.setRequestHeader("Content-Type","application/x-www-from-urlencoded");
  	oAjax.send(json2url(json.data));//发送
  	//POST把提交的数据则放置在是HTTP包的包体中。需要send的时候把字符串类型的data发给后台。
  	break;
  }   
  json.loading&&json.loading();//请求数据时可以做相应的加载设计 比如增加加载条等。
  var timer = setTimeout(function(){//规定时间内是否请求道数据 请求不到数据的话 请求失败的处理
  	json.complete&&json.complete();//请求失败需要做的事情
  	json.error&&json.error(oAjax.status);//失败后返货的状态码
  	oAjax.onreadystatechange = null;//把创建的对象 变为空 让垃圾回收机制回收
  },json.timeout);
  //接收  当网络状态进行改变的时候 函数
  oAjax.onreadystatechange = function(){
  	if(oAjax.readyState === 4){//网络状态为4正常情况下
  		if(oAjax.status > 200 && oAjax.status < 304 || oAjax.status === 304){//aJax状态码 200 到300 之间是成功  304是重定向也是成功
  			clearTimeout(timer);//完成了就得把创建的定时器关掉 也就不再看请求是否超时 
  			json.complete&&json.complete();//成功后需要做的事儿
  			json.success&&json.success(oAjax.responseText);//成功后返回成功状态数据。
  		}else{//不在上述状态码区间的 为请求失败
  			clearTimeout(timer);//请求失败，也就不再看请求是否超时 关闭定时器
  			json.complete&&json.complete();//失败了做的事儿
  			json.error&&json.error(oAjax.status);//失败后返货的状态码
  		}
  	}
  }                
}

　　不合理的地方 大家多多指教，谢谢。