大家好黍析，我是IT修真院北京總院第24期的學員节沦，一枚正直純潔善良的web程序員
今天給大家分享一下键思，修真院官網(wǎng)js任務5，深度思考中的知識點——什么是AJAX甫贯？
1.背景介紹
什么是Ajax吼鳞？
Ajax的全稱是Asynchronous JavaScript and XML 中文名稱定義為異步的JavaScript和XML。
Ajax的概念由杰西·詹姆士·賈瑞特所提出叫搁，該技術的出現(xiàn)改變了古老的赖条，用戶請求——等待——響應這種web交互模式。
Ajax是Web2.0技術的核心常熙。由多種技術集合而成纬乍，使用Ajax技術不必刷新整個頁面，只需對頁面的局部進行更新裸卫，可以節(jié)省網(wǎng)絡帶寬仿贬，提高頁面的加載速度，從而縮短用戶等待時間墓贿，改善用戶體驗
2.知識剖析
傳統(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引擎允許用戶和服務器進行異步的交互覆醇。用戶無需傻乎乎的盯著空白頁面朵纷。
3.常見問題
1、IE瀏覽器下面的緩存問題
2永脓、跨域問題
3袍辞、Ajax亂碼問題
4、使用post提交的時候需要設置content-type為"application/x-www-form-urlencoded"
5憨奸、Ajax對象屬性的大小寫問題
6革屠、Ajax狀態(tài)為0的問題
4.解決方法
1.IE瀏覽器下面的緩存問題：
在IE瀏覽器下面使用get請求時凿试，如果第一次請求了數(shù)據(jù)之后IE會自動緩存數(shù)據(jù)排宰，如果下一次再發(fā)送同樣的請求的時候瀏覽器會自動先去找緩存顯示出來，所以如果請求的數(shù)據(jù)有變化的時候那婉，這里是看不到變化的板甘。
解決辦法：
xhr.open("get","xxxx.aspx?_dc="+newDate().getTime(),true);
就是在請求的后面 加上_dc=...讓url變成唯一，或者是详炬，改成post請求盐类。
2.跨域問題：
這是我們目前見到的最多的，也是最熟悉的一個問題呛谜。本地上面直接采用Nginx跨域?qū)崿F(xiàn)在跳。在服務器上的話，也可以用Nginx隐岛。注意 Nginx跨域可以同時配置多個接口的猫妙，就是多寫幾個location就好了，然后location后面帶的參數(shù)不一樣就可以了聚凹。
3.Ajax亂碼問題
亂碼問題雖然我們目前遇到的不多割坠，但是也屬于比較常見的一個問題了。出現(xiàn)的主要原因就是編碼不一致導致的妒牙。如果出現(xiàn)亂碼問題了彼哼，首先檢查一下meta聲明的charset要和請求的頁面返回的charset一致。response.charset="gb2312 or utf-8"
4.使用post提交的時候需要設置
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下是成立的，但是在ff下就行不通了篓吁，因為IE不區(qū)分大小寫茫因，ff是區(qū)分大小的。標準寫法為if (xhr.readyState==4)杖剪，同理還有屬性responseText冻押，responseXML。
習慣采用駝峰形式的寫法可以避免這個問題盛嘿。
6.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)一致。這個我們提前就跟后端對接好了芥炭，問題也不大漓库。
5.編碼實戰(zhàn)
jQuery方法
AngularJS方法
Javascript原生方法
6.拓展思考
AngularJS請求的時候,success()和then()方法的區(qū)別?
then()方法與其他兩種方法的主要區(qū)別是，它會接收到完整的響應對象园蝠，信息更為全面渺蒿，而success()和error()則會對響應對象進行析構，使用起來更為方便彪薛。
7.參考文獻
參考一：什么是跨域
參考二：AngularJS中then和success的區(qū)別
參考三：Ajax常見問題
8.更多討論
常見的異步操作有哪些茂装？
密碼: pf7s
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊善延、轉(zhuǎn)發(fā)少态、留言、拍磚~
技能樹.IT修真院
“我們相信人人都可以成為一個工程師易遣，現(xiàn)在開始彼妻，找個師兄，帶你入門训挡，掌控自己學習的節(jié)奏澳骤，學習的路上不再迷茫”澜薄。
這里是技能樹.IT修真院为肮，成千上萬的師兄在這里找到了自己的學習路線，學習透明化肤京，成長可見化颊艳，師兄1對1免費指導茅特。快來與我一起學習吧~
我的邀請碼：12361358棋枕，或者你可以直接點擊此鏈接：http://www.jnshu.com/login/1/12361358
