018-AJAX異步請求XMLHttpRequest

時間 2019-11-12

原文原文鏈接

建立XMLHttpRequest對象html

1、先來建立XMLHttpRequest對象
在IE、Firefox、safari和Opera中建立該對象的JavaScript代碼爲：
var xhr = new XMLHttpRequest();
在IE5/6中代碼爲：
var xmlRequest = new ActiveXObject(「Microsoft.XMLHTTP」);
注意，JavaScript區分大小寫。node

設置異步對象參數併發送請求ajax

2、爲XMLHttpRequest對象設置請求參數
1.GET方式
1.1設置參數
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式請求能夠設置瀏覽器不使用緩存xhr.setRequestHeader("If-Modified-Since", "0");
1.3發送: xhr.send(null);//GET方式
2.POST方式： 1.1設置參數：xhr.open("POST", "GetAreasByAjax.aspx", true); 1.2添加請求頭：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
1.3發送：xhr.send("isAjax=1&na=123");//POST方式json

設置回調函數跨域

異步使用XMLHttpRequest對象
異步使用XMLHttpRequest對象時，必須使用：onreadystatechange事件。
使用模式應該是：
建立該對象；-new
設置onreadystatechange事件觸發一個回調函數; -onreadystatechagne
打開請求；-open
發送請求；-send
注：在回調函數中檢查readyState屬性，看數據是否準備就緒(是否等於4)。
若是沒有準備好，隔一段時間再次檢查。由於數據沒有下載完時，咱們沒法使用它的屬性和方法。
若是已經準備好，就繼續往下執行；瀏覽器

編寫回調函數緩存

1.在xhr.send以前添加設置回調函數代碼：
xhr.onreadystatechange = watching;
2.回調函數安全

1 function watching() {
2        if (xhr.readyState == 4) {//請求狀態
3            if (xhr.status == 200) {//服務器返回的狀態碼
4                var msg = xhr.responseText; //服務器返回的字符串
5            } else alert("服務器錯誤!" + ajaxH.status);
6        }
7 }

判斷時注意，要：xhr.readyState == 4&&xhr.status == 200，不要xhr.status == 200&&xhr.readyState == 4服務器

異步對象readyState屬性併發

readyState屬性指出了XMLHttpRequest對象在發送/接收數據過程當中所處的幾個狀態。XMLHttpRequest對象會經歷5種不一樣的狀態。
0：未初始化。new完後;
1：已打開。對象已經建立並初始化，但還未調用send方法
2：已發送。已經調用send 方法，但該對象正在等待狀態碼和頭的返回；
3：正在接收。已經接收了部分數據，但還不能使用該對象的屬性和方法，由於狀態和響應頭不完整；
4：已加載。全部數據接收完畢

XMLHttpRequest對象屬性

1、onreadystatechange屬性，設置回調函數。
2、readyState屬性，獲取當前XMLHttpRequest對象執行的狀態：
1> 0表示以建立XMLHttpRequest對象，可是尚未初始化，即沒有調用open()方法設置XMLHttpRequest對象。
2>1表示建立了XMLHttpRequest對象，而且調用了open()方法進行初始化，可是尚未調用send()方法。
3>3表示瀏覽器正在接受服務器的響應數據。
4>全部數據已經被接受完畢。
3、status屬性，服務器返回的http狀態碼。（>=200 and <300、304未修改，讀取緩存。都表示成功）
4、statusText屬性，服務器返回的狀態碼對應的友好的文字說明，好比200對應的OK.
5、responseText屬性，以字符串方式獲取服務器對客戶端的響應。
6、responseXml屬性，當請求的是一個xml文件時，或者響應頭中Content-Type爲：text/xml或application/xml時，返回一個XmlDocument對象（Dom節點對象），支持標準的dom的成員，好比：childNodes、documentElement、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、parentNode、doctype等。

XMLHttpRequest對象經常使用方法

1、open("get","url",true)初始化，若是第三個參數爲false,則js等待請求完畢後纔會繼續執行。
2、setRequestHeader("","")增長http請求頭信息。在open()以後，send()以前調用。
3、send(null);發送請求。send()方法的參數表示爲在請求報文體中發送的數據內容。爲了最大化的瀏覽器兼容問題，若是沒有請求報文體就傳遞null。get請求沒有請求報文體，因此通常爲null。使用post請求時才須要設置報文體。
4、getResponseHeader("Content-Type"),根據響應的報文頭得到報文內容。
5、getAllResponseHeaders();獲取全部的響應報文頭內容。
6、abort();取消當前的http請求，取消以後若是要從新發起請求，建議從新建立一個XMLHttpRequest對象。

Ajax使用注意

xhr只能向同一個域中的相同端口號、相同協議的url發起請求，不能跨域,不然會引發錯誤。
爲了瀏覽器兼容,get請求時最好爲send()傳遞null參數。
在建立了xhr對象後馬上設置onreadystatechange事件，這樣就能監視到全部的狀態。若是不須要監視其餘狀態只監視readyState==4的狀態則能夠在send()以後設置。
get請求時，請求中的QueryString的參數名稱與參數值最好使用encodeURIComponent()進行編碼。不然在某些瀏覽器下沒法獲取該值，好比IE.
post請求時，爲了像表單那樣提交數據須要設置請求的Content-Type爲：application/x-www-form-urlencoded。send("鍵=值&鍵=值")
解析json格式時eval("("+json+")")。但有安全性問題。

-》使用post方式提交
須要設置頭信息：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-》若是中文亂碼的解決：
在客戶端使用window.encodeURIComponent()進行編碼
在服務器端使用Server.UrlDecode()進行解碼

GetTime.html

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script>
 7         window.onload = function () {
 8             var btnGetTime = document.getElementById('btnGetTime');
 9             btnGetTime.onclick = function () {
10                 var showTime = document.getElementById('showTime');
11                 showTime.innerHTML = '<img src="images/loading.gif"/>';
12                 //一、建立對象
13                 var xhr = new XMLHttpRequest();
14                 //二、打開鏈接
15                 //xhr.open('get', 'GetTime.ashx?title=xlb', true);
16                 xhr.open('post', 'GetTime.ashx');
17                 //三、配置
18                 xhr.onreadystatechange = function () {
19                     //若是成功返回則展現
20                     if (xhr.readyState == 4) {//通訊成功
21                         if (xhr.status == 200) {//服務器成功返回信息
22                             showTime.innerHTML = xhr.responseText;
23                         }
24                     }
25                 };
26                 //四、發送
27                 //xhr.send(null);//當使用get請求時，最好設置爲null
28 
29                 //以post方式發送請求
30                 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
31                 xhr.send('title=yg');
32             };
33         };
34     </script>
35 </head>
36 <body>
37     <input type="button" id="btnGetTime" value="獲取當前時間" />
38     <div id="showTime"></div>
39 </body>
40 </html>

GetTime.ashx

 1     public class GetTime : IHttpHandler
 2     {
 3 
 4         public void ProcessRequest(HttpContext context)
 5         {
 6             //Thread.Sleep(5000);
 7             string title = context.Request["title"];
 8 
 9             context.Response.ContentType = "text/plain";
10             context.Response.Write(DateTime.Now.ToString() + "_" + title);
11         }
12 
13         public bool IsReusable
14         {
15             get
16             {
17                 return false;
18             }
19         }
20     }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。