AJAX開發教程之異步同步請求、FormData類型、事件監聽接口,試想這樣一種情景,當用戶點擊頁面中的某個按鈕向服務器發送請求時,頁面本質上隻是一些數據發生瞭變化,而此時服務器卻要將重繪的整個頁面再返回給瀏覽器加載,這顯然有悖於程序員的“DRY”原則,而且明明隻是一些數據的變化卻迫使服務器要返回整個HTML文檔,這本身也會給網絡帶寬帶來不必要的開銷。
有沒有辦法在頁面數據變動時,隻向服務器請求新的數據,並且在阻止頁面刷新的情況下,動態替換頁面中展示的數據呢? – 答案正是“AJAX”。
XMLHttpRequest 對象
XMLHttpRequest隻是一個JavaScript對象,確切的說,是一個構造函數。換句話說,它一點也不神秘,它的特殊之處隻在於它是由客戶端(即瀏覽器)提供的(而不是JavaScript原生的),除此之外,它有屬性,有方法,需要通過new關鍵字進行實例化,我們隻需掌握它們就好;
XMLHttpRequest 之 獲取數據
我們知道AJAX用來在項目中以阻止頁面刷新的方式獲取數據,那麼數據從哪裡來呢?我們又怎麼知道如何獲取這些數據?答案是我們通常使用API與各式各樣的數據庫交互。
“API”是“Application Programming Interface”(即:應用程序接口)的縮寫,你可以想象一些數據是開放的並且在等待被使用,而我們獲取這些數據的方式便是使用API。API通常的形式是一個URL,並提供指定的參數名和參數值用來幫助你定位所要獲取的數據。
XMLHttpRequest 之 準備請求
要想與服務器交互,首先需要思考以下問題:
我們是要獲取數據還是存儲數據? —— 表現為請求方式是“GET”還是“POST” 向哪裡發出請求? —— 即相應的API地址 以何種方式等待相應? —— 有“同步”和“異步”兩種選擇
而XMLHttpRequest實例的.open()方法的作用就是用來回答以上三個問題。.open()方法接收三個參數:請求方式,請求URL地址和是否為異步請求的佈爾值。
下面是一個.open()方法調用的例子:
// 該段代碼會啟動一個針對“example.php”的GET同步請求。 xhr.open("get", "example.php", false) // “DELETE”、“HEAD”、“OPTONS”、“PUT”也可以作為open()方法的第1個參數。
上面的代碼中,通過傳遞第三個參數為false實現同步。要註意的是:一旦設置為同步,那麼send()方法將阻塞直到請求完成。
(三)同步請求與異步請求
人們通常認為AJAX是異步的,實際上並非如此,AJAX是避免頁面在獲取數據後刷新的一種技術,至於等待服務器響應的方式是同步還是異步,需要開發人員結合業務需求進行配置(雖然通常是異步的)。
你可能會好奇,什麼時候我們需要使用同步的AJAX?就我個人經驗而言,似乎很難找到相應的場景。
最後我們再簡單解釋一下“同步”等待響應與“異步”等待響應的區別:“同步”意味著一旦請求發出,任何後續的JavaScript代碼不會再執行,“異步”則是當請求發出後,後續的JavaScript代碼會繼續執行,當請求成功後,會調用相應的回調函數。
XMLHttpRequest 2級 之 FormData類型
W3C提出瞭XMLHttpRequest 2級規范,雖然並非所有的瀏覽器都實現瞭該規范所規定的內容,但還是有一些內容被全部或大多數瀏覽器所實現。
FormData 類型
FormData是XMLHttpRequest 2級為我們提供的新的數據類型(構造函數),還記的如何偽裝一個POST請求為一個表單提交嗎?FormData令這一過程變得更加輕松,因為XHR2對象能夠識別傳入的數據類型是FormData的實例,並自動配置適當的頭部信息。
如何偽裝一個POST請求為一個表單提交?
當使用POST方法提交這種順序的表單數據時,必須設置“Content-Type”請求頭為這個值。
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
註意:當使用form時,這不是必需值,因為這是默認方法。
FormData的使用方式如下:
// 添加數據 let data1 = new FormData() data1.append("name", "Tom") xhr.send(data1) // 提取表單數據 let data2 = new FormData(document.forms[0]) xhr.send(data2)
除此之外,FormData的另一個好處是相較於傳統的AJAX請求,它允許我們上傳二進制數據(圖片,視頻,音頻等)。
FormData的瀏覽器兼容性:
桌面端 IE 10+ 與其他瀏覽器均支持
移動端 Android,Firefox Mobile,OperaMobile均支持,其餘瀏覽器未知
XMLHttpRequest 2級 之 事件監聽接口
XMLHttpRequest第一版,隻能對onreadystatechange這一個事件指定回調函數。該事件對所有情況作出響應。
XMLHttpRequest第二版允許對更多的事件指定回調函數。
onloadstart 請求發出 onprogress 正在發送和加載數據 onabort 請求被中止,比如用戶調用瞭abort()方法 onerror 請求失敗 onload 請求成功完成 ontimeout 用戶指定的時限到期,請求還未完成 onloadend 請求完成,不管成果或失敗