騰訊視頻

什么是Ajax？

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網(wǎng)頁開發(fā)技術。Ajax的工作原理相當于在用戶和服務器之間加了一個中間層(ajax引擎),使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器,像—些數(shù)據(jù)驗證(比如判斷用戶是否輸入了數(shù) 據(jù))和數(shù)據(jù)處理(比如判斷用戶輸入數(shù)據(jù)是否是數(shù)字)等都交給Ajax引擎自己來做, 只有確定需要從服務器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務器提交請求。把這些交給了Ajax引擎，用戶操作起來也就感覺更加流暢了。傳統(tǒng)的網(wǎng)頁（不使用 Ajax）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。

傳統(tǒng)的請求方式

傳統(tǒng)的web應用程序中，用戶向服務器發(fā)送一個請求，然后等待，服務器接受到用戶的請求然后響應。在這段時間內(nèi)，用戶會傻乎乎的盯著一個空白頁面看。這是因為以往的傳輸方式為同步處理方式。長久以來我們對這種web交互模式已經(jīng)習慣了，并且以使用者的角度來講已經(jīng)覺得是理所當然的事情了。

Ajax的工作方式

和傳統(tǒng)的web應用不同，Ajax采取了異步交互避免了用戶請求-等待-應答交互方式的缺點。 Ajax在應用程序和服務器中引入了一個中間層---Ajax引擎，它是用Javascript編寫的，在一個隱藏的框架中運行。Ajax引擎負責呈現(xiàn)用戶界面，以及代表用戶和服務器進行交互。Ajax引擎允許用戶和服務器進行異步的交互。用戶無需傻乎乎的盯著空白頁面。

針對Ajax會有幾個常見問題

1、IE瀏覽器下面的緩存問題

2、跨域問題

3、Ajax亂碼問題

4、Ajax對象屬性的大小寫問題

5、Ajax狀態(tài)為0的問題

第一個問題，緩存問題：

在IE瀏覽器下面使用get請求時，如果第一次請求了數(shù)據(jù)之后IE會自動緩存數(shù)據(jù)，如果下一次再發(fā)送同樣的請求的時候瀏覽器會自動先去找緩存顯示出來，所以如果請求的數(shù)據(jù)有變化的時候，這里是看不到變化的。解決辦法：xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);就是在請求的后面加上_dc=。。。讓url變成唯一，或者是，改成post請求。

第二個問題，跨域問題：

這是我們目前見到的最多的，也是最熟悉的一個問題。本地上面直接采用Nginx跨域?qū)崿F(xiàn)。在服務器上的話，交給后端吧。。。注意 Nginx跨域可以同時配置多個接口的，就是多寫幾個location就好了，然后location后面帶的參數(shù)不一樣就可以了。

第三個問題： Ajax亂碼問題

亂碼問題雖然我們目前遇到的不多，但是也屬于比較常見的一個問題了。出現(xiàn)的主要原因就是編碼不一致導致的。如果出現(xiàn)亂碼問題了，首先檢查一下meta聲明的charset要和請求的頁面返回的charset一致。response.charset="gb2312 or utf-8"

第四個問題：Ajax對象屬性的大小寫問題，有些瀏覽器比如火狐，對大小寫是敏感的，if (xhr.readystate==4)這種寫法，在IE下是成立的，但是在ff下就行不通了，因為IE不區(qū)分大小寫，ff是區(qū)分大小的。標準寫法為if (xhr.readyState==4)，同理還有屬性 responseText，responseXML。習慣采用駝峰形式的寫法可以避免這個問題。

第五個問題：Ajax狀態(tài)0的問題，有時候在測試Ajax代碼的時候加了 xhr.status==200的判斷后，一直不執(zhí)行xhr.status==200的代碼，這個就需要注意了。xhr.status==200是要通過服務器確認后來返回的，在服務器頁面沒有發(fā)生錯誤或者轉(zhuǎn)向時才返回200狀態(tài)的，此狀態(tài)和你通過瀏覽器訪問頁面時服務器定義的狀態(tài)一致。這個我們提前就跟后端對接好了，問題也不大。

可以使用jQuery和ang

jQuery方法