封装Ajax

最新推荐文章于 2024-06-22 12:23:42 发布

张恒朋

最新推荐文章于 2024-06-22 12:23:42 发布

阅读量511

点赞数 1

分类专栏：代码解读文章标签： ajax class url

本文链接：https://blog.csdn.net/zhp5516/article/details/76508065

版权

代码解读专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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>

张恒朋

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装Ajax

method:值为get或post url：请求地址 data：请求参数，传入键值对类型的字符串，不同的键值对使用&符号隔开，例如”a=1&b=2”; 如果不需要请求参数则赋值为null. deal200:接收一个带有参数的函数对象，用来进行响应结果的处理 deal404：接收一个函数对象，用来处理404错误 deal500：接收一个函数对象，用来处理500错误。 async:异步同步
复制链接

扫一扫