中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

大結(jié)局（XMLHttpRequest對象）

好了，到了ajax關(guān)鍵時(shí)刻了。

/* ===========================================================
* 函數(shù)名稱：ajaxUpdater(tarObj,sMethod,URL,parameters)
* 參數(shù)說明：tarObj - 異步獲取信息希望顯示的目標(biāo)節(jié)點(diǎn)ID
*           sMethod - 數(shù)據(jù)提交方法，兩個可選值get,post
*           URL - 提交的目標(biāo)URL地址
*           parameters - URL后面接（傳遞）的參數(shù) 
* 函數(shù)功能：將異步傳遞的目標(biāo)URL地址返回的信息，無刷新的寫到目標(biāo)
*           節(jié)點(diǎn)(tarObj)中
* 返 回 值：new Error() - 運(yùn)行錯誤時(shí)返回一個報(bào)錯信息
* 使用方法：var myAjax = ajaxUpdater(msgBox,"get",URL,para);
============================================================ */
function ajaxUpdater(tarObj,sMethod,URL,parameters){
    var oXmlHttp = createXMLHTTPRequest();
          
    oXmlHttp.open(sMethod, URL+parameters, true);
    oXmlHttp.onreadystatechange = function () {
        if (oXmlHttp.readyState == 4) {
             if (oXmlHttp.status == 200) {
                  if($(tarObj)){
                       $(tarObj).innerHTML = oXmlHttp.responseText;
                  }
                  else{
                       return false;   
                  }         
             }
             else {
                  throw new Error("有一個錯誤產(chǎn)生！");
             }
         }   
    }
           
    oXmlHttp.send(null);
}

繞了這么多圈，又回到我們文章開始提到的，現(xiàn)在要開始運(yùn)用XMLHttpRequest對象的相關(guān)知識了。

var oXmlHttp = createXMLHTTPRequest();首先是創(chuàng)建XMLHttpRequest對象，我們使用的是createXMLHTTPRequest()：

/* ===========================================================
* 函數(shù)名稱：createXMLHTTPRequest()
* 參數(shù)說明：無參數(shù)
* 函數(shù)功能：創(chuàng)建XMLHttpRequest對象
* 返 回 值：XMLHTTPRequest對象
* 使用方法：var oXmlHttp = createXMLHTTPRequest();
============================================================ */
function createXMLHTTPRequest(){
     // 非IE瀏覽器（Firefox,Opera）,XMLHttpRequest對象是瀏覽器內(nèi)置的一個對象
     if (useXmlHttp){
         return new XMLHttpRequest();
   }
   else if (useActiveX) { //在IE（IE< 7.0 = use ActiveX）瀏覽器中，XMLHttpRequest對象是以ActiveX控件的形式存在的          
         if (!XMLHTTP_VER) {
              for (var i=0; i < ARR_XMLHTTP_VERS.length; i++){
                  try {
                      new ActiveXObject(ARR_XMLHTTP_VERS[i]);
                      XMLHTTP_VER = ARR_XMLHTTP_VERS[i]; // 獲取本地IE瀏覽器相應(yīng)的XMLHttpRequest對象版本
                      break;
                  } catch (oError) {}
              }
         }
         if (XMLHTTP_VER) {
             return new ActiveXObject(XMLHTTP_VER);
         }
         else {
             throw new Error("無法創(chuàng)建XMLHttpRequest對象！");
         }
    }
    else {
         throw new Error("您的瀏覽器不支持XMLHttpRequest對象！");
    }
}

不同的瀏覽器XMLHttpRequest對象存在的形式不同，還有版本問題，哎，多寫點(diǎn)代碼來兼容吧。

// 方法：open
// 創(chuàng)建一個新的http請求，并指定此請求的方法、URL以及驗(yàn)證信息
// 語法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
// 參數(shù)
// bstrMethod
// http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。

// bstrUrl
// 請求的URL地址，可以為絕對地址也可以為相對地址。

// varAsync[可選]
// 布爾型，指定此請求是否為異步方式，默認(rèn)為true。如果為真，當(dāng)狀態(tài)改變時(shí)會調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。

// bstrUser[可選]
// 如果服務(wù)器需要驗(yàn)證，此處指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗(yàn)證時(shí)，會彈出驗(yàn)證窗口。

// bstrPassword[可選]
// 驗(yàn)證信息中的密碼部分，如果用戶名為空，則此值將被忽略。
    
// 備注：調(diào)用此方法后，可以調(diào)用send方法向服務(wù)器發(fā)送數(shù)據(jù)。 xmlhttp.Open("get", "http://localhost/example.htm", false);
// var book = xmlhttp.responseXML.selectSingleNode("http://book[@id='bk101']");
// alert(book.xml);

oXmlHttp.open(sMethod, URL+parameters, true);

這里就是我們常說的異步提交，一般常用的也就是我這里用的3個參數(shù)提交方法（get和post兩個值），URL地址(URL+parameters,例子里的完整地址就是tarObj + "/" + tarObj + objId + ".htm?d=" + Math.random();)，第三個(true,false)指定此請求是否為異步方式，默認(rèn)為true。如果為真，當(dāng)狀態(tài)改變時(shí)會調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。

