資訊專欄INFORMATION COLUMN
摘要：文章標題采用命名規范。所以，實際上是由微軟發明了。將用于處理請求的函數綁定在對象的事件上即可。代表異步，代表同步。首先，這個函數需要跟蹤請求的狀態變化。如果狀態返回值為，代表服務器響應完成，否則，你需要繼續跟蹤狀態。使用來判斷請求是否成功。
Ajax是啥文章標題采用BEM命名規范。
因為筆者想重新夯實一下技術，因此翻譯了MDN上的ajax介紹。英文原文
Ajax全名是Asynchronous javascript and xml，是一種利用xmlhttprequest對象與服務端腳本通信的機制。Ajax可以傳輸的數據格式包括JSON、XML、HTML和text文件。Ajax對Web應用帶來巨大的變革的主要原因是，Ajax支持異步，一個頁面可以在不進行整頁刷新的情況下進行局部元素刷新，這個機制使得Web應用的交互體驗更多的接近桌面應用。
Ajax的兩大特性：
不用刷新頁面即可向服務器請求數據
可以從服務端請求數據并進行處理
第一步：如何發起HTTP請求為了能夠通過javascript創建一個HTTP請求，你需要一個實現該功能的實體類，也就是XMLHttpRequest。一開始，由IE首先提出了一個叫做XMLHTTP的ActiveX 對象，然后火狐，safari和其他瀏覽器也開始在瀏覽器中內置XMLHttpRequest對象來實現XMLHttp的功能。所以，實際上是由微軟發明了XMLHttpRequest。
//僅用于表面兩者的關系，現在并不需要這樣，XMLHTTPRequest已經被所有瀏覽器支持
if(window.XMLHttpRequest){ httpRequest = new XMLHttpRequest(); } else if(window.ActiveXObject){ httpRequest = new ActiveXObject(); }
接下來，你需要決定請求到的數據，怎么處理。此時，你需要告訴XMLHttpRequest對象用什么js函數來處理訪問請求。將用于處理請求的函數綁定在xmlhttprequest對象的onreadystatechange事件上即可。
httpRequest.onreadystatechange = function(){ //這里放請求的處理邏輯。 }
現在，你可以開始發起請求了，請求對象的open和send方法可以用于發起請求。
httpRequest.open("Get","http://example.com",true);
httpRequest.send(null);open（）是Http請求方法，第一個參數為請求類型，例如GET、POST、HEAD等（為了保證每個瀏覽器都能識別，這里請使用大寫）。更多的Http請求信息請查看W3C specs
第二個元素是與請求的URL地址，切記不可跨域訪問。如果的確想跨域，請查看HTTP access control
第三個元素是控制是否是異步請求。TRUE代表異步，FALSE代表同步。
在使用POST請求時，你可以利用send（）方法發送數據，格式可以是XML、JSON、SOAP等，也可以是查詢字符串：
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
在發送請求前，你還需要設置一下請求的MIME類型。
httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
第二步 處理服務器返回
上面已經講了，你可以設置js方法來處理服務器請求。
httpRequest.onreadystatechange = nameOfTheFunction；
首先，這個函數需要跟蹤請求的狀態變化。如果狀態返回值為XMLHTTPRequest.DONE（4)，代表服務器響應完成，否則，你需要繼續跟蹤狀態。
if(httpRequest.readyState == XMLHttpRequest.DONE){
//返回數據接收到的處理流程
}else{
//請求還在繼續
}狀態通過readyState來跟蹤，狀態的枚舉值如下：
0(uninitialized)// 請求對象已經創建，尚未完成初始化（open方法還未調用）
1(loading)//open方法已經調用，send方法還未調用
2(loaded) //send方法已經調用，還沒獲取到數據返回
3(interactive) //一些數據已經返回，responseText還沒完全返回
4(complete) //說有請求數據已經返回
下一個事情，是需要檢查HTTP的服務端返回碼。使用200 ok來判斷請求是否成功。
if(httpRequest.status === 200){
//成功請求
}else{
//請求有問題，比如404（請求地址沒找到）500(內部服務器錯誤)
}所有的服務端返回碼請查看W3C site
現在，在你檢查完請求狀態和HTTP狀態碼后，你可以開始隨心所欲的處理請求數據了。你可以使用下面兩種數據模式：
httpRequest.responseText -以文本格式返回數據
httpRequest.responseXML -以XML對象形式返回數據，后續可以在JS中轉化為JS對象
注意：上面說的流程是異步流程，在同步流程中，不用這么麻煩，你可以在send（）方法后直接獲取請求數據。
第四步 示例示例項就不翻譯了，感興趣的童鞋可以查看原文示例
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81122.html
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
閱讀 1702·2021-11-18 10:02
閱讀 2218·2021-11-15 11:38
閱讀 2666·2019-08-30 15:52
閱讀 2190·2019-08-29 14:04
閱讀 3231·2019-08-29 12:29
閱讀 2086·2019-08-26 11:44
閱讀 994·2019-08-26 10:28
閱讀 830·2019-08-23 18:37
