一. AJAX的概述
1.1 什么是ajax
同步:
異步:
1.AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
? 說明:異步:就是不同步。例如我們向后臺發送請求,同步的方式是后臺必須返回響應數據才可以在瀏覽器上進行下一步操作,而異步方式可以在不需要等待后臺服務器響應數據,直接可以進行其他操作。
2.AJAX 不是新的編程語言,而是一種使用現有標準的新方法。
3.AJAX 是與服務器交換數據并更新部分網頁的技術,在不重新加載整個頁面的情況下。
小結:
簡而言之:ajax就是一項通過js技術發送異步請求 的技術。 異步請求,局部更新,不是整個網頁更新。
1.2 同步和異步的區別
#同步
1. 瀏覽器與服務器是串行的操作,瀏覽器發起請求的時候,服務器在處理該請求的時候,瀏覽器只能等待。響應返回,然后才能夠發送下一個請求,如果該請求沒有響應,不能發送下一個請求,客戶端會處于一直等待過程中。
2. 缺點:執行效率低,用戶體驗差。
#異步
1. 瀏覽器與服務器是并行工作的,瀏覽器發送一個請求,不需要等待響應返回,隨時可以再發送下一個請求,即不需要等待。
2. 優點:執行效率高,用戶體驗更好。
? AJAX使用異步的提交方式,瀏覽器與服務器可以并行操作,即瀏覽器后臺發送數據給服務器。用戶在前臺還是可以繼續工作。用戶感覺不到瀏覽器已經將數據發送給了服務器,并且服務器也已經返回了數據。
小結:
【1】同步請求存在的問題:
- 阻塞:請求發出后必須得等到響應結束才能操作頁面信息。
- 全部更新:整個頁面更新。
【2】異步請求好處:
? 1.非阻塞:請求發出后不用等到響應結束才能操作頁面信息。隨時可以操作。
? 2.局部更新:頁面的局部位置更新
1.3 AJAX的應用場景
? Ajax通常用需要發送異步請求的地方,如表單的異步校驗,搜索框的自動補全,異步加載數據;
1.3.1 注冊表單的用戶名異步校驗
? 很多站點的注冊頁面都具備自動檢測用戶名是否存在的友好提示,當用戶輸入的賬號已經存在,那么在輸入框位置會出現提示信息。該功能整體頁面并沒有刷新,但仍然可以異步與服務器端進行數據交換,查詢用戶的輸入的用戶名是否在數據庫中已經存在。
1.3.2 內容自動補全
? 不管是專注于搜索的百度,還是站點內商品搜索的京東,都有搜索功能,在搜索框輸入查詢關鍵字時,整個頁面沒有刷新,但會根據關鍵字顯示相關查詢字條,這個過程是異步的。
二.AJAX 的交互模型和傳統交互模型的區別
AJAX 的交互模型和傳統交互模型的區別如下圖所示:
【1】傳統交互模型:瀏覽器客戶端向服務器直接發送請求數據,然后后臺服務器接收到請求,處理請求數據,期間瀏覽器客戶端只能等待服務器處理數據,并響應數據,最后服務器將響應數據響應給瀏覽器客戶端,瀏覽器接收到響應之后才可以繼續下一步操作。
【2】AJAX 的交互模型:就是瀏覽器內部多了一個ajax引擎,瀏覽器客戶端向服務器發送請求的數據,都是先由瀏覽器將請求數據交給ajax引擎,注意,ajax引擎位于瀏覽器內部,是由js編寫的一個軟件。然后接下來都是由ajax引擎和服務器進行交互,此時用戶可以在瀏覽器上進行其他操作,如果再次向服務器發送請求,那么依然是交給ajax引擎處理,并且服務器響應的數據也是交給ajax引擎處理,由ajax引擎來分配瀏覽器的操作。
注意:ajax引擎內部具有一個核心對象:XMLHttpRequest。都是由該對象進行異步請求交互數據的。 new XMLHttpRequest()啟用ajax引擎
小結:ajax支持異步訪問,網頁局部刷新。主要是依賴于核心對象:XMLHttpRequest。Ajax就是通過XMLHttpRequest對象來發送異步的請求。