什麽是ajax

　　AJAX是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX可以使網頁實現異步跟新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統方法的缺點：

　　傳統的web交互式用戶觸發一個http請求服務器，然後服務器在收到之後，在做出響應到用戶，並且返回一個新的頁面，每當服務器處理客戶端提交的請求時，客戶都只能空閑等待，並且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數據都要返回一個完整的HTML頁，而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。這個做法浪費了很多帶寬，由於每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢的多。

XMLHttpRequest對象

　　XmlHttpRequest對象是ajax的基礎，XMLHttpRequest用於在後臺與服務器交換數據。這意味著可以不重新加載整個網頁的情況下，對網頁的某部分進行跟新。目前所有的瀏覽器都支持XMLHttpRequest

五部使用法：

　　1.創建XMLHTTPRequest對象

　　2.使用open方法設置和服務器的交互信息。

　　3.設置發送的數據，開始和服務器端交互。

　　4.註冊事件

　　5.更新界面

get請求和post請求的例子

　　　　get請求

//步驟一:創建異步對象
var ajax = new XMLHttpRequest();
//步驟二:設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端
ajax.open(‘get‘,‘getStar.php?starName=‘+name);
//步驟三:發送請求
ajax.send();
//步驟四:註冊事件 onreadystatechange 狀態改變就會調用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步驟五 如果能夠進到這個判斷 說明 數據 完美的回來了,並且請求的頁面是存在的
　　　　console.log(ajax.responseText);//輸入相應的內容
　　}
}

　　　　　post請求

//創建異步對象
var xhr = new XMLHttpRequest();
//設置請求的類型及url
//post請求一定要添加請求頭才行不然會報錯
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open(‘post‘, ‘02.post.php‘ );
//發送請求
xhr.send(‘name=fox&age=18‘);
xhr.onreadystatechange = function () {
// 這步為判斷服務器是否正確響應
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};

為了方便實用，我們可以把它封裝進方法裏面，要用的時候，直接調用就可以了。

function ajax_method(url,data,method,success) {
// 異步對象
var ajax = new XMLHttpRequest();

// get 跟post 需要分別寫不同的代碼
if (method==‘get‘) {
// get請求
if (data) {
// 如果有值
url+=‘?‘;
url+=data;
}else{

}
// 設置 方法 以及 url
ajax.open(method,url);

// send即可
ajax.send();
}else{
// post請求
// post請求 url 是不需要改變
ajax.open(method,url);

// 需要設置請求報文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 判斷data send發送數據
if (data) {
// 如果有值 從send發送
ajax.send(data);
}else{
// 木有值 直接發送即可
ajax.send();
}
}

// 註冊事件
ajax.onreadystatechange = function () {
// 在事件中 獲取數據 並修改界面顯示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);

// 將 數據 讓 外面可以使用
// return ajax.responseText;

// 當 onreadystatechange 調用時 說明 數據回來了
// ajax.responseText;

// 如果說 外面可以傳入一個 function 作為參數 success
success(ajax.responseText);
}
}

}

原生js的ajax請求