AJAX的優缺
- 優點 1.頁面不重新整理的情況下修改資料 2.非同步通訊，響應快 3.建奇功伺服器負擔
- 缺點 1.瀏覽器back失效，對瀏覽器返回功能造成破壞 2.有安全隱患 3.對搜尋引擎支援差 4.無法用URL直接訪問
常用場景
- 登入註冊資料驗證(使用者不存在或者已經存在)
- 下拉搜尋資料提示
- ......
利用原生JS來寫一個AJAX方法
1.首先，先建立一個變數用來儲存XMLHttpRequest物件
var http = null;
複製程式碼2.建立XMLHttpRequest物件
http = new XMLHttpRequest();
複製程式碼3.利用open(...)方法進行配置
open方法有三個引數，分別是
- method （請求方式）
- url （請求地址）
- async （是否非同步） 第一個引數設定其請求方式，如常見的GET和POST，第二個引數設定URL，可以是後臺檔案路徑也可以是網路地址。第三個是問你是否需要非同步請求，這裡一般建議true，畢竟ajax其作用就是非同步獲取資料。
http.open('GET' , '/api/test.php?name=wang' , true);
複製程式碼如果為POST提交的話，那麼需要設定請求頭部，在把引數設定在sen();中
http.open('POST','/api/test.php',true)
http.setRequestHeder(xxxxx格式);
http.send('name=wang');
複製程式碼4.通過XMLHttpRequest,send()提交
http.send();
複製程式碼5.對伺服器響應做處理
提交請求後，我們可以通過onreadystatechage去監測響應，看下是否成功，readyState一共有五個狀態，到達4的時候說明相應內容已經解完成了，也可以通過XMLHttpRequest.onload來代替，當等於4時，通過status獲取狀態碼。
http.onload = function (){
if(http.status === 200){
console.log('ajax yes!');
}else{
console.log('ajax no!')
}
}
複製程式碼狀態碼詳解
| 狀態碼 | 資訊 |
|---|---|
| 200 | 表示響應結果請求被正常處理了 |
| 204 | 表示請求資源成功，但是沒有資源可以返回 |
| 206 | 表示請求資源的某一部分，響應中包含content-range |
| 301 | 表示資源的訪問路徑(URL)被變更 |
| 302 | 表示請求的資源已經在其他位置了，但是預設你已經知道了 |
| 303 | 表示請求的資源已經在其他位置了，應使用 GET 方法定向獲取請求的資源。 |
| 304 | 表示資源已經請求到到了，但是未能按照正常的方式請求 |
| 307 | 臨時重定向。 |
| 400 | 請求報文中存在語法錯誤，需要修改請求內容重新請求 |
| 401 | 需要通過http認證，若之前已進行過 1 次請求，則表示用 戶認證失敗 |
| 403 | 伺服器拒絕你的的訪問 |
| 404 | 伺服器上沒有請求的資源，可能是地址寫錯了....... |
| 405 | 客戶端的請求方法被伺服器禁止 |
| 500 | 伺服器資源發生了錯誤 |
| 503 | 伺服器無法請求 |
| 總結 | 2xx為請求成功，3xx為URL被改變了，4xx客戶端錯誤，5xx伺服器錯誤 |
封裝ajax方法
/**
/**
* ajax封裝，引數傳遞一個物件
* url : 請求地址
* type : 請求方式
* dataType : 請求值返回值
* data : 引數物件
* async ： 非同步
* success : function 成功函式 => 引數是響應內容
* error : function 異常函式 => 引數內容是響應碼
**/
var ajax = function (obj) {
//預設傳入一個物件,如果沒有，就為空物件
obj = obj || {};
//預設GET請求
obj.type = (obj.type || 'GET').toUpperCase();
//預設返回JSON資料
obj.dataType = obj.dataType || 'JSON';
//預設非同步請求
obj.async = obj.async || true;
//引數處理,執行getParams方法
var data = getParams(obj.data);
var http;
/**
* 建立AJAX的例項適配
* W3C使用XMLHttpRequest
* IE使用ActiveXObject('Microsoft.XMLHTTP');
* */
if (window.XMLHttpRequest){
//w3c
http = new XMLHttpRequest();
}else {
//IE
http = new ActiveXObject('Microsoft.XMLHTTP');
}
/**
* 請求方式的封裝
* GET和POST請求
* */
if (obj.type === 'GET'){
http.open("GET",obj.url+'?'+data,obj.async);
http.send();
}else if (obj.type === 'POST'){
http.open('POST',obj.url,obj.async);
//設定頭部引數
http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//提交post資料
http.send(data);
}
/**
* 監聽響應介面
* 如果步驟4的請求狀態碼為正確的就執行success函式
* 如果錯誤的話就執行error函式
* */
http.onreadystatechange = function () {
if (http.readyState === 4){
//如果響應內容完成了，判斷狀態碼
var status = http.status;
if (status >= 200 && status < 300){
//回撥
obj.success && obj.success(http.responseText,http.responseXML);
} else {
obj.error && obj.error(status);
}
}
};
};
/**
* 物件引數的處理
* 轉換成為需要的字串
*/
function getParams(data) {
var arr = [];
for (var param in data){
arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
}
console.log(arr);
arr.push(('randomNumber=' + Math.random()).replace('.'));
return arr.join('&');
}
複製程式碼jQuery的AJAX封裝方法
jQuery封裝的ajax的使用 GET
$.ajax({
type:'get',
url: "url",
data:{'foo':'bar'},
success: function(res) {
load_content(res);
}
});
複製程式碼POST
$.ajax({
url: "url",
success: function(res) {
//設定到頁面上
console.log(typeof res);
}
});
複製程式碼jquery的ajax原理也相對差不多，它給開發者處理了非常多的相容性問題，大大優化了開發者在寫ajax造成的程式碼重複。。。。。。。。。。