原生ajax书写

本文转载至http://sjpsega.iteye.com/blog/1729350

1.创建XMLHttpRequeset

function createXMLHTTPRequest() {     
                 //1.创建XMLHttpRequest对象     
                 //这是XMLHttpReuquest对象无部使用中最复杂的一步     
                 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码     
                 var xmlHttpRequest;  
                 if (window.XMLHttpRequest) {     
                     //针对FireFox，Mozillar，Opera，Safari，IE7，IE8     
                    xmlHttpRequest = new XMLHttpRequest();     
                     //针对某些特定版本的mozillar浏览器的BUG进行修正     
                     if (xmlHttpRequest.overrideMimeType) {     
                         xmlHttpRequest.overrideMimeType("text/xml");     
                     }     
                 } else if (window.ActiveXObject) {     
                     //针对IE6，IE5.5，IE5     
                     //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中     
                     //排在前面的版本较新     
                     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];     
                     for ( var i = 0; i < activexName.length; i++) {     
                         try {     
                             //取出一个控件名进行创建，如果创建成功就终止循环     
                             //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建     
                            xmlHttpRequest = new ActiveXObject(activexName[i]);   
                            if(xmlHttpRequest){  
                                break;  
                            }  
                         } catch (e) {     
                         }     
                     }     
                 }     
                 return xmlHttpRequest;  
             }     
 

2.get请求

function get(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("GET", "http://test.com/?keywords=手机", true);  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
        req.send(null);  
    }  
}  

3.post请求

   function post(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("POST", "http://test.com/", true);  
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");     
        req.send("keywords=手机");  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
    }  
}  

post请求需要设置请求头

4.readyStatus与status

readystatus有五种状态

0 （未初始化），（XMLHTTPRequset）对象已经创建，单还没有调用open()方法。

1（载入）：已经调用open()方法，但尚未发送请求。

2（载入完成）：请求已经发送完成。

3（交互）：可以接收到部分响应数据。

4（完成）：已经收到全部数据，并且连接已经关闭。

如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：

100—— 客户必须继续发出请求。

101——客户要求服务器根据请求转换HTTP协议版本

200——成功

201——提示知道新文件的URL

300——请求的资源可在多处得到

301——删除请求数据

404——没有发现文件、查询或URL

500——服务器产生内部错误