一、XMLHttpRequest(XML),Ajax介紹
1.2005年Jesse James Garrett發(fā)表了一篇文章，標題為：“Ajax：A new Approach to Web Applications”。他在這篇文章里介紹了一種技術(shù)，用他的話說，就叫：Ajax，是Asynchronous+JavaScript + XML的簡寫。這種技術(shù)能夠想服務器請求額外的數(shù)據(jù)而無須卸載頁面(即刷新)，會帶來更好的用戶體驗。一時間，席卷全球。
2.Ajax技術(shù)核心是XMLHttpRequest對象(簡稱XHR)，這是由微軟首先引入的一個特性，其他瀏覽器提供商后來都提供了相同的實現(xiàn)。在XHR出現(xiàn)之前，Ajax式的通信必須借助一些hack手段來實現(xiàn)，大多數(shù)是使用隱藏的框架或內(nèi)嵌框架。
XHR的出現(xiàn)，提供了向服務器發(fā)送請求和解析服務器響應提供了流暢的接口。能夠以異步方式從服務器獲取更多的信息，這就意味著，用戶只要觸發(fā)某一事件，在不刷新網(wǎng)頁的情況下，更新服務器最新的數(shù)據(jù)。
雖然Ajax中的x代表的是XML，但Ajax通信和數(shù)據(jù)格式無關，也就是說這種技術(shù)不一定使用
二、xhr,asynchronous同步or異步
1.var xhr = new XMLHttpRequest();
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR對象，在這些瀏覽器中創(chuàng)建XHR對象可以直接實例化XMLHttpRequest即可。
2.如果是IE6及以下，那么我們必須還需要使用ActiveX對象通過MSXML庫來實現(xiàn)。在低版本IE瀏覽器可能會遇到三種不同版本的XHR對象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我們可以寫一個函數(shù)(了解)
在使用XHR對象時，先必須調(diào)用open()方法，它接受三個參數(shù)：要發(fā)送的請求類型(get、post)、請求的URL和表示是否異步。
xhr.open(method,url,async);
open()方法并不會真正發(fā)送請求，而只是啟動一個請求以備發(fā)送。通過send()方法進行發(fā)送請求，send()方法接受一個參數(shù)，作為請求主體發(fā)送的數(shù)據(jù)。如果不需要則，必須填null。執(zhí)行send()方法之后，請求就會發(fā)送到服務器上。
xhr.send(null);
當請求發(fā)送到服務器端，收到響應后，響應的數(shù)據(jù)會自動填充XHR對象的屬性。那么一共有四個屬性：
屬性名
說明
responseText
作為響應主體被返回的文本
responseXML
如果響應主體內(nèi)容類型是"text/xml"或"application/xml"，則返回包含響應數(shù)據(jù)的XML DOM文檔
status
響應的HTTP狀態(tài)
statusText
HTTP狀態(tài)的說明
接受響應之后，第一步檢查status屬性，以確定響應已經(jīng)成功返回。一般而已HTTP狀態(tài)代碼為200作為成功的標志。當然還有其他的一些狀態(tài)碼
HTTP狀態(tài)碼
狀態(tài)字符串
說明
200
OK
服務器成功返回了頁面
400
Bad Request
語法錯誤導致服務器不識別
401
Unauthorized
請求需要用戶認證
404
Not found
指定的URL在服務器上找不到
500
Internal Server Error
服務器遇到意外錯誤，無法完成請求
503
ServiceUnavailable
由于服務器過載或維護導致無法完成請求
我們判斷HTTP狀態(tài)值即可，不建議使用HTTP狀態(tài)說明，因為在跨瀏覽器的時候，可能會不太一致。
同步固然重要但是異步才是我們真正需求的使用異步請求會出發(fā)onreadystatechange事件,然后檢測readyState屬性值即可
值
狀態(tài)
說明
0
未初始化
尚未調(diào)用open()方法
1
啟動
已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法
2
發(fā)送
已經(jīng)調(diào)用send()方法，但尚未接受響應
3
接受
已經(jīng)接受到部分響應數(shù)據(jù)
4
完成
已經(jīng)接受到全部響應數(shù)據(jù)，而且可以使用
三、GET和POST請求
1.提供服務器請求的過程中，有兩種方式，分別是：GET和POST。在Ajax使用的過程中，GET的使用頻率要比POST高。
2.兩種頭信息
在這里簡單的解釋一下兩種頭信息
a.通過xhr.getResponseHeader(“Content-Type”);可以獲取單個響應頭信息
b.getAllResponseHeaders();獲取整個響應頭信息
alert(xhr.getAllResponseHeaders());
c.使用setRequestHeader()設置單個請求頭信息
xhr.setRequestHeader('MyHeader', 'Lee'); //放在open方法之后，send方法之前
需要注意的地方是POST請求時需要設置Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3.GET
GET請求是最常見的請求類型，最常用于向服務器查詢某些信息。必要時，可以將查詢字符串參數(shù)追加到URL的末尾，以便提交給服務器。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
注意:特殊字符(eg:&等)，傳參產(chǎn)生的問題可以使用encodeURIComponent()進行編碼處理，中文字符的返回及傳參，可以將頁面保存和設置為utf-8格式即可。或者使用提交url通用方法。
4.POST
POST請求可以包含非常多的數(shù)據(jù)，我們在使用表單提交的時候，很多就是使用的POST傳輸方式。
xhr.open('post', 'demo.php', true);
而發(fā)送POST請求的數(shù)據(jù)，不會跟在URL的尾巴上，而是通過send()方法向服務器提交數(shù)據(jù)。
xhr.send('name=Lee&age=100');
一般來說，向服務器發(fā)送POST請求由于解析機制的原因，需要進行特別的處理。因為POST請求和Web表單提交是不同的，需要使用XHR來模仿表單提交。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
5.json數(shù)據(jù)
vardata= xhr.responseText();
JSON.parse(data); //轉(zhuǎn)換成對象
6.鍵值對的拼接成data發(fā)送
最后返回“username=xq&age=18”類型即可
四、封裝Ajax
1.案例封裝ajax
五、jsonp
1.Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。
為什么我們從不同的域（網(wǎng)站）訪問數(shù)據(jù)需要一個特殊的技術(shù)(JSONP )呢？這是因為同源策略。
同源策略，它是由Netscape提出的一個著名的安全策略，現(xiàn)在所有支持JavaScript 的瀏覽器都會使用這個策略。
