AJAX用戶端說明,XMLHttpRequest對象_AJAX相關

來源:互聯網
上載者:User
在CommunityServer中運用了自己的AJAX機制,沒有藉助其他的輔助控制項。其中客戶的XMLHttpRequest對象的封裝,就足以讓人大飽眼福,在一般的瀏覽器其都能夠運行AJAX。下面我們來學習學習這個咚咚,希望能給更多的人帶來協助。

 首先當然是要瞭解一下瀏覽器中的XMLHttp對象了:

 XMLHTTP方法: 
         備忘:客戶機可以使用XMLHTTP對象發送任意的HTTP請求,接受HTTP應答,還可以對應答的XML文檔進行解析。 

         Open方法:初始化一個Msxml2.XMLHTTP請求,指定HTTP請求方式、URL以及評鑑資訊。

        文法:
         Open( bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword ) 

        參數介紹:

        bstrMethod: 資料傳送方式,即GET或POST。 
         bstrUrl: 服務網頁的URL。 
         varAsync: 是否同步執行。預設為True,即同步執行,但只能在DOM中實施同步執行。用中一般將其置為False,即非同步執行。 
         bstrUser: 使用者名稱,可省略。 
         bstrPassword:使用者口令,可省略。 

        Send方法:發送HTTP請求到伺服器,返回應答。 

        文法: 
        oXMLHttpRequest.send(varBody) 

       說明:此方法是否同步取決於Open方法的varAsync參數。如果設為True則為同步,調用立刻返回,如果設為False調用直到整個應答被接收了才返回。 

        setRequestHeader( bstrHeader, bstrvalue )

        bstrHeader:HTTP 頭(header) 
        bstrvalue: HTTP 頭(header)的值 

       如果Open方法定義為POST,可以定義表單方式上傳: 
       xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded") 