oXmlHttp.onreadystatechange = function () {
        // 屬性：readyState
        // 返回XMLHTTP請求的當(dāng)前狀態(tài)
        // 語法：lValue = oXMLHttpRequest.readyState;
        // 備注：變量，此屬性只讀，狀態(tài)用長度為4的整型表示.定義如下：
        // 0 (未初始化) 對象已建立，但是尚未初始化（尚未調(diào)用open方法）
        // 1 (初始化) 對象已建立，尚未調(diào)用send方法
        // 2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知
        // 3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會出現(xiàn)錯誤，
        // 4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過通過responseBody和responseText獲取完整的回應(yīng)數(shù)據(jù)
        if (oXmlHttp.readyState == 4) {
         // 屬性：status
         // 返回當(dāng)前請求的http狀態(tài)碼
         // 語法：lValue = oXMLHttpRequest.status;
         // 返回值：長整形標(biāo)準(zhǔn)http狀態(tài)碼，定義如下：
         // Number:Description 
         // 100:Continue
         // 101:Switching protocols
         // 200:OK
         // 201:Created
         // 202:Accepted
         // 203:Non-Authoritative Information
         // 204:No Content
         // 205:Reset Content
         // 206:Partial Content
         // 300:Multiple Choices
         // 301:Moved Permanently
         // 302:Found
         // 303:See Other
         // 304:Not Modified
         // 305:Use Proxy
         // 307:Temporary Redirect
         // 400:Bad Request
         // 401:Unauthorized
         // 402:Payment Required
         // 403:Forbidden
         // 404:Not Found
         // 405:Method Not Allowed
         // 406:Not Acceptable
         // 407:Proxy Authentication Required
         // 408:Request Timeout
         // 409:Conflict
         // 410:Gone
         // 411:Length Required
         // 412:Precondition Failed
         // 413:Request Entity Too Large
         // 414:Request-URI Too Long
         // 415:Unsupported Media Type
         // 416:Requested Range Not Suitable
         // 417:Expectation Failed
         // 500:Internal Server Error
         // 501:Not Implemented
         // 502:Bad Gateway
         // 503:Service Unavailable
         // 504:Gateway Timeout
         // 505:HTTP Version Not Supported
         // 備注：長整形，此屬性只讀，返回當(dāng)前請求的http狀態(tài)碼,此屬性僅當(dāng)數(shù)據(jù)發(fā)送并接收完畢后才可獲取。
             if (oXmlHttp.status == 200) {
       // 屬性：responseBody
       // 返回某一格式的服務(wù)器響應(yīng)數(shù)據(jù)
       // 語法：strValue = oXMLHttpRequest.responseBody;
       // 備注：變量，此屬性只讀，以unsigned array格式表示直接從服務(wù)器返回的未經(jīng)解碼的二進(jìn)制數(shù)據(jù)。
       alert(xmlhttp.responseBody);
      
       // 屬性：responseStream
       // 以Ado Stream對象的形式返回響應(yīng)信息
       // 語法：strValue = oXMLHttpRequest.responseStream;
       // 備注：變量，此屬性只讀，以Ado Stream對象的形式返回響應(yīng)信息。
       alert(xmlhttp.responseStream);
      
         // 屬性：responseText
       // 將響應(yīng)信息作為字符串返回
       // 語法：strValue = oXMLHttpRequest.responseText;
       // 備注：變量，此屬性只讀，將響應(yīng)信息作為字符串返回。XMLHTTP嘗試將響應(yīng)信息解碼為Unicode字符串，
       // XMLHTTP默認(rèn)將響應(yīng)數(shù)據(jù)的編碼定為UTF-8，如果服務(wù)器返回的數(shù)據(jù)帶BOM(byte-order mark)，XMLHTTP可
       // 以解碼任何UCS-2 (big or little endian)或者UCS-4 數(shù)據(jù)。注意，如果服務(wù)器返回的是xml文檔，此屬
       // 性并不處理xml文檔中的編碼聲明。你需要使用responseXML來處理。        
         alert(xmlhttp.responseText);
        
         // 屬性：responseXML
       // 將響應(yīng)信息格式化為Xml Document對象并返回
       // 語法：var objDispatch = oXMLHttpRequest.responseXML;
       // 備注：變量，此屬性只讀，將響應(yīng)信息格式化為Xml Document對象并返回。如果響應(yīng)數(shù)據(jù)不是有效的XML文檔，
       // 此屬性本身不返回XMLDOMParseError，可以通過處理過的DOMDocument對象獲取錯誤信息。

                  $(tarObj).innerHTML = oXmlHttp.responseText;
             }
        }
}

本來想偷個懶，讓大家看我上邊說的那篇文章，想想也就是Ctrl+C&Ctrl+V,都貼出來吧！呵呵�。�！

不過還沒有完，最后要說的就是innerHTML這個特性，這里我們還要感謝微軟啊，innerHTML就是它的專利，我們就是用它來改變指定DOM內(nèi)的HTML字符串的，而不用刷新頁面。詳細(xì)的信息大家還是google一下吧，我也要休息下�。�！喝口茶先��！^-^！

以上講了這么多，我們最后來看看，我們這個ajax標(biāo)簽導(dǎo)航都用到了那些技術(shù)吧：

1. xhtml
2. CSS
3. Javascript
4. DOM
5. XMLHttpRequest對象
6. innerHTML

還有XML，我們這個例子沒有涉及到。東西雖小，包含的（web前端開發(fā)）知識可是都用到了啊，我把我會的點(diǎn)東西都端出來了（要失業(yè)了），呵呵！

當(dāng)然我很喜歡跟大家多交流，以后有時(shí)間，我們在來談?wù)凜SS的HACKS技巧，Javascript DOM編程等等的，今天就收工了，謝謝捧場先�。�！

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2827986-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2008/5330.asp　

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁 DOM技巧篇 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。