<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # javascript快速入門23--XHR—XMLHttpRequest對象 ## 創建XMLHttpRequest對象 與之前眾多DOM操作一樣,創建XHR對象也具有兼容性問題:IE6及之前的版本使用ActiveXObject,IE7之后及其它瀏覽器使用XMLHttpRequest 不但IE6及其之前的版本將XHR作為一個ActiveXObject運行,而且還存在眾多版本:一開始是Microsoft.XMLHTTP 之后變成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP ``` function XHR() { var xhr; try {xhr = new XMLHttpRequest();} catch(e) { var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i=0,len=IEXHRVers.length;i< len;i++) { try {xhr = new ActiveXObject(IEXHRVers[i]);} catch(e) {continue;} } } return xhr; } ``` ## 使用XHR ``` var xhr = XHR(); //open方法 創建一個新的http請求,并指定此請求的方法、URL以及驗證信息(用戶名/密碼) xhr.open("get","test.txt",true); /*第一個參數是請求方式,一般用get與post方法,與form標簽的method類似 第二個參數是請求的URL 第三個參數是請求是同步進行還是異步進行,true表示異步 調用了open方法僅僅是傳遞了參數而已*/ xhr.send(null);//調用了send方法后才會發出請求 //并且get方式發送請求時send參數是null ``` 在服務器環境中執行上面的腳本,并且給一個php或asp腳本發送請求,會發現服務器端腳本其實會被執行 ``` //PHP腳本 $fp =fopen("a.txt","wb"); fwrite($fp,"PHP文件在后臺執行了"); fclose($fp); echo "返回內容!"; ``` 上面PHP腳本的返回內容不會直接在頁面上顯示出來,必需要用JS通過XHR對象接收 ``` var xhr = XHR(); xhr.open("get","test.php",true); xhr.onreadystatechange = callback;//在readystatechange事件上綁定一個函數 //當接收到數據時,會調用readystatechange事件上的事件處理函數 xhr.send(null); functon callback() { //在這里面沒有使用this.readyState這是因為IE下面ActiveXObject的特殊性 if (xhr.readyState == 4) {//readyState表示文檔加載進度,4表示完畢 alert(xhr.reponseText);//responseText屬性用來取得返回的文本 } } ``` ## XHR對象參考 #### readyState屬性 返回當前請求的狀態 * 0 (未初始化) 對象已建立,但是尚未初始化(尚未調用open方法) * 1 (初始化) 對象已建立,尚未調用send方法 * 2 (發送數據) send方法已調用,但是當前的狀態及http頭未知 * 3 (數據傳送中) 已接收部分數據,因為響應及http頭不全,這時通過responseBody和responseText獲取部分數據會出現錯誤 * 4 (完成) 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據 ``` var xhr =XHR(); alert(xhr.readyState);//0 xhr.open("get","test.htm",true); alert(xhr.readyState);//1 xhr.send(null); alert(xhr.readyState);//IE下會是4,而FF下會是2 //可以通過readystatechange事件監聽 xhr = XHR(); xhr.onreadystatechange = function () { alert(xhr.readyState);//FF下會依次是1,2,3,4但最后還會再來個1 //IE下則是1,1,3,4 }; xhr.open("get","test.txt",true); xhr.send(null); ``` 從上面可以看到,對于readyState這個屬性,各個瀏覽器看法也不一樣,但其實我們只需要知道當狀態為4的時候可以獲取response就行了! #### status 返回當前請求的http狀態碼 status屬性返回當前請求的http狀態碼,此屬性僅當數據發送并接收完畢后才可獲取。完整的HTTP狀態碼如下: * 100 Continue 初始的請求已經接受,客戶應當繼續發送請求的其余部分 * 101 Switching Protocols 服務器將遵從客戶的請求轉換到另外一種協議 * 200 OK 一切正常,對GET和POST請求的應答文檔跟在后面。 * 201 Created 服務器已經創建了文檔,Location頭給出了它的URL。 * 202 Accepted 已經接受請求,但處理尚未完成。 * 203 Non-Authoritative Information 文檔已經正常地返回,但一些應答頭可能不正確,因為使用的是文檔的拷貝 * 204 No Content 沒有新文檔,瀏覽器應該繼續顯示原來的文檔。如果用戶定期地刷新頁面,而Servlet可以確定用戶文檔足夠新,這個狀態代碼是很有用的 * 205 Reset Content 沒有新的內容,但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容 * 206 Partial Content 客戶發送了一個帶有Range頭的GET請求,服務器完成了它 * 300 Multiple Choices 客戶請求的文檔可以在多個位置找到,這些位置已經在返回的文檔內列出。如果服務器要提出優先選擇,則應該在Location應答頭指明。 * 301 Moved Permanently 客戶請求的文檔在其他地方,新的URL在Location頭中給出,瀏覽器應該自動地訪問新的URL。 * 302 Found 類似于301,但新的URL應該被視為臨時性的替代,而不是永久性的。 * 303 See Other 類似于301/302,不同之處在于,如果原來的請求是POST,Location頭指定的重定向目標文檔應該通過GET提取 * 304 Not Modified 客戶端有緩沖的文檔并發出了一個條件性的請求(一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔)。服務器告訴客戶,原來緩沖的文檔還可以繼續使用。 * 305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取 * 307 Temporary Redirect 和302(Found)相同。許多瀏覽器會錯誤地響應302應答進行重定向,即使原來的請求是POST,即使它實際上只能在POST請求的應答是303時才能重定向。由于這個原因,HTTP 1.1新增了307,以便更加清除地區分幾個狀態代碼:當出現303應答時,瀏覽器可以跟隨重定向的GET和POST請求;如果是307應答,則瀏覽器只能跟隨對GET請求的重定向。 * 400 Bad Request 請求出現語法錯誤。 * 401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭,瀏覽器據此顯示用戶名字/密碼對話框,然后在填寫合適的Authorization頭后再次發出請求。 * 403 Forbidden 資源不可用。 * 404 Not Found 無法找到指定位置的資源 * 405 Method Not Allowed 請求方法(GET、POST、HEAD、Delete、PUT、TRACE等)對指定的資源不適用。 * 406 Not Acceptable 指定的資源已經找到,但它的MIME類型和客戶在Accpet頭中所指定的不兼容 * 407 Proxy Authentication Required 類似于401,表示客戶必須先經過代理服務器的授權。 * 408 Request Timeout 在服務器許可的等待時間內,客戶一直沒有發出任何請求。客戶可以在以后重復同一請求。 * 409 Conflict 通常和PUT請求有關。由于請求和資源的當前狀態相沖突,因此請求不能成功。 * 410 Gone 所請求的文檔已經不再可用,而且服務器不知道應該重定向到哪一個地址。它和404的不同在于,返回407表示文檔永久地離開了指定的位置,而404表示由于未知的原因文檔不可用。 * 411 Length Required 服務器不能處理請求,除非客戶發送一個Content-Length頭 * 412 Precondition Failed 請求頭中指定的一些前提條件失敗 * 413 Request Entity Too Large 目標文檔的大小超過服務器當前愿意處理的大小。如果服務器認為自己能夠稍后再處理該請求,則應該提供一個Retry-After頭 * 414 Request URI Too Long URI太長 * 416 Requested Range Not Satisfiable 服務器不能滿足客戶在請求中指定的Range頭 * 500 Internal Server Error 服務器遇到了意料不到的情況,不能完成客戶的請求 * 501 Not Implemented 服務器不支持實現請求所需要的功能。例如,客戶發出了一個服務器不支持的PUT請求 * 502 Bad Gateway 服務器作為網關或者代理時,為了完成請求訪問下一個服務器,但該服務器返回了非法的應答 * 503 Service Unavailable 服務器由于維護或者負載過重未能應答。例如,Servlet可能在數據庫連接池已滿的情況下返回503。服務器返回503時可以提供一個Retry-After頭 * 504 Gateway Timeout 由作為代理或網關的服務器使用,表示不能及時地從遠程服務器獲得應答 * 505 HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本 事實上,我們只需要知道狀態為200的時候(OK)才讀取response就行了! #### responseText與responseXML responseText 將響應信息作為字符串返回 . XMLHTTP嘗試將響應信息解碼為Unicode字符串,XMLHTTP默認將響應數據的編碼定為UTF-8,如果服務器返回的數據帶BOM(byte-order mark),XMLHTTP可以解碼任何UCS-2 (big or little endian)或者UCS-4 數據。注意,如果服務器返回的是xml文檔,此屬性并不處理xml文檔中的編碼聲明。你需要使用responseXML來處理。 responseXML 將響應信息格式化為Xml Document對象并返回 . 如果響應數據不是有效的XML文檔,此屬性本身不返回XMLDOMParseError,可以通過處理過的DOMDocument對象獲取錯誤信息。 #### 其它一些XHR對象的方法 abort 取消當前請求 getAllResponseHeaders 獲取響應的所有http頭 每個http頭名稱和值用冒號分割,并以\r\n結束。當send方法完成后才可調用該方法。 getResponseHeader 從響應信息中獲取指定的http頭 當send方法成功后才可調用該方法。如果服務器返回的文檔類型為"text/xml", 則這句話xmlhttp.getResponseHeader("Content-Type");將返回字符串"text/xml"。可以使用getAllResponseHeaders方法獲取完整的http頭信息。 setRequestHeader 單獨指定請求的某個http頭 如果已經存在已此名稱命名的http頭,則覆蓋之。此方法必須在open方法后調用。 ## 請求方式 GET 請求 ``` //JS var xhr = XHR(); xhr.open("get","test.php?qs=true&userName=abc&pwd=123456",true); xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status ==200) { alert(xhr.responseText); } }; xhr.send(null); //PHP print_r($_GET); ``` POST 請求 ``` //JS var xhr = XHR(); xhr.open("post","test.php",true); xhr.onreadystatechange = function () { if (xhr.readyState==4 && xhr.status ==200) { alert(xhr.responseText); } }; //比GET請求多了一步 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //另外,數據是通過send方法發送的 xhr.send("qs=true&userName=abc&pwd=123456"); //PHP header("Cache-Control: no-cache, must-revalidate");//可以讓瀏覽器不緩存結果 print_r($_POST); ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看