首页 > 代码库 > 封装底层Ajax

封装底层Ajax


创建Ajax简易步骤:
创建Ajax对象:var xhr=new XMLHttpRequest();
链接服务器:xhr.open(‘get‘,‘a.php‘,true);
发送请求或数据:xhr.send();
状态值改变时调用函数:xhr.onreadystatechange=fncallback;

 

 

封装Ajax:

 

    function ajax(options){
        
        var url=options.url,
            asy=options.async!==false,
            type=(options.type || ‘GET‘).toUpperCase(),
            data=http://www.mamicode.com/options.data || null;
            suc=options.success || null,
            err=options.error || null;
            
        xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
        //new XMLHttpRequest()  IE7+, Firefox, Chrome, Opera, Safari
        //new ActiveXObject(‘Microsoft.XMLHTTP‘)  ie5、6
        
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                xhr.status==200 ? suc && suc(xhr.responseText) : err && err();
            }
        }
        
        data=http://www.mamicode.com/(function(data){
            if(data){
                var arr=[];
                for(var i in data){
                    arr.push(encodeURIComponent(i)+‘=‘+encodeURIComponent(data[i]));
                    //encodeURIComponent处理中文等特殊字符编码成%E5%93%88%E5%93%88形式
                }
                return arr.join(‘&‘);    //将数组变成字符串:username=name%E5%93%88%E5%93%88&password=123
            }else{
                return data;
            }
        })(data);
        
        if(type==‘GET‘ && data){
            url+= url.indexOf(‘?‘)!=-1 ? ‘&‘ : ‘?‘;
            url+=data+‘&t=‘+Math.random();
        }
        //用一个永远在变的数值Math.random()处理get方式留下的缓存,还可以用时间戳,new Date().getTime()
        //让url成: a.php?username=name%E5%93%88%E5%93%88&password=123&t=0.06531456997618079
        
        xhr.open(type,url,asy);
        
        switch(type){
            case ‘POST‘:
                xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
                data?xhr.send(data):xhr.send();
                break;
            default:
                xhr.send();
        }
    }

 

使用方法:

    document.onclick=function(){


        ajax({
            type:‘post‘,         //默认:get
            url:‘a.php‘,
            data:{
                username:‘name哈哈‘,
                password:123
            },                      //默认:null
            async:false,        //默认:ture
            success:function(sData){alert(sData)},        //默认为null
            error:function(){alert(‘出错啦‘)}                   //默认为null
        });
        
    }

 

附加:

xhr.readyState属性代码:
0    未初始化的状态。创建了一个XMLHttpRequest对象,尚未初始化
1    连接状态,已经调用了open方法,并且已经准备好发送请求
2    发送状态,已经调用了send方法发出请求,尚未得到响应结果
3    正在接收状态,已经接收了HTTP响应的头部信息,正在接收响应内容
4    已加载状态,此时响应内容已完全被接收

xhr.status常见几种状态:
200——交易成功(OK)
404——没有发现文件、查询或URl(没有找到指定的资源)(Not Found)
500——服务器产生内部错误(Internal Server Error)

xhr.statusText        //返回当前HTTP请求状态
xhr.abort();    //取消异步
xhr.getAllResponseHeaders();    //获取响应头信息-可通过控制台->网络XHR->Response Headers查看
xhr.setRequestHeader();        //设置请求头信息

1、get传送的数据量较小,不能大于2KB。post传送的数据量较大,理论上认为不受限制,实际因服务器或后台限制
2、get安全性低,post安全性较高。
3、从性能上讲post比get更消耗性能,原因是来自网络上的人这么说:“据Yahoo mail team 说: post方法在AJAX 请求下会被拆分成两个: sending header first, then sending data;逆向思维: post的请求如果没有data string,那么性能上应该和get是相同的。” 链接地址:http://cuishen.iteye.com/blog/2019925
~~~简而言之:GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。

 

Ajax无注释版下载:

 http://pan.baidu.com/s/1gdh9pyr

 

封装底层Ajax