# 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);
```
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具