應用原生Ajax請求服務器數(shù)據(jù)
視頻
1、Ajax基本知識
(1) Ajax是異步的JavaScript和XML
(2) XML是可擴展標記語言
(3) Ajax不是新的編程語言,而是一種使用現(xiàn)有標準的新方法
(4) Ajax是與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術,并且不需要重新加載整個頁面
(5) Ajax可以是同步請求,也可以是異步請求。但是,大多數(shù)情況下,特指異步請求。因為同步的Ajax請求,對瀏覽器有阻塞效應
(6) 常用請求類型有GET、POST請求
2、創(chuàng)建Ajax對象的流程步驟
(1) 創(chuàng)建Ajax對象
(2) 創(chuàng)建請求狀態(tài)變化監(jiān)聽事件接收服務器響應的數(shù)據(jù)
(3) 創(chuàng)建服務器連接
(4) 向服務器發(fā)出HTTP請求
具體實現(xiàn)代碼如下:
//01-創(chuàng)建Ajax對象
var xhr = new XMLHttpRequest();
//02-創(chuàng)建請求狀態(tài)變化監(jiān)聽事件接收服務器響應的數(shù)據(jù)
xhr.onreadystatechange = function () {
//獲取Ajax狀態(tài)碼
var statusCode = this.readyState;
//在最后一個階段獲取服務器響應的數(shù)據(jù)
//當ajax對象的狀態(tài)碼為4并且http狀態(tài)碼為200,就獲取服務器的數(shù)據(jù)
if (statusCode === 4 && this.status === 200) {
//獲取服務器響應數(shù)據(jù)
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部分的數(shù)據(jù),如果responseType屬性是text或者空字符串,responseText就會包含已經收到的部分信息
(5) 4:請求已經完成,并且響應成功,表示服務器數(shù)據(jù)已經完全接收,或者本次接收已經失敗了
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ā)現(xiàn)指定網(wǎng)址
(9) 500,Internal Server Error,服務器發(fā)生錯誤
(10) 502,Bad Gateway,無響應網(wǎng)關/代理
6、補充Ajax知識
(1) xhr.withCredentials = true; 請求時攜帶cookie
(2) xhr.responseType = 'json'; 設置響應數(shù)據(jù)類型, 默認為text,在這需要注意,如果設置此項,需要通過xhr.response獲取服務器響應的數(shù)據(jù)
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經閱讀并接受
上述條款。