码迷,mamicode.com
首页 > Web开发 > 详细

js之ajax的封装

时间:2018-05-20 18:18:02      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:后台   else   change   创建   typeof   err   cti   ora   var   

上节讲了ajax的作用好处即流程为的就是去封装ajax,那......那该怎么封装ajax呢???????

封装方法,传参是个很大的问题!在这里,我们应该传几个参数呢?

  首先我们肯定要传一个请求方式get或post(method),然而json数据也是必不可少的,其次就是需要传入一个URL路径了,在者就需要一个成功的回调和一个失败的回调了;

  如上所示,参数分为(method, json, url, success, error);

参数知道了,ajax流程也有了,那我们就开始封装吧!

  首先创建一个ajax对象,然后再定义一个空的字符串。因为传入的method包含两种请求方式,所以要判断是get还是post。然后再将json数据进行遍历,且将所有的哈希值进行拼接;再截取前面的&符,将url进行拼接,紧接着就是open打开和send提交了。注:get和post请求方式的区别还在于post要设置请求头而get不用。代码如下:

 

function ajax(method,url,json,success,error){
    //创建ajax对象
    var xml = new XMLHttpRequest()||new ActiveXObject("Microsoft,XMLHTTP");
    //定义一个空的字符串
    var str = "";
    //如果是get方式
    if(method == "get"){
        //将所有哈希值进行拼接
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        //截取前面的&符
        str = str.substr(1);
        //url进行拼接
        url = url+"?"+str;
    
        xml.open("get",url,true);

        xml.send();
    }else{

        //将所有哈希值进行拼接
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        //截取前面的&符
        str = str.substr(1);

        xml.open("post",url,true);

        //设置请求头
        xml.setRequestHeader("content-type","application/x-www-form-urlencoded");

        xml.send(str);
    }
}

 

  还记得ajax流程最后一步是啥么?没错,就是监听服务器的状态。但是该怎么监听呢?首先就是判断建立连接的状态是否完成(4)并且服务器是否请求成功(200);然后在判断后台数据给的自否是字符串,如果不是我们则将它转换成字符串(JSON.parse( ) );在其之后如果第一个判断为true的话如果成功的回调存在的话则执行成功的回调,如果为false的话有失败的回调则执行失败的回调。代码如下:

 

//监听服务器状态
xml.onreadystatechange = function(){
    //建立连接状态 ----------状态码
    if(xml.readyState == 4 && xml.status == 200){
//后台数据给的自否是字符串 JSON.parse() var data = xml.responseText;
if(typeof data !="object"){ data = JSON.parse(data); }
//成功的回调 success&&success(data); }else{
//失败的回调 error&&error(xml.status); } }

  看吧,ajax就这样封装好啦,快去试试吧。略略略.......

function ajax(method,url,json,success,error){
    var xml = new XMLHttpRequest()||new ActiveXObject("Microsoft,XMLHTTP");
    var str = "";
    if(method == "get"){
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        str = str.substr(1);
        url = url+"?"+str;    
        xml.open("get",url,true);
        xml.send();
    }else{
        for(var key in json){
            str+="&"+key+"="+json[key];
        }
        str = str.substr(1);
        xml.open("post",url,true);
        xml.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xml.send(str);
    }
    xml.onreadystatechange = function(){
        if(xml.readyState == 4 && xml.status == 200){
            var data = xml.responseText;
            if(typeof data !="object"){
                data = JSON.parse(data);
            }
            success&&success(data);
        }else{
            error&&error(xml.status);
        }
    }
}

 

  不用感谢我,因为我是八宝山喊麦王,嘻嘻。

 

js之ajax的封装

标签:后台   else   change   创建   typeof   err   cti   ora   var   

原文地址:https://www.cnblogs.com/wantu/p/9063635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!