ajax(Asynchronous Jacascript and XML)
ajax可以在不重新加載整個網頁的情況下，對網頁的某個部分數據進行更新
ajax不需要任何瀏覽器插件,只需要用戶允許Javascript在瀏覽器上執行,因為ajax需要借助javascript來實現瀏覽器和服務器之間的異步交互
工作原理:
在用戶端和服務器端之間添加一個中間層(ajax引擎)，改變同步交互的過程，並不是所有的用戶請求
都提交給服務器端,可以把部分的數據提交給ajax引擎來做,當需要從服務器端讀取新的數據時,可以
由ajax引擎項服務器提交請求，從而使用戶操作和服務器響應異步化
ajax的組成部分:
Javascript,DOM,CSS,XMLHttpRequest(ajax的核心)
XMLHttpRequest對象負責將客戶端信息以異步通信的方式發送給服務器端，並接收服務器端返回的響應
信息和數據:
在ajax中,通過XMLHttpRequset對象向服務器發送異步請求，從服務器端獲取數據，使用js操作DOM元素
來刷新頁面和重組數據,依靠css來布局
優點:
減輕服務器負擔,提高web性能,不需要插件支持,調用外部數據方便,達到頁面和數據的分離
缺點:
不能很好的支持移動設備,不能很好的支持搜索引擎
Ajax請求與獲取數據 ( POST / GET ) 五個步驟
- 創建XMLHttpRequest()對象
- 創建回調函數
- 請求數據
- 設置請求的HTTP頭部信息(這是請求頭)
- 在回調函數里根據返回的不同狀態進行操作
一：創建XMLHttpRequest()對象
1 var ajax; 2 if(window.XMLHttpRequest){ 3 ajax = new XMLHttpRequest(); // 兼容其他瀏覽器
4 }else{ 5 ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容老版IE
6 }
二：創建回調函數
設置ajax的事件處理函數，交互時的操作
1 ajax.onreadystatechange = function(){}
三：將請求發送到服務器
1 // 請求數據 類型 為 POST ，data.php 是請求路徑 ，true異步請求
2 ajax.open("POST","data.php",true); 3
4 //發送數據 以 鍵名 = 鍵值 形式 多個請求 用 & 隔開
5 ajax.send("userName="+userName+"&location="+location);
四：設置請求的HTTP頭部信息
HTTP請求頭類型有4種
1 // 1.發送表單數據
2 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8"); 3 // 2.發送純文本(默認值)
4 ajax.setRequestHeader("Content-type","text/plain;charset=utf-8"); 5 // 3.發送html文本
6 ajax.setRequestHeader("Content-type","text/html;charset=utf-8"); 7 // 4.發送json格式的數據：
8 ajax.setRequestHeader("content-type","application/json;charset=utf-8");
五：在回調函數里根據返回的不同狀態進行操作
1 ajax.onreadystatechange = function(){ // 事件函數 監聽
2
3 // 判斷readyState == 4（交互完成）status服務器返回的狀態（200是ok）
4 if(ajax.readyState == 4 && ajax.status == 200){ 5
6 console.log(ajax.responseText); // 接收返回的信息
7
8 }else{ 9 console.log("異步交互失敗"); 10 } 11 }
以上就是ajax請求數據五個步驟：
POST：
1 var ajax; 2 if(window.XMLHttpRequest){ 3 ajax = new XMLHttpRequest(); // 兼容其他瀏覽器
4 }else{ 5 ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容老版IE
6 } 7
8 // 請求數據 類型 為 POST ，data.php 是請求路徑 ，true異步請求
9 ajax.open("POST","data.php",true); 10
11 //發送數據 以 鍵名 = 鍵值 形式 多個請求 用 & 隔開
12 ajax.send("userName="+userName+"&location="+location); 13
14 // 設置請求頭
15 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 16
17 // 事件函數 監聽返回
18 ajax.onreadystatechange = function(){ 19
20 // 判斷readyState == 4（交互完成）status服務器返回的狀態（200是ok）
21 if(ajax.readyState == 4 && ajax.status == 200){ 22
23 console.log(ajax.responseText); // 接收返回的信息
24
25 }else{ 26 console.log("異步交互失敗"); 27 } 28 }
GET：
與 POST 一樣，不用設置請求頭
1 var ajax; 2 // 判斷：兼容IE和其他瀏覽器
3 if(window.XMLHttpRequest){ 4 ajax = new XMLHttpRequest();//兼容其他瀏覽器
5 }else{ 6 ajax = new ActiveXObject("Microsoft.XMLHTTP");//兼容老版IE
7 } 8
9 // 設置ajax的事件處理函數，交互時的操作，當readyState的屬性值發生改變操作
10 // 判斷readyState == 4（交互完成）status服務器返回的狀態（200是ok）
11 if(ajax.readyState == 4 && ajax.status == 200){ 12
13 console.log(ajax.responseText);// 接收返回的信息
14
15 }else{ 16 console.log("異步交互失敗"); 17 } 18
19 // 請求數據 類型 為 GET ，data.php 是請求路徑 ，異步請求
20 ajax.open("GET","data.php",true); 21
22 // 將請求發送到服務器，就是將請求發送出去，發送到ajax.open的路徑
23 ajax.send();
XMLHttpRequest對象的常用屬性和方法
屬性:
readyState(0-4) :
0 -- 代表未初始化
1 -- 代表正在加載
2 -- 代表加載已完成
3 -- 代表正在交互
4 -- 代表交互完成
onreadystatechange -- 指定當發生任何狀態變化時(readyState的屬性值發生改變)的時間處理函數。
ajax.onreadystatechange = function(){} -- 這是一個事件處理函數
responseText -- 客戶端接收到的HTTP響應文本內容
status -- 描述服務器返回的HTTP狀態代碼，比如：200對應ok，404對應 no found， 502， 301 等等
statusText -- 描述服務器返回的HTTP狀態代碼文本： 比如：ok，not found
方法:
abort() -- 停止當前請求
getAllResponseHeaders() -- 獲取HTTP請求的所有響應的頭部（獲取所有的請求頭）
getResponseHeaders() -- 獲取指定HTTP請求的響應的頭部（獲取指定的請求頭）
open(arg1,arg2,arg3):
arg1 -- 請求的類型，get或者post
arg2 -- 文件路徑或者接口地址
arg3 -- true或者false, true代表異步，false代表同步
send() -- 將請求發送到服務器
setRequestHeader() -- 設置請求的HTTP頭部信息(這是請求頭)