應用原生Ajax請求服務器數據
視頻
1、Ajax基本知識
(1) Ajax是異步的JavaScript和XML
(2) XML是可擴展標記語言
(3) Ajax不是新的編程語言，而是一種使用現有標準的新方法
(4) Ajax是與服務器交換數據并更新部分網頁的技術，并且不需要重新加載整個頁面
(5) Ajax可以是同步請求，也可以是異步請求。但是，大多數情況下，特指異步請求。因為同步的Ajax請求，對瀏覽器有阻塞效應
(6) 常用請求類型有GET、POST請求
2、創(chuàng)建Ajax對象的流程步驟
(1) 創(chuàng)建Ajax對象
(2) 創(chuàng)建請求狀態(tài)變化監(jiān)聽事件接收服務器響應的數據
(3) 創(chuàng)建服務器連接
(4) 向服務器發(fā)出HTTP請求
具體實現代碼如下：
//01-創(chuàng)建Ajax對象
var xhr = new XMLHttpRequest();
//02-創(chuàng)建請求狀態(tài)變化監(jiān)聽事件接收服務器響應的數據
xhr.onreadystatechange = function () {
//獲取Ajax狀態(tài)碼
var statusCode = this.readyState;
//在最后一個階段獲取服務器響應的數據
//當ajax對象的狀態(tài)碼為4并且http狀態(tài)碼為200，就獲取服務器的數據
if (statusCode === 4 && this.status === 200) {
//獲取服務器響應數據
var data = this.responseText;
console.log('data ==> ', data);
}
}
//03-建立服務器連接
//xhr.open(請求類型, 請求地址, 是否異步); 默認為異步，true: 異步, false: 同步
//假設請求地址：http://127.0.0.1:10000/pro
xhr.open('GET', 'http://127.0.0.1:10000/pro', true);
//04-4-發(fā)起Ajax請求
xhr.send();
3、請求與響應頭獲取與設置
(1) setRequestHeader()方法設置請求頭信息
(2) getAllResponseHeaders()方法返回服務器發(fā)來的所有HTTP頭信息
(3) getAllResponseHeaders()方法獲取所有響應頭信息
(4) getResponseHeader方法返回HTTP頭信息指定字段的值，如果還沒有收到服務器回應或者指定字段不存在，則該屬性為null
對于POST請求，需要設置請求頭，以便后臺服務器截取請求體
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
4、Ajax請求狀態(tài)碼
(1) 0：請求未初始化，表示XMLHttpRequest實例已經生成，但是open()方法還沒有被調用
(2) 1：服務器連接已經建立，表示send()方法還沒有被調用，仍然可以使用setRequestHeader()，設定HTTP請求的頭信息
(3) 2：請求已接收，表示send()方法已經執(zhí)行，并且頭信息和狀態(tài)碼已經收到
(4) 3：請求處理中，表示正在接收服務器傳來的body部分的數據，如果responseType屬性是text或者空字符串，responseText就會包含已經收到的部分信息
(5) 4：請求已經完成，并且響應成功，表示服務器數據已經完全接收，或者本次接收已經失敗了
5、常用的HTTP狀態(tài)碼
(1) 200，OK，訪問正常
(2) 301，Moved Permanently，永久移動
(3) 302，Move temporarily，暫時移動
(4) 304，Not Modified，未修改
(5) 307，Temporary Redirect，暫時重定向
(6) 401，Unauthorized，未授權
(7) 403，Forbidden，禁止訪問
(8) 404，Not Found，未發(fā)現指定網址
(9) 500，Internal Server Error，服務器發(fā)生錯誤
(10) 502，Bad Gateway，無響應網關/代理
6、補充Ajax知識
(1) xhr.withCredentials = true; 請求時攜帶cookie
(2) xhr.responseType = 'json'; 設置響應數據類型, 默認為text，在這需要注意，如果設置此項，需要通過xhr.response獲取服務器響應的數據
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。