封装Ajax

来源：互联网发布：shake it动作数据编辑：程序博客网时间：2024/06/10 21:50

method:值为get或post
url：请求地址
data：请求参数，传入键值对类型的字符串，不同的键值对使用&符号隔开，例如”a=1&b=2”;
如果不需要请求参数则赋值为null.
deal200:接收一个带有参数的函数对象，用来进行响应结果的处理
deal404：接收一个函数对象，用来处理404错误
deal500：接收一个函数对象，用来处理500错误。
async:异步同步设置，，默认是异步，false代表同步，true代表异步。
封装的方法是使用与字符的响应数据，不适用于xml的响应数据

function testAjax(method,url,data,deal200,deal404,deal500,async){        //创建ajax引擎对象        var  ajax;        if(window.XMLHttpRequest){           ajax=new XMLHttpRequest();        }else if(window.ActiveXObject){           ajax=new ActiveXObject("Msxml2.XMLHTTP");        }        //复写onreadystatechange函数        ajax.onreadystatechange=function(){           //判断ajax状态码           if(ajax.readyState==4){              //判断响应状态码              if(ajax.status==200){                 //获取响应信息                 var dd=ajax.responseText;                 //处理响应信息                 if(deal200){注：js中可以直接传入一个方法，调用时在方法名后加()不然只是代表此方法对象不调用此处的deal200为传入的匿名函数，然后又将dd数据传入到了这个匿名函数，从而实现了数据的操作                   deal200(dd);                 }              }else if(ajax.status==404){                 if(deal404){                   deal404();                 }               }else if(ajax.status==500){                 if(deal500){                   deal500();                 }               }else{                 alert("未知错误，无效的ajax响应数据");              }            }        }

注：判断请求方式，get时send为null，url拼接参数
post时send传入参数，使用 setRequestHeader() 来添加 HTTP 头

 if("get"==method.toLowerCase()){toLowerCase()转换为小写           //创建请求            ajax.open(method, url+(data==null?"":"?"+data), async);            //发送请求            ajax.send(null);        }else if("post"==method.toLowerCase()){           ajax.open("post", url, async);           ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");           ajax.send(data);        }       }

为了实现封装后的Ajax的公用，将其写在js文件中，使用时引用即可，先引用后使用，引用的script标签要在使用的script标签之前，否则会报错

<!--引入js文件  -->    <script type="text/javascript" src="js/AjaxUtil.js"></script>    <!--声明js函数  -->    <script type="text/javascript">   //使用封装的ajax实现下拉框数据的填充   function getSelData2(){      alert("我是封装方式调用");       myAjax("get","sel",null, function(data){注：获取数据的方法要传入一个date参数        //处理响应数据           //使用eval函数将数据转换为可执行的js代码           eval("var c="+data);           //获取要填充数据的HTML对象           var sel=document.getElementById("sel");           //将数据填充到对象中           for(var i=0;i<c.length;i++){             sel.innerHTML=sel.innerHTML+"<option value="+c[i].cid+">"+c[i].cname+"</option>"           }       });   }    </script>  </head>  <body onload="getSelData2()">  <h3>ajax学习下拉框数据填充</h3>      <hr />      请选择班级信息：<select name="" id="sel"></select>     </body>

阅读全文

0 0