什么是同步? 客戶端要發起請求，服務器端要去處理，而且去響應，這時候客戶端完全是等待，等待服務器端的處理和響應，當服務器端處理響應后客戶端會重新載入頁面。這時候如果你有錯誤，那么只能再次發起請求，再次等待。同步的事件會讓人瘋狂。
同步和異步
什么是同步
客戶端要發起請求，服務器端要去處理，而且去響應，這時候客戶端完全是等待，等待服務器端的處理和響應，當服務器端處理響應后客戶端會重新載入頁面。這時候如果你有錯誤，那么只能再次發起請求，再次等待。同步的事件會讓人瘋狂。
什么是異步
當你填寫表單數據時，頁面當時就把數據發送到服務器，也就是頁面發送了個請求，服務器去做處理和響應，得到你的數據不符合要求，他會把響應結果，發給頁面，但是在這個過程中，你還是可以依舊去填寫，表單其他內容，這時候服務器告訴你有填寫錯誤的地方，在頁面上的表現，只是把你填寫錯誤的旁邊標上一行字，并沒有刷新你的頁面，這樣在填寫表單時，所有的錯誤信息都會顯示在頁面，你可以實時的更正，這個過程中你不會有整個頁面的刷新，也不會有整個頁面的提交和等待，當你最后點擊提交一切都可以搞定了。
怎么實現Ajax技術呢？
- 運用HTML和CSS來實現頁面，表達信息；
- 運用XMLHttpRequest對象和web服務器進行數據的異步交換；
- 運用JavaScript操作DOM，實現動態局部刷新；
Ajax-XMLHttpRequest對象創建
目前瀏覽器都支持標準的XHR對象，也支持標準的構造函數。
但是在IE5和IE6瀏覽器中，是不支持var request=new XMLHttpRequest();因為那時候XHR還未定義。
如何兼容IE5和IE6甚至更早的版本？
var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else { // code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
只需要判斷下，如果有XHR定義，我們就使用標準的構造函數，我們直接 new ActiveXObject("Microsoft.XMLHTTP");就可以了。
Ajax-HTTP請求
什么是HTTP
HTTP是計算機，通過網絡進行通信的規則。
它主要使我們客戶，也就是常說的瀏覽器能夠從服務器也就是常說的web服務器，去請求信息和服務。
HTTP是一種無狀態的協議
無狀態指的是不建立持久的連接，也就是說服務端不保留連接的一些相關信息。
一個客戶端，想服務器發送請求，然后web服務器返回響應，接著連接就被關閉了，這個處理過程是沒有記憶的。如果后續的處理需要之前傳遞的一些信息，那么就要重新的傳遞。這就是經常說HTTP是一種無狀態的協議。
概念介紹--HTTP請求
一個完整的HTTP請求過程，通常有下面7個步驟。
建立TCP連接；
Web瀏覽器向Web服務器發送請求命令；
Web瀏覽器發送請求頭信息；
Web服務器做出應答；
Web服務器發送應答頭信息；
Web服務器向瀏覽器發送數據；
Web服務器關閉TCP連接；
一個HTTP請求一般由四部分組成
HTTP請求的方法或動作，比如是GIT還是POST請求；
正在請求的URL，總得知道請求的地址是什么吧；
請求頭，包含一些客戶端環境信息，身份驗證信息等；
請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢字符串信息，表單信息等等。
GIT請求和POST請求
GIT：一般用于信息獲取
使用URL傳遞參數
對所發送信息的數量也有限制，一般在2000個字符POST：一般用于修改服務器上的資源。
對所發送信息的數量無限制
HTTP響應
一個HTTP響應一般由三部分組成
一個數字和文字組成的狀態碼，用來顯示請求是否成功還是失敗；
響應頭，響應頭也和請求頭一樣包含許多有用的信息，例如服務類型，日期時間，內容類型和長度等；
響應體，也就是響應正文；
HTTP響應狀態碼介紹
HTTP響應狀態碼由3位數字構成，其中首位數字定義了狀態碼的類型：
1XX:1開頭，信息類，表示收到web瀏覽器請求，正在進一步的處理中；
2XX:2開頭，成功，表示用戶請求被正確接收，理解和處理例如：200 OK；
3XX:3開頭，重定向，表示請求沒有成功，客戶必須采取進一步的動作；
4XX:4開頭，客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 NOT ;
Found，意味著請求中所引用的文檔不存在；
5XX:5開頭，服務器錯誤，表示服務器不能完成對請求的處理：如 500;
Ajax-XMLHttpRequest發送請求
XMLHttpRequest對象的方法
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 規定請求的類型、URL 以及是否異步處理請求。 |
| method：請求的類型；GET 或 POST | |
| url：文件在服務器上的位置 | |
| async：true（異步）或 false（同步） | |
| send(string) | 將請求發送到服務器。 |
| string：僅用于 POST 請求 |
GET 請求：
request.open("GET","gte.php",true);
request.send();
POST 請求
request.open("POST","post.php",true);
request.send();
如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據：
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=黃&sex=男");
| 方法 | 描述 |
|---|---|
| setRequestHeader(header,value) | 向請求添加 HTTP 頭。 |
| header: 規定頭的名稱 | |
| value: 規定頭的值 |
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
這個方法其實要設置HTTP的頭信息，告訴web服務器我們要發送一個表單，
需要注意的是request.setRequestHeader方法要寫在request.open和request.send中間，否則將會拋出異常。
Ajax-XMLHttpRequest取得響應
獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應數據。 |
| responseXML | 獲得 XML 形式的響應數據。 |
| status和statueText | 以數字和文本形式返回HTTP狀態碼。 |
| gitAllResponseHeader() | 獲取所有的響應報頭。 |
| gieResponseHeader( parameter ) | 查詢響應的某個字段的值。 parameter 要查詢的字段 |
onreadystatechange 事件
當請求被發送到服務器時，我們需要執行一些基于響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
| 屬性 | 描述 |
|---|---|
| onreadystatechange | 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。 |
| readyState | 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 |
| 0: 請求未初始化 | |
| 1: 服務器連接已建立 | |
| 2: 請求已接收 | |
| 3: 請求處理中 | |
| 4: 請求已完成，且響應已就緒 | |
| status | 200: "OK" |
| 404: 未找到頁面 |
function but() {
var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else { // code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) { //響應完成且請求成功
//做一些事情 request.responseText;
}
}
request.open("GET", "gte.php", true);
request.send();
}
總結下Ajax使用的步驟
第一步
new一個XHM對象new XMLHttpRequest();
兼容寫法
var request;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else { // code for IE6, IE5
request = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步
調用open方法
request.open("GET", "gte.php", true);
第三步
將請求發送到服務器
request.send();
第四步
對過程進行監聽來知道服務器是否正確的做出了響應，接著就可以做一些事情
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) { //響應完成且請求成功
//做一些事情 request.responseText;
}
}
未完
