用原生JS对AJAX做简单封装的实例代码
首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。
varcreateAjax=function(){varxhr=null;try{//IE系列浏览器xhr=newActiveXObject("microsoft.xmlhttp"); }catch(e1){try{//非IE浏览器xhr=newXMLHttpRequest(); }catch(e2){window.alert("您的浏览器不支持ajax,请更换!"); } }returnxhr; };
然后,我们来写核心函数。
varajax=function(conf){//初始化//type参数,可选vartype=conf.type;//url参数,必填varurl=conf.url;//data参数可选,只有在post请求时需要vardata=conf.data;//datatype参数可选vardataType=conf.dataType;//回调函数可选varsuccess=conf.success;if(type==null){//type参数可选,默认为gettype="get"; }if(dataType==null){//dataType参数可选,默认为textdataType="text"; }//创建ajax引擎对象varxhr=createAjax();//打开xhr.open(type,url,true);//发送if(type=="GET"||type=="get"){ xhr.send(null); }elseif(type=="POST"||type=="post"){ xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){if(dataType=="text"||dataType=="TEXT"){if(success!=null){//普通文本success(xhr.responseText); } }elseif(dataType=="xml"||dataType=="XML"){if(success!=null){//接收xml文档success(xhr.responseXML); } }elseif(dataType=="json"||dataType=="JSON"){if(success!=null){//将json字符串转换为js对象success(eval("("+xhr.responseText+")")); } } } }; };
最后,说明一下此函数的用法。
ajax({type:"post", url:"test.jsp", data:"name=dipoo&info=good", dataType:"json", success:function(data){alert(data.name);}});
以上这篇用原生JS对AJAX做简单封装的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。