Ajax服務要求原理 簡單總結

標籤：

　　剛開始以為Ajax是一種新的語言，接觸之後才知道，ajax是用於伺服器交換資料並更新部分網頁的Web應用程式的技術。

第一次看到Ajax請求代碼時，感覺一臉萌逼，這些代碼竟然把後台資料請求過來了，神奇啊。但是寫著寫著第二天再寫的時候發現，代碼一堆，根本沒記住。

　　沒想到好辦法，老辦法，抄了十來遍，其實也就是錢三遍在抄，後邊直接默寫出來了。這才捋順了思路。整理了一下想法，現在把這些想法分享一下。先把代碼獻上，雖然很俗套。

/**********請求流程************/1、建立請求對象 var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ var versionArr = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"]; for(var tempVersion of versionArr){ xhr = new ActiveXObject[tempVersion]; if(xhr){ break } }}else{     throw new Error("您的瀏覽器版本過低")} // 2建立串連xhr.open("GET","url") // 3發送請求xhr.send(null)// 4接收響應xhr.onreadystatechange = function(){     if(xhr.readyState == 4&& xhr.status ==200){ var rootObj = JSON.parse(xhr.responseText)……………………     } }

　　來，剛看完代碼，這裡先拋開代碼。就事論代碼，先從這件事開始，當你想要請求到後台資料，首先你能想到要去做什嗎？別說建立請求執行個體，一步一步按正常=邏輯倒著來。這時你應該想到肯定要先去發送請求了。那麼問題來了，從哪裡發送請求呢？這時候就要去想辦法找這個能發送請求的東西了，然而並沒有。這時候就要拿出曾經練得的一首好本領——造對象。沒有請求的執行個體，就要先造出來一個請求執行個體，這就是第一步，當然了，有了他就可以往下進行了，然而發送請求也並不是隨便就讓發的，就像打電話，首先你得去開啟電話，才可以去撥號聊天，這就是第二步，去開啟一個串連，然後再進行點擊撥號，發送出去你按下的號碼，這就是第三部，發送請求，接下來就要處理收到的回複了。

　　下面再一步一步簡單解析一下

建立XMLHttpRequest請求對象，Ajax編程是通過這個對象來進行的。
由於各大廠商瀏覽器對XMLHttpRequest對象支援不同，尤其是IE...這裡需要對不同瀏覽器版本進行相容考慮。
現在大部分主流瀏覽器都能夠支援XMLHttpRequest對象
直接使用 new XMLHttpRequest()作為請求對象;
下面是經典的IE6支援類型 new ActiveXObject("Msxml2.XMLHTTP");
最後是IE6以下支援類型new ActiveXObject("Microsoft.XMLHTTP");

當然了也有這些根本都不支援的頑固份子。。。。直接拋出錯誤給他們咯

 

然後就是開啟連結 open（method,url,flag） 參數method:GET 或者POST 參數url：請求伺服器的路徑 參數flag 是否非同步請求，現在一般都是非同步啦，不設定的話會預設非同步。

接下來是發送請求send() ，這裡要根據請求方式不同採取發送不同的請求，如果是GET請求，send方法內的參數寫一個null就行。但如果是post類型的請求，請求帶有參數的haunted。這個參數要寫到send方法內發送出去，另外還要佈建要求頭 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")要求標頭根據實際請求不同設定的類型頁不一樣，這裡唯寫一個簡單樣本。

　　最後一步就是接受伺服器響應 可以通過控制台或者警告框測試，會有四次輸出資訊，因此便有了幾種不同的對象狀態代碼：

0：未初始化完成，這時只是建立了XMLHttpRequest對象，未調用open方法
1：初始化已完成，請求開始，開始調用open方法，未調用send方法
2：請求發送，就是說已經調用了send方法
3：開始接收伺服器的響應。
4：讀取接收伺服器響應後返回的資料。（響應結束）

onreadystatechange事件會在234時被處罰。我們使用的時候一般只是關心第四部，到了第四部，才開始進行資料接收處理，當然了，進行到第四部也不一定意味著就大功告成了，還要看一下伺服器響應狀態；一般狀態代碼傳回值 200 404 500，

200是正常響應，還有令人頭疼的的404，找不到要訪問的網頁，最令人崩潰的就是500了，伺服器崩了。。。

這裡我們可以利用請求對象的status屬性查看伺服器狀態代碼；當進行到第四步且伺服器狀態代碼是200時，就是我們擷取到資料開始請求之時。

 

第一次發文章，不熟悉套路 ，有問題的話我上線會及時回複的。

Ajax服務要求原理 簡單總結