XMLHTTP屬性: 

 onreadystatechange:在同步執行方式下獲得返回結果的事件控制代碼。只能在DOM中調用。 
 responseBody: 結果返回為不帶正負號的整數數組。 
 responseStream: 結果返回為IStream流。 
 responseText : 結果返回為字串。 
 responseXML: 結果返回為XML格式資料。

 運用這個原理也可以做網路小偷程式,網路爬蟲應該就是應用這個東西來完成的吧,不過我沒有做過,可能在不久的將來會製作個來玩玩,這裡我們最主要的是看看CS中是如何封裝他的:

   1//Ajax Start
 2/**////<summary>
 3///建立回調對象,如果存在window.XMLHttpRequest()對象,則返回此對象,如果是IE則搜尋Msxml2.XMLHTTP各個版本及Microsoft.XMLHTTP並建立對象返回。
 4///</summary>
 5function Ajax_GetXMLHttpRequest() {
 6    if (window.XMLHttpRequest) {
 7        return new XMLHttpRequest();
 8    } else {
 9        if (window.Ajax_XMLHttpRequestProgID) {
            return new ActiveXObject(window.Ajax_XMLHttpRequestProgID);
        } else {
            var progIDs = ["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
            for (var i = 0; i < progIDs.length; ++i) {
                var progID = progIDs[i];
                try {
                    var x = new ActiveXObject(progID);
                    window.Ajax_XMLHttpRequestProgID = progID;
                    return x;
                } catch (e) {
                }
            }
        }
    }
    return null;
}
/**////<summary>
///Ajax回調。
///</summary>
///<param name="type">調用服務端函數所在的類包括命名空間(如:NExplus.Controls.SiteHeader)。</param>
///<param name="id">用戶端所對應的標記的ID(如:<div id="ID"></div>)。</param>
///<param name="method">服務端(方法)函數名稱(被AjaxMethod標記)。</param>
///<param name="args">傳到伺服器的字串。</param>
///<param name="clientCallBack">同步或非同步回調。</param>
///<param name="debugRequestText">調試/請求字串。</param>
///<param name="debugResponseText">調試/輸出字串。</param>
///<param name="debugErrors">調試的錯誤資訊。</param>
///<param name="includeControlValuesWithCallBack">是否和控制項及其值一起回調。</param>
///<param name="url">Url地址。</param>
function Ajax_CallBack(type, id, method, args, clientCallBack, debugRequestText, debugResponseText, debugErrors, includeControlValuesWithCallBack, url) {

    if (!url)
    {
        url = window.location.href;
        url = url.replace(/\#.*$/, '');//去除URL中標籤部分,即"#"之後的字串。
        //加入參數Ajax_CallBack並設為true,說明是AJAX回調。
        if (url.indexOf('?') > -1)
            url += "&Ajax_CallBack=true";
        else
        {
            if (url.substr(url.length - 1, 1) == "/")
                url += "default.aspx";

            url += "?Ajax_CallBack=true";
        }
    }

    var x = Ajax_GetXMLHttpRequest();//取得XMLHttpRequest對象。
    var result = null;
    if (!x) {
        result = { "value":null, "error": "NOXMLHTTP"};
        if (debugErrors) {
            alert("error: " + result.error);
        }
        if (clientCallBack) {
            clientCallBack(result);
        }
        return result;
    }

    x.open("POST", url, clientCallBack ? true : false);//以Post方式開啟對象,這樣在服務端就可以用Request.Form擷取參數。
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    if (clientCallBack) {
        //如果同步,判斷狀態,輸出錯誤訊息。
        x.onreadystatechange = function() {
            var result = null;

            if (x.readyState != 4) {
                return;
            }

            if (debugResponseText) {
                alert(x.responseText);
            }

            try
            {
                var result = eval("(" + x.responseText + ")");
                if (debugErrors && result.error) {
                    alert("error: " + result.error);
                }
            }
            catch (err)
            {
                if (window.confirm('The following error occured while processing an AJAX request: ' + err.message + '\n\nWould you like to see the response?'))
                {
                    var w = window.open();
                    w.document.open('text/plain');
                    w.document.write(x.responseText);
                   w.document.close();
               }

               result = new Object();
               result.error = 'An AJAX error occured.  The response is invalid.';
           }

           clientCallBack(result);            
       }
   }
   var encodedData = "Ajax_CallBackType=" + type;
   if (id) {
       encodedData += "&Ajax_CallBackID=" + id.split("$").join(":");
   }
   encodedData += "&Ajax_CallBackMethod=" + method;
   if (args) {
       for (var i in args) {
           encodedData += "&Ajax_CallBackArgument" + i + "=" + encodeURIComponent(args[i]);
       }
   }
   //如果加入控制項,則加入控制項資料。
   if (includeControlValuesWithCallBack && document.forms.length > 0) {
       var form = document.forms[0];
       for (var i = 0; i < form.length; ++i) {
           var element = form.elements[i];
           if (element.name) {
               var elementValue = null;
               if (element.nodeName == "INPUT") {
                   var inputType = element.getAttribute("TYPE").toUpperCase();
                   if (inputType == "TEXT" || inputType == "PASSWORD" || inputType == "HIDDEN") {
                       elementValue = element.value;
                   } else if (inputType == "CHECKBOX" || inputType == "RADIO") {
                       if (element.checked) {
                           elementValue = element.value;
                       }
                   }
               } else if (element.nodeName == "SELECT") {
                   elementValue = element.value;
               } else if (element.nodeName == "TEXTAREA") {
                   elementValue = element.value;
               }
               if (elementValue) {
                   encodedData += "&" + element.name + "=" + encodeURIComponent(elementValue);
               }
           }
       }
   }
   //如果是調試,則彈出發送的資料。
   if (debugRequestText) {
       alert(encodedData);
   }
   x.send(encodedData);//向伺服器發送資料。
   if (!clientCallBack) {
       if (debugResponseText) {
           alert(x.responseText);
       }
       result = eval("(" + x.responseText + ")");
       if (debugErrors && result.error) {
           alert("error: " + result.error);
       }
   }
   delete x;
   return result;
}

//Ajax End
 其他的不用多說明了,看注釋應該就差不多了,如果有不對的地方請批評指教,謝謝!
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.