JavaScript原生ajax(XMLHttpRequest物件)用法
傳統方法的缺點:
傳統的web互動是使用者觸發一個http請求伺服器,然後伺服器收到之後,在做出響應到使用者,並且返回一個新的頁面,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的互動、只需從伺服器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而使用者每次都要浪費時間和頻寬去重新讀取整個頁面。這個做法浪費了許多頻寬,由於每次應用的互動都需要向伺服器傳送請求,應用的響應時間就依賴於伺服器的響應時間。這導致了使用者介面的響應比本地應用慢得多。
什麼是ajax
ajax的出現,剛好解決了傳統方法的缺陷。AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
XMLHttpRequest 物件
XMLHttpRequest物件是ajax的基礎,XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。目前所有瀏覽器都支援XMLHttpRequest
方 法 描 述
abort()
停止當前請求
getAllResponseHeaders()
把HTTP請求的所有響應首部作為鍵/值對返回
getResponseHeader("header")
返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])
send(content)
向伺服器傳送請求
setRequestHeader("header", "value")
把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()
。設定header並和請求一起傳送 ('post’方法一定要 )
五步使用法:
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);
}
}
}