ajax及ajax的封裝
AJAX 就是瀏覽器提供的一套API可以通過javascript呼叫 從而實現通過程式碼控制請求與響應實現網路程式設計
AJAX在瀏覽器端進行網路程式設計（傳送請求接受響應）的技術方案
通過javascript直接獲取伺服器的最新的內容而不必重新載入頁面讓web更能接近桌面應用的使用者體驗
ajax的優點
1、最大的一點是頁面無重新整理，在頁面內與伺服器通訊，給使用者的體驗非常好。
2、使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。
3、可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。
4、基於標準化的並被廣泛支援的技術，不需要下載外掛或者小程式。
ajax的優點
1、最大的一點是頁面無重新整理，在頁面內與伺服器通訊，給使用者的體驗非常好。
2、使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。
3、可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和響應對伺服器造成的負擔。
4、基於標準化的並被廣泛支援的技術，不需要下載外掛或者小程式。
ajax的缺點
1.ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞
2.安全問題因為ajax技術就像是直接建立一個通道,會暴露比以前資料和伺服器邏輯
3.對搜尋引擎的支援比較弱
4.一些手機裝置現在還不能更好的支援ajax
使用
- 連線伺服器
徑，“非同步/同步”）。
第三個引數：true===》非同步、false===》同步。
當請求方式為POST的時候，程式碼寫法如上；
當請求方式為GET的時候，使用xhr.open（"請求方式（GET/POST）"，url路徑 + “？”請求資料 + ，“非同步/同步”）
- 傳送請求
使用xhr.send（）傳送請求
當請求方式為GET的時候，傳送請求為xhr.send(null).
當請求方式為POST的時候，傳送請求為xhr.send(請求資料)。
此外使用POST的時候必須在xhr.send（請求資料）上面新增
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3.接收返回值
使用ajax會想用一個事件readystatechange事件：當請求被髮送到伺服器時，我們需要執行一些基於響應的操作。
當readystatechange改變的時候，就會觸發這個事件執行。
readyState：請求的狀態，返回的是狀態碼（0 - 4）：0（未初始化）open還沒有呼叫、1（載入）已經呼叫了send（）正在傳送請求、2（載入完成）send方法已經完成 已經收到了全部的響應內容、3（解析）正在解析響應內容、4（完成）響應內容解析完成 可以在客戶端用了。
responseText：返回請求的內容。
status：返回請求的結果碼：返回200（成功）、返回404（未找到）、返回5**（5開頭）（伺服器錯誤）
ajax是一套API核心提供的型別：XMLHttpRequest
// 涉及到ajax操作的頁面不能使用檔案協議訪問
// 1 安裝瀏覽器（使用者代理）
// xhr就類似於瀏覽器的作用（傳送請求接收響應） 初始化 請求代理物件
var xhr = new XMLHttpRequest();
// 2 開啟瀏覽器 輸入網址(open方法已經呼叫，建立一個與伺服器特定埠的連結)
xhr.open("GET",'./time.php')
// 3 敲回車鍵 開始請求
xhr.send()
// 因為客戶端永遠不知道伺服器何時才能返回我們需要的響應
// 所以AJAX API採用事件的機制（通知的感覺）
xhr.onreadystatechange = function(){
// 這個事件並不是只在響應時觸發 XHR 狀態改變就觸發
if(this.readyState !==4) return;
// 不然獲取響應的內容
console.log(this.responseText);
}
封裝Ajax
var $ = {
// 將{"name":"jack","age":20} 的引數要轉換為 ?name=jack&age=20
getpa:function(data){
if(data && typeof data == "object"){
var str = "?";
for(var key in data){
str = str + key + "=" + data[key] + "&";
}
str = str.substr(0,str.length-1);
}
return str;
},
// option.type:請求方式
// option.url:請求的url
// option.data:當前請求所傳遞的引數:規定引數必須是以物件的形式傳遞{"name":"jack","age":20}
// option.success:渲染方式
ajax:function(option){
// 接收使用者引數進行相應處理
var type = option.type || 'get';
// location.href 可以獲取當前檔案的路徑
var url = option.url || location.href;
// 接收引數:在js中最方便收集的資料型別為物件，所以我們就規定傳遞的引數必須是物件
var data = this.getpa(option.data) || "";
// 響應成功之後的回撥
var success = option.success;
// 建立非同步物件
var xhr = new XMLHttpRequest();
// 讓非同步物件傳送請求
// 請求行
if(type == "get"){
// 拼接引數
url += data;
data = null;
}
xhr.open(type,url);
// 請求頭
if(type == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
// 請求體
xhr.send(data);
// 讓非同步物件接收響應
xhr.onreadystatechange = function(){
// 一個成功的響應有兩個條件：1.伺服器成功響應 2.資料解析完畢可以使用
if(xhr.status == 200 && xhr.readyState == 4){
// 接收響應的返回值
// responseTextresponseXML
var rh = xhr.getResponseHeader("Content-Type");
// 判斷
if(rh.indexOf("xml") != -1){
var result = xhr.responseXML;
}
else if(rh.lastIndexOf("json") != -1){
var result = JSON.parse(xhr.responseText);
}else{
var result = xhr.responseText;
}
// 接收資料之後，呼叫回撥函式
success && success(result)
}
}
},
get:function(option){
},
post:function(){
}
}