1. 首頁 > 生活 > >

ajax請求失敗是怎么回事 ajax請求失敗什么意思

小知識



文章插圖
ajax請求失敗是怎么回事 ajax請求失敗什么意思

文章插圖
一、ajax介紹
ajax 是前后端交互的重要手段或橋梁 。它不是一個技術 ， 是一組技術的組合 。
ajax ：a：異步；j：js；a：和；x：服務端的數據 。
ajax的組成：
異步的 js 事件其他 js (處理解析數據)XMLHttpRequest 對象數據(txt、json、xml、html)
通過后臺與服務器進行少量數據交換 ， ajax可以使網頁實現異步更新 。也就是在不需要重新加載整個網頁的情況下 ， 能夠更新部分網頁的技術 。傳統的網頁不使用ajax ， 如果需要更新內容 ， 必須重新加載整個頁面 。
ajax請求原理：創建一個網絡請求對象 -> 發送連接請求 -> 發送請求數據 -> 檢查網絡請求對象的狀態 -> 如果響應成功了 -> 瀏覽器接收返回數據并更新網頁 。接下來詳細介紹對象的創建以及它的方法 。
二、創建 XMLHttpRequest 對象
【ajax請求失敗是怎么回事 ajax請求失敗什么意思】XMLHttpRequest 對象 ， 用于后臺與服務器之間的數據交換 ， 意味著可以在不加載整個網頁的情況下 ， 更新部分內容或數據 。現代瀏覽器基本都支持 ， 但是低版本的IE不支持 ， 如果我們考慮IE兼容問題創建對象的時候需要兼容創建 。
考慮兼容時創建的對象：
var xhr ;if( window.XMLHttpRequest ){ //檢查瀏覽器是否支持XMLHttpRequest xhr = new XMLHttpRequest()}else{ xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6IE5}三、XMLHttpRequest的方法
3.1、open( )
設置請求的類型、請求接口、是否異步處理 。
使用語法：open( method , url , async )
method：設置網絡請求的類型 ， 常用的 get 和 posturl：設置請求的接口也就是服務器的地址async：true時表示異步 ， false表示同步
3.2、send( )
將請求發送到服務器 。
使用語法：send( string )
string ， 只用在請求方式是post時 ， 發送給服務器的數據 。數據是鍵值對格式的 ， 如：”name=jack&pwd=1234″
使用發送方式不同的時候 ， 傳輸數據添加方式也不同 ， 所以我們介紹下分別為post和get時 ， 數據是如何發送的？
3.3、提交方式
使用 get 方式提交
get發送請求時 ， 需要傳給后臺的數據通過url來傳遞 ， 多個參數之間使用 & 符號連接 ， 使用時如下：
xhr.opn( "GET" , "1.php?name=hello&age=world" , true )xhr.send()使用 post 方式提交
使用 post 方式發送請求時 ， 使用send來發送數據 ， 有時需要設置數據格式 ， 類似表單那樣 ， 此時可通過 setRequestHeader 設置發送的數據格式
xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded")Content-type常見類型：
text/plain 純文本 ， 基本不怎么用application/x-www-form-urlcoded 鍵值對格式傳值 ， 多個參數使用&連接multipart/form-data 定界符 ， 分隔各個數據 ， 經常用于上傳文件四、readyState 屬性
readyState 存有 XMLHttpRequest 的狀態 ， 它的值從 0-4 發生變化 ， 分別代表的意義：
0：請求初始化 ， 對象剛剛創建1：服務器已連接2：已發送 ， send發放已調用3：已接收 ， 此時只接收了響應(response)頭部分4：已接收 ， 此時接收響應(response)體信息
每當 readyState 狀態值發生改變時會 ， 就會觸發 onreadystatechange 事件 ， 對應著每個狀態值就會被觸發五次 。當狀態值為 4 時表示網絡請求響應完畢 ， 就可以獲取返回的值 。
xhr.onreadystateChange = function(){ if( xhr.readyState==4 ){if( xhr.status>=200 && xhr.status<300 || xhr.status==304 ){console.log("請求成功",xhr.responseXML)}else{console.log("請求失敗")} }}五、響應信息
通常我們需要獲取服務器返回的信息 ， 然后對我們的網頁做相對應的結果展示 ， 通常使用 XMLHttpRequest 的 responseText 或 responseXML 屬性 。
responseText —> 獲取到的是字符串形式 。接收到可直接使用 ， 無需轉換 。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;responseXML —> 獲取到 XML 形式的數據 。使用時需要解析 ， 如：
<person> <name>小米粒</name> <age>18</age> </person> 解析時：document.getElementsByTagName("name")[0]responseXML 目前已被 json 取代 ， 所以作為了解就好 。
六、ajax實例
var xhr ;if( window.XMLHttpRequest ){ xhr = new XMLHttpRequest()}else{ xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6IE5}xhr.open('GET','1.txt',true)xhr.send()xhr.onreadystatechange = function(){ if(xhr.readyState==4){if(xhr.status>=200 && xhr.status<300 || xhr.status==304){console.log("請求成功",xhr.response) // 請求成功 abc}else{console.log("請求失敗")} }}1.txt 文檔內容為 abc 。所以返回的結果也是abc