大家好，我是IT修真院北京總院第21期的學員楊夢桐，今天這篇文章主要總結了ajax的內容
1. 什么是Ajax
AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
Ajax的概念由杰西·詹姆士·賈瑞特所提出，該技術的出現改變了古老的用戶請求——等待——響應這種web交互模式。
通過在后臺與服務器進行少量數據交換，Ajax可以使網頁實現異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
而傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。
使用Ajax技術，可以節省網絡帶寬，提高頁面的加載速度，從而縮短用戶等待時間，改善用戶體驗。
2. Ajax與傳統工作方式的對比
a. 傳統的工作方式：傳統的web應用程序中，用戶向服務器發送一個請求，然后等待，服務器接受到用戶的請求然后響應。在這段時間內，頁面會進行整體刷新，產生一個等待新頁面加載完成的時間，這是因為這種傳輸方式為同步處理方式。長久以來我們對這種web交互模式已經習慣了，并且以使用者的角度來講已經覺得是理所當然的事情了。
b. Ajax的工作方式：和傳統的web應用不同，Ajax采取了異步交互避免了用戶請求-等待-應答交互方式的缺點。
Ajax在應用程序和服務器中引入了一個中間層---Ajax引擎，它是用Javascript編寫的，在一個隱藏的框架中運行。Ajax引擎負責呈現用戶界面，以及代表用戶和服務器進行交互。Ajax引擎允許用戶和服務器進行異步的交互。用戶無需等待頁面的整體重新加載。
3. Ajax會涉及到的問題和解決方案
a. 緩存問題
在IE瀏覽器下面使用get請求時，如果第一次請求了數據之后IE會自動緩存數據，如果下一次再發送同樣的請求的時候瀏覽器會自動先去找緩存顯示出來，所以如果請求的數據有變化的時候，這里是看不到變化的。
解決辦法：
//xhr.open("get","xxxx.aspx?_dc="+new Date().getTime(),true);
就是在請求的后面 加上時間戳或是隨機數，讓url變成唯一，或者是，改成post請求。
b. 跨域問題
這是我們目前見到的最多的，也是最熟悉的一個問題。本地上面直接采用Nginx跨域實現。在服務器上實現跨域，可以通過后端達成，可參考《跨域有幾種處理方式？》：http://www.cnblogs.com/fanyx/p/5775939.html
注意 Nginx跨域可以同時配置多個接口的，就是多寫幾個location就好了，然后location后面帶的參數不一樣就可以了。
c. Ajax亂碼問題
亂碼問題雖然我們目前遇到的不多，但是也屬于比較常見的一個問題了。出現的主要原因就是編碼不一致導致的。
如果出現亂碼問題了，首先檢查一下meta聲明的charset要和請求的頁面返回的charset一致。response.charset="gb2312 or utf-8"
d.使用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()方法之前調用
e. Ajax對象屬性的大小寫問題
有些瀏覽器比如火狐，對大小寫是敏感的，if (xhr.readystate==4)這種寫法，在IE下是成立的，但是在Firefox下就行不通了，因為IE不區分大小寫，Firefox是區分大小的。標準寫法為if (xhr.readyState==4)，同理還有屬性
responseText，responseXML。
習慣采用駝峰形式的寫法可以避免這個問題。
f. Ajax狀態0的問題
有時候在測試Ajax代碼的時候加了 ?xhr.status==200的判斷后，一直不執行xhr.status==200的代碼，這個就需要注意了。xhr.status==200是要通過服務器確認后來返回的，在服務器頁面沒有發生錯誤或者轉向時才返回200狀態的，此狀態和你通過瀏覽器訪問頁面時服務器定義的狀態一致。這個我們提前就跟后端對接好了，問題也不大。
4. Ajax的實際書寫方式
a. jquery方法
//$.ajax({
//url:"student-ajax/student",
//type:"POST",
//dataType:"json",
//data:{
//name:$("#names").val(),
//qq:$("#QQs").val(),
//},
//success:function(data){
//console.log(data);
//if(data.code === 200){
//alert($("#names").val() + "學員信息" +data.message);
//}else{
//alert(data.message);
//}
//},
//error:function(data){
//console.log(data);
//alert("添加失敗");
//}
//});
//}) ;
b. angularjs方法
//$http({
//method:'get',
//url:('/a/a/all/document?type=1&page='+$scope.page),
//headers:{'Content-Type':'application/x-www-form-urlencoded'}
//})
//.success(function (response) {
//console.log(response.total);
//console.log(response);
// if (response.message === "查詢成功") {
//$scope.userList = response.data;
//$scope.userTotal = response.total;
//$scope.page=response.page;
// console.log($scope.userList.total);
//});
c. JavaScript原生
//var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象;
//request.onreadystatechange = function () { // 狀態發生變化時，函數被回調;
//if (request.readyState === 4) { // 成功完成
// 判斷響應結果:
//if (request.status === 200) {
// 成功，通過responseText拿到響應的文本:
//return success(request.responseText);
//} else {
// 失敗，根據響應碼判斷失敗原因:
//return fail(request.status);
//}
//} else {
// HTTP請求還在繼續...
//}
//}
ppt鏈接：https://ptteng.github.io/PPT/PPT/js-05-HowusePostman.html
視頻鏈接：https://v.qq.com/x/page/f0533viwzwe.html
拓展問題
1. 異步更新有可能的報錯
實際上在異步更新上，有可能因為請求速度導致存在先后順序的內容更新不出來，可以將異步改成同步，就解決了這個問題
2. ajax為什么會亂碼
這個和字符庫有關，一般來說使用的字符庫是utf-8，或者是gb2312，如果用記事本打開會產生ANSI的字符庫，有可能導致亂碼
3. success（）和then（）的區別
要將區別先弄清$http服務，它是對原生XMLHttpRequest對象的簡單封裝，是只能接受一個參數的方法，這個方法會返回一個promise對象，具有sccess和error兩個方法。當然，我們也可以在響應返回時用then方法來處理，會得到一個特殊的參數，代表了對象的成功或失敗信息，或者可以使用success和error回調代替
這樣就很明晰了，then方法和success方法的主要區別就是，then方法會接受到完整的響應對象，信息更為全面，而success則會對響應對象進行析構，使用起來更為方便
由于在angularjs 1.5以后的版本里，更提倡使用then（），所以考慮在then里面進行if else判斷，就可以分析實際反饋的內容
