封装底层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=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=(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