7.Ajax（Asynchronous JavaScript and XML） 原理

簡介

這是早期從伺服器獲取資料的一種模型結構，當需要載入新的頁面或者展示部分資料時，則必須重新載入頁面。

這是一種極差的使用者體驗!
這是一種極差的使用者體驗!
這是一種極差的使用者體驗!

解決什麼問題

AJAX 是為了解決早期從服務端獲取個別資料，不用重新載入整個頁面，達到更新頁面的效果。

最初，AJAX技術更多的是請求XML格式資料，但是我們通常情況下，會請求JSON資料。

定義

AJAX 表示非同步的JS和XML(Asynchronous JavaScript And XML)。
如何理解這句話呢？

簡而言之，AJAX技術的核心在於XMLHttpRequest(通常簡寫為XHR)物件。
通過XHR物件,可以建立與服務端的連線。這樣就可以達到資料通訊的目的。

其中，資料格式也很豐富，包括了JSON,XML,HTML以及TEXT文字檔案。

AJAX技術最大的亮點在於非同步(Asynchronous)，利用這樣特性，意味著我們無需重新整理頁面就能替換資料、區域性重新整理頁面的效果。

兩大主要特徵：

• 無需重新載入頁面，向伺服器傳送請求
• 接收伺服器的響應資料

Ajax 模型

Ajax模型，通過使用Web API作為代理非同步來請求和獲取資料。

這樣做的優勢：

聯想場景：
當我們去訪問淘寶、京東等網商網站時，當我們切換頁面，可以看到網頁中只有商品資訊進行了更新，而頁首頁尾以及導航欄都和之前的一樣。

這樣的訪問方式是不是更加便捷高效，按需載入以及不用重新整理整個頁面。並且下載量更少，就避免了浪費過多流量。

優化ajax模型

為了進一步提升載入速度，提高瀏覽體驗。有些網站會在首次請求時，將資料資訊儲存在客戶端中，這意味著在後續訪問中，他們將使用本地版本，而不是下載最新副本。