封裝一個自己的通用Ajax
一個簡單的Ajax請求
首先在封裝一個自己的ajax函式之前，我們需要先知道怎麼實現一個簡單的ajax請求。
這裡我建了兩個檔案，ajax01.html和ajax01.php
ajax01.html程式碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title> </head> <body> <input type="button" id="getContent" value="點我獲取內容" /> <div id="container">點選上面的按鈕，我會變哦</div> </body> <script> /*********************************ajax**********************************/ //獲取元素 var getContent = document.getElementById("getContent"); var container = document.getElementById("container"); var user_info = document.getElementById("user_info"); //給元素新增單擊事件處理函式 getContent.onclick = function (){ //1.建立XHR物件 var xhr = new XMLHttpRequest(); //4.給請求新增狀態變化事件處理函式 xhr.onreadystatechange = function (){ //判斷狀態碼 if(xhr.status==200 && xhr.readyState==4){ //將返回的json資料解析後儲存在變數res中 var res = JSON.parse(xhr.responseText); container.innerHTML = res.name; } }; //2.初始化請求 xhr.open('get','ajax01.php?name=張三&age=16',true); //如果是post請求，需要設定這個請求頭 //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //3.傳送請求 xhr.send(null); }; </script> </html>
可以看到使用ajax發請求並獲取響應資料只需要簡單的4步
引數說明：
xhr.status------------------------status ：響應的 HTTP 狀態，200表示響應成功
xhr.readyState-----------------readyState該屬性表示請求/響應過程的當前活動階段，這個屬性可取的值如下：
0 ：未初始化。尚未呼叫 open() 方法。
1 ：啟動。已經呼叫 open() 方法，但尚未呼叫 send() 方法。
2 ：傳送。已經呼叫 send() 方法，但尚未接收到響應。
3 ：接收。已經接收到部分響應資料。
4 ：完成。已經接收到全部響應資料，而且已經可以在客戶端使用了。
xhr.onreadystatechange----------------------readyState屬性狀態變化事件，只要 readyState 屬性的值由一個值變成另一個值，都會觸發一次 readystatechange 事件。可以利用這個事件來檢測每次狀態變化後 readyState 的值。
xhr.responseText---------------------------------responseText ：作為響應主體被返回的文字。
xhr.responseXML -------------------------------responseXML ：如果響應的內容型別是 "text/xml" 或 "application/xml" ，這個屬性中將儲存包含著響應資料的 XML DOM 文件
這裡需要注意的是，使用ajax傳送post請求時要先將 Content-Type 頭部資訊設定為 application/x-www-form-urlencoded如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");頭部資訊設定的設定一定要在open()方法之後，send方法之前，程式碼如下：
//初始化請求
xhr.open('post','ajax01.php',true);
//如果是post請求，需要設定這個請求頭
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//傳送請求,如果還要傳送資料,將資料傳入send方法中
xhr.send('name=張三&age=16');如果還要傳送資料，把資料傳入send()中
ajax01.php中的程式碼如下：
<?php
if(empty($_POST)){
//接收get請求引數，並將資料格式化為json字串返回給ajax
echo json_encode($_GET);
}else{
//接收post請求引數，並將資料格式化為json字串返回給ajax
echo json_encode($_POST);
}
?>好了，在知道了如何使用ajax發起一個簡單的請求後，我們現在可以來動手封裝一個自己的通用ajax函數了
封裝自己的通用Ajax函式
閒話少說，我們直接上程式碼吧
/*
*封裝一個自己的ajax函式
*有5個引數，最後一個引數可選
*
* @param method(必選) 請求型別 get 和 post
* @param url(必選) 請求的url地址 相同域名下的頁面（此函式不支援跨域請求）
* @param data(必選) 請求協帶的資料 以js物件的形式定義，如：{name:'張三'}
* @param callback(必選) 回撥函式,可接收一個引數，這個引數就是伺服器響應的資料
* @param type(可選) 指定伺服器響應的資料型別（可選值：json,xml,text），如果是json模式，則使用json解析資料，預設為text普通字串
*/
function myAjax(method,url,data,callback,type){
//建立相容 XMLHttpRequest 物件
var xhr;
if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//給請求新增狀態變化事件處理函式
xhr.onreadystatechange = function (){
//判斷狀態碼
if(xhr.status==200 && xhr.readyState==4){
//根據type引數，判斷返回的內容需要進行怎樣的處理
if(type=='json'){
//獲得 json 形式的響應資料，並使用parse方法解析
var res = JSON.parse(xhr.responseText);
}else if(type=='xml'){
//獲得 XML 形式的響應資料
var res = responseXML;
}else{
//獲得字串形式的響應資料
var res = xhr.responseText;
}
//呼叫回撥函式,並將響應資料傳入回撥函式
callback(res);
}
};
//判斷data是否有資料
var param = '';
//這裡使用stringify方法將js物件格式化為json字串
if(JSON.stringify(data) != '{}'){
url += '?';
for(var i in data){
param += i+'='+data[i]+'&'; //將js物件重組，拼接成url引數存入param變數中
}
//使用slice函式提取一部分字串，這裡主要是為了去除拼接的最後一個&字元
//slice函式：返回一個新的字串。包括字串從 start 開始（包括 start）到 end 結束（不包括 end）為止的所有字元。
param = param.slice(0,param.length-1);
}
//判斷method是否為get
if(method == "get"){
//是則將資料拼接在url後面
url = url+param;
}
//初始化請求
xhr.open(method,url,true);
//如果method == post
if(method == "post"){
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//傳送請求
xhr.send(param);
}else{
//傳送請求
xhr.send(null);
}
}封裝好了我們自己的ajax函式後，我們就來使用這個函式發起一個請求吧
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>
<input type="button" id="getContent" value="點我獲取內容" />
<div id="container">點選上面的按鈕，我會變哦</div>
</body>
<script>
//獲取元素
var getContent = document.getElementById("getContent");
var container = document.getElementById("container");
var user_info = document.getElementById("user_info");
//給元素新增單擊事件處理函式
getContent.onclick = function (){
//使用自己封裝的ajax函式傳送一個post請求
myAjax('post','ajax01.php',{name:'張三',age:16},function(res){
console.log(res);
container.innerHTML = res.name;
},'json');
};
</script>
</html>效果如下圖：
這裡我們封裝好的ajax函式就能正常使用了，比使用原生js要寫那麼多程式碼方便多了，現在我們只要簡單的呼叫這個ajax函式就可以方便的傳送請求了