AJAX 就是瀏覽器提供的一套API 能夠經過javascript調用 從而實現經過代碼控制請求與響應 實現網絡編程
AJAX 在瀏覽器端進行網絡編程(發送請求 接受響應)的技術方案
經過javascript直接獲取服務器的最新的內容而沒必要從新加載頁面 讓web更能接近桌面應用的用戶體驗javascript
一、最大的一點是頁面無刷新,在頁面內與服務器通訊,給用戶的體驗很是好。
二、使用異步方式與服務器通訊,不須要打斷用戶的操做,具備更加迅速的響應能力。
三、能夠把之前一些服務器負擔的工做轉嫁到客戶端,利用客戶端閒置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。而且減輕服務器的負擔,ajax的原則是「按需取數據」,能夠最大程度的減小冗餘請求,和響應對服務器形成的負擔。
四、基於標準化的並被普遍支持的技術,不須要下載插件或者小程序。
ajax的優勢
一、最大的一點是頁面無刷新,在頁面內與服務器通訊,給用戶的體驗很是好。
二、使用異步方式與服務器通訊,不須要打斷用戶的操做,具備更加迅速的響應能力。
三、能夠把之前一些服務器負擔的工做轉嫁到客戶端,利用客戶端閒置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。而且減輕服務器的負擔,ajax的原則是「按需取數據」,能夠最大程度的減小冗餘請求,和響應對服務器形成的負擔。
四、基於標準化的並被普遍支持的技術,不須要下載插件或者小程序。php
1.ajax幹掉了back按鈕,即對瀏覽器後退機制的破壞
2.安全問題由於ajax技術就像是直接創建一個通道,會暴露比之前數據和服務器邏輯
3.對搜索引擎的支持比較弱
4.一些手機設備如今還不能更好的支持ajaxjava
使用web
徑,「異步/同步」)。
第三個參數:true===》異步、false===》同步。
當請求方式爲POST的時候,代碼寫法如上;
當請求方式爲GET的時候,使用xhr.open("請求方式(GET/POST)",url路徑 + 「?」請求數據 + ,「異步/同步」)ajax
使用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開頭)(服務器錯誤)json
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){ // 接收響應的返回值 // responseText responseXML 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(){ }
}安全