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(){ }
}