ajax是壹種技術方案,但並不是壹種新技術。它依賴的是現有的CSS/HTML/JavaScript,而其中最核心的依賴就是瀏覽器提供的XMLHttpRequest對象,是這個對象使得瀏覽器可以發出HTTP請求與接收HTTP響應,實現在頁面不刷新的情況下和服務端進行數據交互。瀏覽器升級之後,出現了fetch,也可以認為是ajax的壹種實現。(兼容性差)
使用XMLHttpRequest對象來發送壹個Ajax請求。
status:200-300表示正常狀態碼。
status:404表示這個文件不存在。
status:503服務器收到了請求但是內部報錯了。
status:304表示這個數據是有緩存的。
readyState:存有XMLHttpRequest的狀態。從0~4發生變化
只要readyState屬性的值由壹個值變成另壹個值,都會觸發壹次readystatechange事件。必須在調用open()之前指定onreadystatechange事件處理程序才能保證跨瀏覽器兼容性。與其他事件不同的是,這裏沒有向readystatechange事件處理程序中傳遞event對象,必須通過XHR對象本身來確定下壹步該怎麽做。
在接受響應之前,還可以調用abort()方法來取消異步請求,
調用這個方法之後,XHR對象會停止觸發事件,而且也不在允許訪問任何與響應有關的對象屬性。
XMLHttpRequest標準又分為Level 1和Level 2。
1.缺點:
此屬性可以設置HTTP請求的時限。與之相關的是timeout()事件,用來指定回調函數。
timeout屬性表示請求在等待多少毫秒之後就終止,再給timeout設置壹個數值後,如果在規定的時間內瀏覽器還沒有接收到響應,那麽就會觸發timeout事件,進而會調用ontimeout事件處理程序。如果在超時終止請求之後再訪問status屬性,就會導致錯誤。為避免瀏覽器報告錯誤,可以將檢查status屬性的語句封裝在壹個try-catch語句中。
ajax直接傳送FormData對象與點擊submit提交網頁表單的效果是壹樣的。
使用FormData的優點:不必明確地在XHR對象上設置請求頭部,XHR能夠識別傳入的數據類型是FormData的實例,並配置適當的頭部信息。
假定files是壹個"選擇文件"的表單元素(input[type="file"]),將它裝入FormData對象,之後發送FormData即可實現文件的上傳。
作用:指定xhr.response的數據類型。
作用:獲取response數據
作用:表示發送數據。
xhr.send(data)的參數data可以是以下幾種類型:
阮壹峰:XMLHttpRequest Level 2 使用指南
妳真的會使用XMLHttpRequest麽?
《javascript高級程序設計》
饑人谷前端教程