Ajax中对XMLHttpRequset对象的封装

标签：ajax   xmlhttprequest   javascript   

    Ajax是异步的Javascript和XML，可以使网页实现异步更新。其中XMLHttpRequest对象是Ajax的web应用程序中一个关键的功能。

    简单的使用是先建立XMLHttpRequset对象，注册回调函数，然后用open方法设置服务器端交互的基本信息，设置发送的数据开始和服务器端交互最后在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。

    但是对它的扩展中会存在很多问题，比如浏览器缓存问题，中文乱码问题和跨域访问的问题。

    简单的事情重复做，重复的事创造性的做。所以我们想到了把它封装起来，用的时候直接引入。

/*封装的xmlhttprequeset*/
var MyXMLHttpRequest = function(){
    var xmlhttprequest;
    if(window.XMLHttpRequest){
        xmlhttprequest = new XMLHttpRequest();
        if(xmlhttprequest.overrideMineType){
            xmlhttprequest.overrideMineType("text/xml");
        }
    }else if (window.ActiveXObject) {
        var activeName = ["XSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (i = 0; i < activeName.length; i++) {
            try {
                xmlhttprequest = new ActiveXObject(activeName[i]);
                break;
            } catch (e) { 
                
            }
        }
    }
    if (xmlhttprequest === undefined || xmlhttprequest === null) {
        alert("xmlhttprequest对象创建失败！");
    }else{
        this.xmlhttp = xmlhttprequest;
    }
};
// 用户发送请求的方法
MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){
    if (this.xmlhttp !== undefined || this.xmlhttp !== null) {
        method = method.toUpperCase();
        if (method !== "GET" && method !== "POST") {
            alert("HTTP请求方法必须是GET或POST");
            return ;
        }
        if (url === undefined || url === null) {
            alert("http请求地址必须设置");
            return;
        }
    
        var tempxmlhttp = this.xmlhttp;
        tempxmlhttp.onreadystatechange = function(){
            if (tempxmlhttp.readyState === 4) {
                if (tempxmlhttp.status === 200) {
                    var responseText = tempxmlhttp.responseText;
                    var responseXML = tempxmlhttp.responseXML;
                    if (callback === undefined || callback === null) {
                        alert("没有设置处理数据正确返回的方法");
                        alert("返回的数据：" + responseText);
                    }
                    else{
                        callback(responseText,responseXML);
                    }
                }else {
                    if (failback === undefined || failback === null) {
                        alert("没有设置处理数据返回失败的处理方法");
                        alert("Http响应码信息：" + tempxmlhttp.status + "，响应码文本信息：" + tempxmlhttp.statusText);
                        return ;
                    }else{
                        failback(tempxmlhttp.status,tempxmlhttp.statusText);
                    }
                }
            }
        };
        // 解决缓存的转换
        if (url.indexOf("?") >= 0) {
            url = url + "&t=" + (new Date()).valueOf();
        }else{
            url = url + "?t=" + (new Date()).valueOf();
        }
        // 解决跨域问题
        if (url.indexOf("http://") >= 0) {
            url.replace("?","&");
            url = url + "Proxy?url=";
        }
        this.xmlhttp.open(method,url,true);
    
        // 如果是POST方式，需要设置请求头
        if (method === "POST") {
            this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }
        this.xmlhttp.send(data);
    }else{
        alert("XMLHttpRequest对象创建失败，无法发送数据.");
    }
};
MyXMLHttpRequest.prototype.abort = function(){
    this.xmlhttp.abort();
};

    近段时间的感悟就是深深的体会了不要老想跟着学什么特效，绚丽的特效终究还是js。无论是Jquery还是ajax主要还是写javascript的代码，好的界面是有好的想法然后运用这些语言去实现。

Ajax中对XMLHttpRequset对象的封装

标签：ajax   xmlhttprequest   javascript   

原文地址：http://blog.csdn.net/mqplw/article/details/41623859