JavaScript考點之一，AJAX總結（一），AJAX概述

前言

博主博客：Stillwater的博客
知乎專欄：前端汪汪
本文爲做者原創轉載請註明出處：

http://hiztx.top/2017/01/11/a...

1、什麼是AJAX？

AJAX即「Asynchronous JavaScript and XML」（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。是一種用來建立交互式網頁應用的網頁開發技術。之因此說AJAX是一項綜合技術，是由於AJAX包含了如下技術：

• 基於HTML和CSS進行表示；

• 使用 DOM進行動態顯示及交互；

• 使用 XML 和 JSON 進行數據交換及相關操做；

• 使用 XMLHttpRequest 進行異步數據查詢、檢索；

• 使用 JavaScript 將全部的東西綁定在一塊兒。

注：asynchronous 異步的
英 [eɪˈsɪŋkrənəs] 美 [e'sɪŋkrənəs]

2、爲何要用AJAX？

傳統Web應用存在的問題

1. 傳統的Web應用提交表單時會向網頁服務器發送一個請求。服務器接收並處理傳來的表單，而後送回一個新的網頁。但這個作法浪費了許多帶寬，由於在先後兩個頁面中的大部分HTML碼每每是相同的。

2. 因爲每次應用的溝通都須要向服務器發送請求，應用的迴應時間依賴於服務器的迴應時間。這致使了用戶界面的迴應比本機應用慢得多。即同步請求，瀏覽器須要等待服務器處理請求，致使了瀏覽器端的阻塞。

AJAX的出現解決的問題

1. AJAX應用能夠僅向服務器發送並取回必須的數據，並在客戶端採用JavaScript處理來自服務器的迴應。由於在服務器和瀏覽器之間交換的數據大量減小（大約只有原來的5%）,服務器迴應更快了。局部刷新。

2. AJAX採用異步模式，經過XMLHttpRequest對象（下篇博客具體介紹），發送給服務器請求之後，不用等待服務器的處理結果，用戶能夠繼續進行操做。非阻塞的方式提高了用戶體驗。

總的來講就好像，瀏覽器大哥有一書包的好東西，可是他只想給服務器大哥其中一個好東西。傳統Web應用處理方法是，瀏覽器大哥直接把書包給服務器大哥，他等服務器大哥本身找完之後，才能拿回本身的書包，繼續幹別的事情。AJAX的處理方法是，瀏覽器大哥找了個叫XMLHttpRequest的小弟來作這件事。小弟先從書包裏找出來那個東西，而後再給服務器大哥。服務器拿到東西之後處理了一下再把東西還給XMLHttpRequest小弟。這期間瀏覽器大哥愛幹嗎幹嗎。

3、AJAX的優缺點

優勢：

1. 能在不更新整個頁面的前提下維護數據。這使得Web應用程序更爲迅捷地迴應用戶動做，並避免了在網絡上發送那些沒有改變的信息。

2. 經過異步模式，不阻塞用戶，從而提高了用戶體驗。

3. AJAX不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。

4. AJAX引擎在客戶端運行，承擔了一部分原本由服務器承擔的工做，從而減小了大用戶量下的服務器負載。

缺點：

1. 破壞瀏覽器的後退與加入收藏書籤功能。在用AJAX動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，這是由於瀏覽器僅能記下歷史記錄中的靜態頁面。

2. AJAX若是使用GET方法，會暴露了與服務器交互的細節。

3. 對搜索引擎的支持比較弱。經過AJAX動態更新的頁面可能沒法被搜索引擎搜到。