1.背景介紹
什么是AJAX莲趣？
即異步的 JavaScript 和 XML鸳慈，是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)； 傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容喧伞，必需重載整個網(wǎng)頁面走芋。 使用AJAX則不需要加載更新整個網(wǎng)頁，實現(xiàn)部分內(nèi)容更新潘鲫；
2.知識剖析
具體來說翁逞，AJAX包括以下幾個步驟。
創(chuàng)建AJAX對象
發(fā)出HTTP請求
接收服務(wù)器傳回的數(shù)據(jù)
更新網(wǎng)頁數(shù)據(jù)
xmlhttprequest對象的用法
? ? ? ? ? ? ? ? xhr.open("get","ajax_info.txt",false);
? ? ? ? ? ? ? ? xhr.send(null);
send方法接受一個數(shù)據(jù)溉仑，即要作為請求主體的數(shù)據(jù)挖函。如果不需要請求主體發(fā)回數(shù)據(jù)，則傳回null浊竟； 收到響應(yīng)后數(shù)據(jù)會填入xhr對象的屬性：
responseText：作為響應(yīng)主體被返回的文本
responseXML：如果響應(yīng)的內(nèi)容類型是“text/xml”或者“application/xml” 這個屬性中就保存包含著響應(yīng)數(shù)據(jù)的XML DOM文檔
status：響應(yīng)的HTTP狀態(tài)
statusText：HTTP狀態(tài)說明
在收到響應(yīng)后怨喘，第一步先確定status屬性，用來確定是否返回成功（狀態(tài)為200）振定； responseText屬性就準(zhǔn)備就緒哲思，此外，狀態(tài)碼304表示請求的資源沒有被修改吩案； 但一般為了確保接受到適當(dāng)?shù)捻憫?yīng)還需要檢測上面兩種狀態(tài)碼棚赔；
? ? ? ? ? ? ? ? ? ? ? ? ? function sendAjax() {
? //構(gòu)造表單數(shù)據(jù)
? var formData = new FormData();
? formData.append('username', 'johndoe');
? formData.append('id', 123456);
? //創(chuàng)建xhr對象
? var xhr = new XMLHttpRequest();
? //設(shè)置xhr請求的超時時間
? xhr.timeout = 3000;
? //設(shè)置響應(yīng)返回的數(shù)據(jù)格式
? xhr.responseType = "text";
? //創(chuàng)建一個 post 請求，采用異步
? xhr.open('POST', '/server', true);
? //注冊相關(guān)事件回調(diào)處理函數(shù)
? xhr.onload = function(e) {
? ? if(this.status == 200||this.status == 304){
? ? ? ? alert(this.responseText);
? ? }
? };
? xhr.ontimeout = function(e) { ... };
? xhr.onerror = function(e) { ... };
? xhr.upload.onprogress = function(e) { ... };
? //發(fā)送數(shù)據(jù)
? xhr.send(formData);
}
3.常見問題
1、IE瀏覽器下面的緩存問題
2靠益、跨域問題
3丧肴、Ajax亂碼問題
4、使用post提交的時候需要設(shè)置content-type為"application/x-www-form-urlencoded"
5胧后、Ajax對象屬性的大小寫問題
6芋浮、Ajax狀態(tài)為0的問題
4.解決方法
1. 緩存問題
在IE瀏覽器下面使用get請求時，如果第一次請求了數(shù)據(jù)之后IE會自動緩存數(shù)據(jù)壳快，如果下一次再發(fā)送同樣的 請求的時候瀏覽器會自動先去找緩存顯示出來纸巷，所以如果請求的數(shù)據(jù)有變化的時候，這里是看不到變化的眶痰。
解決辦法：
xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在請求的后面 加上時間戳或是隨機數(shù)瘤旨，讓url變成唯一，或者是竖伯，改成post請求存哲。 （get和post請求的區(qū)別可參見?淺談HTTP中Get與Post的區(qū)別）
2. 跨域問題
這是我們目前見到的最多的，也是最熟悉的一個問題七婴。本地上面直接采用Nginx跨域?qū)崿F(xiàn)祟偷。在服務(wù)器上實現(xiàn)跨域，可以通過后端達(dá)成打厘，可參考?跨域有幾種處理方式修肠？?注意 Nginx跨域可以同時配置多個接口的，就是多寫幾個location就好了户盯，然后location后面帶的參數(shù)不一樣就可以了嵌施。
3. Ajax亂碼問題
亂碼問題雖然我們目前遇到的不多，但是也屬于比較常見的一個問題了先舷。出現(xiàn)的主要原因就是編碼不一致導(dǎo)致的艰管。 如果出現(xiàn)亂碼問題了，首先檢查一下meta聲明的charset要和請求的頁面返回的charset一致蒋川。response.charset="gb2312 or utf-8"
4. 使用post提交的時候需要進行的設(shè)置?
? ? ? ? ? ? ? ? ? ? ? ? ? content-Type: application/x-www-form-urlencoded;
? ? ? ? ? ? ? ? ? ? ? ? ? //jQuery中牲芋，
? ? ? ? ? ? ? ? ? ? ? ? ? content-Type: application/x-www-form-urlencoded;charset=utf-8;
? ? ? ? ? ? ? ? ? ? ? ? ? //AngularJS中$http
? ? ? ? ? ? ? ? ? ? ? ? ? content-Type: application/json; charset=utf-8;
? ? ? ? ? ? ? ? ? ? ? ? ? //使用原生Ajax需要在open以后才能使用xhr.setRequestHeader()方法，否則出錯
? ? ? ? ? ? ? ? ? ? ? ? ? xhr.open("post","xxxx.aspx",true);
? ? ? ? ? ? ? ? ? ? ? ? ? xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
? ? ? ? ? ? ? ? ? ? ? ? ? //用原生寫時必須在open()方法之后send()方法之前調(diào)用
5. Ajax對象屬性的大小寫問題?
有些瀏覽器比如火狐捺球，對大小寫是敏感的缸浦，if (xhr.readystate==4)這種寫法， 在IE下是成立的氮兵，但是在Firefox下就行不通了裂逐，因為IE不區(qū)分大小寫，F(xiàn)irefox是區(qū)分大小的泣栈。標(biāo)準(zhǔn)寫法為if (xhr.readyState==4)卜高，同理還有屬性 responseText弥姻，responseXML。習(xí)慣采用駝峰形式的寫法可以避免這個問題掺涛。
6. Ajax狀態(tài)0的問題
有時候在測試Ajax代碼的時候加了 xhr.status==200的判斷后庭敦，一直不執(zhí)行xhr.status==200的代碼输枯， 這個就需要注意了铅鲤。xhr.status==200是要通過服務(wù)器確認(rèn)后來返回的慈迈，在服務(wù)器頁面沒有發(fā)生錯誤或者轉(zhuǎn)向時才返回200狀態(tài)的括授， 此狀態(tài)和你通過瀏覽器訪問頁面時服務(wù)器定義的狀態(tài)一致。直接拖進瀏覽器瀏覽結(jié)果或者雙擊運行html頁面的践瓷，未發(fā)生錯誤時分衫，此時的xhr.status是0据德，不是200减拭。
5蔽豺、編碼實戰(zhàn)
6、擴展思考
AJAX的優(yōu)缺點
get與post
ajax的優(yōu)點：
最大的一點是頁面無刷新峡谊，用戶的體驗非常好茫虽。
使用異步方式與服務(wù)器通信刊苍，具有更加迅速的響應(yīng)能力既们。
可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理正什， 減輕服務(wù)器和帶寬的負(fù)擔(dān)啥纸，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)婴氮， ajax的原則是“按需取數(shù)據(jù)”斯棒，可以最大程度的減少冗余請求，和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)主经。
基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)荣暮，不需要下載插件或者小程序。
ajax可使因特網(wǎng)應(yīng)用程序更小罩驻、更快穗酥，更友好。
ajax的缺點：
ajax不支持瀏覽器back按鈕惠遏。
安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)砾跃。
對搜索引擎的支持比較弱。
破壞了程序的異常機制节吮。
不容易調(diào)試抽高。
GET - 從指定的資源請求數(shù)據(jù)。 POST - 向指定的資源提交要被處理的數(shù)據(jù)
GET 請求可被緩存 GET 請求保留在瀏覽器歷史記錄中 GET 請求可被收藏為書簽 GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用 GET 請求有長度限制 GET 請求只應(yīng)當(dāng)用于取回數(shù)據(jù)
POST 請求不會被緩存 POST 請求不會保留在瀏覽器歷史記錄中 POST 不能被收藏為書簽 POST 請求對數(shù)據(jù)長度沒有要求
7透绩、參考文獻(xiàn)：
參考一：《JavaScript高級編程設(shè)計》
參考二：?AJAX -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha）——阮一峰
8翘骂、更多討論
AJAX適用場景有哪些壁熄？
Ajax適用場景
表單驅(qū)動的交互
深層次的樹的導(dǎo)航
快速的用戶與用戶間的交流響應(yīng)
類似投票、yes/no等無關(guān)痛癢的場景
對數(shù)據(jù)進行過濾和操縱相關(guān)數(shù)據(jù)的場景
普通的文本輸入提示和自動完成的場景
Ajax不適用場景
部分簡單的表單
搜索
基本的導(dǎo)航
替換大量的文本
對呈現(xiàn)的操縱
問題：
1.常用的跨域方法有哪些碳竟？
答：請點擊
2.同步請求和異步請求的區(qū)別请毛？
答：請點擊
3.ajax應(yīng)用場景？
答：表單驅(qū)動的交互
深層次的樹的導(dǎo)航
快速的用戶與用戶間的交流響應(yīng)
類似投票瞭亮、yes/no等無關(guān)痛癢的場景
對數(shù)據(jù)進行過濾和操縱相關(guān)數(shù)據(jù)的場景
普通的文本輸入提示和自動完成的場景
Ajax不適用場景
部分簡單的表單
搜索
基本的導(dǎo)航
替換大量的文本
對呈現(xiàn)的操縱
