javascript 封装ajax(多版本)
版本一(推荐的写法)
ajax的过程
1.创建XMLHttpRequest对象,也就是创建一个异步调用对象。
2.创建一个新的Http请求,并制定该Http请求的方法,url以及验证信息。
3.设置响应http请求状态的变化。
4.发送http请求。
5.获取异步调用返回的数据。
6.利用javascript或者dom实现局部刷新操作。
var AjaxUtil={ //基础选项 options:{ method:"get", url:"", params:{}, type:"text", // xml json callback:function() { } },//创建xmlHTTPrequest对象; createRequest:function (){ var xmlhttp; try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ xmlhttp=new XMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }catch(e){ alert('你额浏览器不支持Ajax'); } } } return xmlhttp; },//设置基础选项; setOptions:function(newOptions){ for(var pro in newOptions){ this.options[pro]=newOptions[pro]; } },//格式化参数 formateParameters:function (){ var paramsArray=[]; var params=this.options.params; for(var pro in params){ var paramValue=params[pro]; if(this.options.method.toUpperCase()==="GET"){ paramValue=encodeURIComponent(params[pro]); } paramsArray.push(pro+'='+paramValue); } return paramsArray.join('&'); },//状态改变的处理滴 readystatechange:function (xmlhttp){ var returnValue; if(xmlhttp.readyState==4 && (xmlhttp.status==200)){ switch(this.options.type){ case 'xml': returnValue=xmlhttp.responseXML; break; case 'json': var jsonText=xmlhttp.responseText; if(jsonText){ returnValue = eval("(" + jsonText + ")"); } break; default: returnValue=xmlhttp.responseText; break; } if(returnValue){ this.options.callback.call(this,returnValue); }else{ this.options.callback.call(this); } } },//发送ajax请求 request:function(options){ var ajaxObj=this; //设置参数 ajaxObj.setOptions.call(ajaxObj,options); //创建XMLHTTPRequest对象 var xmlhttp=ajaxObj.createRequest.call(ajaxObj); //设置回调函数; xmlhttp.onreadystatechange=function (){ ajaxObj.readystatechange.call(ajaxObj,xmlhttp); } //格式化参数 var formateParams=ajaxObj.formateParameters.call(ajaxObj); //请求方式 var method=ajaxObj.options.method; var url=ajaxObj.options.url; if("GET"===method.toUpperCase()){ if(formateParams){ url+="?"+formateParams+"random="+Math.random();//使用get的方式容易出现缓存的干扰滴呀 }else{ //这里应该考虑考虑到缓存的问题 url+='?random='+Math.random(); } } //建立连接; xmlhttp.open(method,url,true); if("GET"===method.toUpperCase()){ xmlhttp.send(null); }else if("POST"==method.toUpperCase()){ xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send(formateParams); } } } function test(){ AjaxUtil.request({ method:'get', url:'data/json.txt', type:"json", callback:function (json){ alert(json.name); } }) }
版本二
这个方法没有前面的封装的好,单也可以用来练练手滴呀
function createXHR(){ if(typeof XMLHttpRequest !="undefined"){ //非IE6浏览器 return new XMLHttpRequest(); }else if(typeof ActiveXObject !='undefined'){ var version=[ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ]; for(var i=0;i<version.length;i++){ try{ return new ActiveXObject(version[i]); }catch(e){ } } } else{ throw new Error("你的系统部或浏览器不止XHR对象"); } } //转义字符 function params(data){ var arr=[]; for(var i in data){ arr.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i])); } return arr.join("&"); } //封装ajax function show_ajax(obj){ var xhr=createXHR(); obj.url=obj.url+"?random="+Math.random();//主要用来清楚缓存 obj.data=params(obj.data); if(obj.method.toUpperCase()==="GET"){ obj.url+=(obj.url.indexOf("?")==-1)?"?"+obj.data:"&"+obj.data; } //异步 if(obj.async===true){ xhr.onreadystatechange=function (){ //执行完成 if(xhr.readState==4){ callBack(); } } } xhr.open(obj.method,obj.url,obj.async); if(obj.method.toUpperCase()==="POST"){ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(obj.data); }else{ xhr.send(null); } if (obj.async==false){ callBack(); } function callBack(){ // if(xhr.status==200){ obj.success(xhr.responseText) }else{ obj.Error("获取数据失败"+xhr.status); } } } function testInfo(){ show_ajax({ "method":"get", "url":"", "success":function (data){ }, "Error":function (data){ }, "async":false }) }