使用 XMLHttpRequest實現Ajax

時間 2019-11-08

標籤使用 xmlhttprequest 實現 ajax 欄目 Ajax 简体版

原文原文鏈接

【XMLHttpRequest的概述】

1.XMLHttpRequest最先是在IE5中以ActiveX組件的形式實現的。非W3C標準javascript

2.建立XMLHttpRequest對象（因爲非標準因此實現方法不統一）java

--Internet Explorer把XMLHttpRequest實現爲一個ActiveX對象，程序員

--其餘瀏覽器（火狐，Safari，...）把它實現爲一個本地的JavaScript對象，瀏覽器

--XMLHttpRequest在不一樣瀏覽器上的實現是兼容的，因此能夠用一樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例建立的方法是什麼。緩存

【建立XMLHttpRequest對象】

爲了每次寫Ajax的時候都節省一點時間，能夠把對象檢測的內容打包成一個可複用的函數：服務器

1 function getHTTPObject(){
2      var xhr = false;
3      if(window.XMLHttpRequest){
4             xhr = new XMLHttpRequest();
5      }else if(window.ActiveXObject){
6             xhr = new ActiveXObject("Microsoft.XMLHTTP");
7      }
8      return xhr;
9 }

說明：對window.XMLHttpRequest的調用會返回一個對象或null，if語句會把調用返回的結果看做是true或false（若是返回對象則爲true，返回null則爲false）。若是XMLHttpRequest對象存在，則把xhr的值設爲該對象的新實例。若是不存在，就去檢測ActiveObject的實例是否存在，若是答案是確定的，則把微軟XMLHTTP的新實例賦給xhr。app

【發送請求】

1.利用XMLHttpRequest實例與服務器進行通訊包含如下3個關鍵部分：

--onreadystatechange事件處理函數異步

--open方法jsp

--send方法async

實踐：

首先，建立一個動態項目工程，

index.jsp：

1 <body>
2 
3   <a href="HelloAjax.txt">Hello Ajax</a>
4 
5 </body>

HelloAjax.txt：

內容爲：Hello Ajax!

運行：

點擊「Hello Ajax」，

則會跳到He'llAjax.txt。

下面，用Ajax實現彈出這個內容。

 1 <script type="text/javascript">
 2    window.onload = function(){
 3        //1.獲取a節點，並對其添加  onclick  響應函數
 4        document.getElementByTagName("a")[0].onclick = function(){
 5            
 6            //3.建立一個XMLHttpRequest 對象
 7            var request = new XMLHttpRequest();
 8            
 9            //4.準備發送請求的數據：url
10            var url = this.href;
11            var method = "GET";
12            
13            //5.調用XMLHttpRequest 對象 的open 方法
14            request.open(method,url);
15            
16            //6.調用XMLHttpRequest 對象 的send方法
17            request.send(null);
18            
19            //7.爲XMLHttpRequest 對象添加 onreadystatechange響應函數
20            request.onreadystatechange = function(){
21                //8.判斷響應是否完成：XMLHttpRequest 對象的readyState屬性值爲 4 的時候
22                if(reuqest.state == 4){
23                  //9.再判斷響應是否可用：XMLHttpRequest 對象 status 屬性值 爲200
24                    if(request.status == 200 || request.status == 304){
25                      //10.打印響應結果:responseText
26                      alert(request.responseText);
27                    }
28                }
29            }
30            //2.取消 a 節點的默認行爲
31            return false;
32        }
33    }
34 
35 </script>
36 </head>
37 <body>
38 
39   <a href="HelloAjax.txt">Hello Ajax</a>
40 
41 </body>