Java Ajax入門

本文轉載自查看原文 2019-09-24 00:18 349 Java基礎

接下來整理一下Ajax相關的內容，AJAX（asynchronous js and xml），即異步的JavaScript和xml，它的主要作用就是讓頁面不必等待服務器返回整個頁面信息，而可以通過異步的方式給服務器發送數據和獲取數據，對頁面進行局部刷新，是一種提高用戶體驗的技術。

同步和異步

同步和異步的主要區別如下；

（1）同步：一個響應結束后才能發送下一個請求，頁面在請求期間不能做其他事情。

（2）異步：不必等待一個響應結束，可以異步的給服務器發送請求，頁面在異步請求期間可以繼續操作，可以對頁面進行局部刷新。

異步是一種提高用戶體驗的技術，它可以減輕服務器的壓力，減少網絡傳輸，但是另外一方面可能會無端增加無效請求，反倒給服務器造成壓力，因此異步技術也是一個雙刃劍。

Ajax的使用

Ajax的使用，本質是使用XmlHttpRequest對象給服務器發送請求和獲取數據，通過JavaScript和JQuery都可以使用它，下面簡單的介紹下如何使用Ajax。

JavaScript方法

（1）獲取Ajax對象

JavaScript獲取Ajax對象，需考慮到不同版本的瀏覽器獲取的方式，現在主流瀏覽器是內置了XmlHttpRequest對象的，可以直接獲取到，下圖就是在chrome瀏覽器console控制台直接獲取的方式，可以看到可以正常獲取。IE瀏覽器比較麻煩一點，具體參考如下代碼。

獲取XmlHttpRequest的js腳本。

 1 /*獲取XmlHttpRequest*/
 2 function getAjax(){
 3     var xmlHttpRequest;
 4     /*如果是chrome，火狐，safari，IE7以上等主流瀏覽器*/
 5     try{
 6         xmlHttpRequest=new XMLHttpRequest();
 7     }catch (e) {
 8         try{
 9             /*是否是IE6*/
10             xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
11         }catch (e) {
12             try{
13                 /*IE5或者更早版本*/
14                 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
15             }catch(e){
16                 /*拋出異常提示*/
17                 alert("不存在XmlHttpRequest的瀏覽器");
18                 throw e;
19             }
20         }
21     }
22     //將對象返回
23     return xmlHttpRequest;
24 }

測試html頁面，用來測試獲取ajax對象。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>使用JavaScript測試AJAX</title>
 6     <!--引入ajax腳本-->
 7     <script type="text/javascript" src="js/ajaxjs.js"></script>
 8     <script>
 9         function getAjaxObject(){
10             /*直接調用腳本*/
11             var ajaxObject=getAjax();
12             alert(ajaxObject);
13         }
14     </script>
15 </head>
16 <body>
17  <h3>獲取XmlHttpRequest</h3>
18  <input type="button" onclick="getAjaxObject()" value="點擊測試獲取ajax對象"></input>
19 </body>
20 </html>

IE瀏覽器結果

火狐瀏覽器結果

chrome瀏覽器器結果

（2）使用Ajax對象給服務器發送請求，在上面頁面基礎上，發送一個請求給服務器，服務器接收到異步請求后，返回給頁面一個信息。需要完成以下步驟：

step1 打開與服務端的連接，使用XmlHttpRequest.open(method,url,async)方法

step2 發送請求，使用XmlHttpRequest.setRequestHeader("Content-Type","appliction/x-www-form-urlencoded")，並XmlHttpRequest.send()發送數據

step3 注冊監聽，使用onreadystatechange狀態的變化，會調用函數里的方法，並在函數里對狀態進行判斷，當readyState==4並且status==200時，才對頁面做出處理。

其中readyState有5個狀態，主要用的就是狀態4，status就是狀態行的狀態碼，如果200代碼返回OK。

0狀態: 表示剛創建XMLHttpRequest對象, 還未調用open()方法

1狀態: 表示剛調用open()方法, 但是還沒有調用send()方法發送請求

2狀態: 調用完了send()方法了, 請求已經開始

3狀態: 服務器已經開始響應, 但是不代表響應結束

4狀態: 服務器響應結束!(通常我們只關心這個狀態)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>使用JavaScript測試AJAX</title>
 6     <style type="text/css">
 7         div{
 8             border: 1px solid dimgrey;
 9             width: 350px;
10             height: 50px;
11             margin-top: 10px;
12             text-align: center
13         }
14     </style>
15     <!--引入ajax腳本-->
16     <script type="text/javascript" src="js/ajaxjs.js"></script>
17     <script>
18         /*獲取一個ajax對象*/
19         function getAjaxObject(){
20             /*直接調用腳本*/
21             var ajaxObject=getAjax();
22             alert(ajaxObject);
23         }
24         /*發送請求給服務器*/
25         function sendRequest(){
26             /*1 打開與服務器的連接*/
27             var jsRequest=getAjax();
28             /**
29              * open(method,url,async) method即提交方式，一般為GET和POST,url為提交的地址，async代表是否異步(true)還是同步(false)
30              */
31             jsRequest.open("GET","/day11-servletConfigContext/GetAjaxResponse?username=clyang&password=123",true);
32             /*2 發送請求*/
33             //通知服務器發送的數據是請求參數
34             jsRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
35             jsRequest.send();
36             /*3 注冊監聽*/
37             jsRequest.onreadystatechange=function () {
38                 //確認readyState和status
39                 if(jsRequest.readyState==4){
40                     if(jsRequest.status==200){
41                         //得到響應參數,將參數顯示在div中
42                         var result=jsRequest.responseText;
43                         var mydiv= document.getElementById("mydiv");
44                         mydiv.innerText=result;
45                     }
46                 }
47             }
48         }
49     </script>
50 </head>
51 <body>
52  <h3>獲取XmlHttpRequest</h3>
53  <input type="button" onclick="getAjaxObject()" value="點擊測試獲取ajax對象"></input>
54  <input type="button" onclick="sendRequest()" value="發送請求給服務器獲取返回數據">
55  <div id="mydiv"></div>
56 </body>
57 </html>

發送GET請求后服務器端，多次異步請求，服務端都處理了。

點擊第二個按鈕后頁面顯示

可以看出通過JavaScript和ajax可以正常發送異步請求。

JQuery方法

使用JavaScript方法來發送異步請求比較繁瑣，如果是JQuery的話代碼會相對簡單，下面使用JQuery實現上面同樣的需求，依然在上面的html代碼中進行擴展。

（1）$.ajax，執行異步AJAX請求，語法格式如下：

$.ajax(url,[data],[async],[callback])，具體參數如下：

url：發送請求地址

data：發送的數據，較為常用的就是Json

async：true異步，false同步

type：提交方式，一般選擇POST或GET

success：請求成功后要執行的函數，函數參數就是服務器返回的數據，可以對數據進行處理添加到元素上去。

error：請求失敗后要執行的函數

 1         /*$.ajax*/
 2         function jqueryAjax1(){
 3             $.ajax({
 4                 "url":"/day11-servletConfigContext/GetAjaxResponse",
 5                 "data":{"username":"clyang","password":"123"},
 6                 /*"dataType":"json",*/
 7                 "type":"GET",
 8                 success: function(result){
 9                     $("#mydiv2").text(result+"來自按鈕1");
10                 },
11                 error:function (e) {
12                     alert(e);
13                 }
14             });
15         }

（2）$.get或$.post，使用AJAX的HTTP GET/POST請求從服務器加載數據，語法格式如下：

$.get(url,[data],[callback])，具體參數解釋參考上面$.ajax。

1         /*$.get*/
2         function jqueryAjax2(){
3             var url="/day11-servletConfigContext/GetAjaxResponse";
4             var data={"username":"clyang","password":"123"};
5             $.get(url,data,function(result){
6                 $("#mydiv2").text(result+"來自按鈕2");
7             });
8         }

（3）$(selector).load，從服務器加載數據，並把返回的數據放置到指定的元素中，語法格式如下：

$(selector).load(url,data,callback)，這個可以用在注冊提示用戶已登錄，將結果直接回顯到當前元素上面。

1         /*$(selector).load*/
2         function jqueryAjax3(){
3             var url="/day11-servletConfigContext/GetAjaxResponse";
4             var data={"username":"clyang","password":"123"};
5             $("#mydiv2").load(url,data,function(result){
6                 /*默認會自動將服務器返回的結果加載到元素上*/
7                 alert(result);
8             });
9         }

整體測試代碼

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>使用JavaScript/JQuery測試AJAX</title>
  6     <style type="text/css">
  7         div{
  8             border: 1px solid dimgrey;
  9             width: 350px;
 10             height: 50px;
 11             margin-top: 10px;
 12             text-align: center
 13         }
 14     </style>
 15     <!--引入ajax腳本-->
 16     <script type="text/javascript" src="js/ajaxjs.js"></script>
 17     <script>
 18         /*獲取一個ajax對象*/
 19         function getAjaxObject(){
 20             /*直接調用腳本*/
 21             var ajaxObject=getAjax();
 22             alert(ajaxObject);
 23         }
 24         /*發送請求給服務器*/
 25         function sendRequest(){
 26             /*1 打開與服務器的連接*/
 27             var jsRequest=getAjax();
 28             /**
 29              * open(method,url,async) method即提交方式，一般為GET和POST,url為提交的地址，async代表是否異步(true)還是同步(false)
 30              */
 31             jsRequest.open("GET","/day11-servletConfigContext/GetAjaxResponse?username=clyang&password=123",true);
 32             /*2 發送請求*/
 33             //通知服務器發送的數據是請求參數
 34             jsRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 35             jsRequest.send();
 36             /*3 注冊監聽*/
 37             jsRequest.onreadystatechange=function () {
 38                 //確認readyState和status
 39                 if(jsRequest.readyState==4){
 40                     if(jsRequest.status==200){
 41                         //得到響應參數,將參數顯示在div中
 42                         var result=jsRequest.responseText;
 43                         var mydiv= document.getElementById("mydiv");
 44                         mydiv.innerText=result;
 45                     }
 46                 }
 47             }
 48         }
 49     </script>
 50     <!--引入JQuery-->
 51     <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
 52     <!--使用JQuery完成js的需求-->
 53     <script type="text/javascript">
 54         /*$.ajax*/
 55         function jqueryAjax1(){
 56             $.ajax({
 57                 "url":"/day11-servletConfigContext/GetAjaxResponse",
 58                 "data":{"username":"clyang","password":"123"},
 59                 /*"dataType":"json",*/
 60                 "type":"GET",
 61                 success: function(result){
 62                     $("#mydiv2").text(result+"來自按鈕1");
 63                 },
 64                 error:function (e) {
 65                     alert(e);
 66                 }
 67             });
 68         }
 69         /*$.get*/
 70         function jqueryAjax2(){
 71             var url="/day11-servletConfigContext/GetAjaxResponse";
 72             var data={"username":"clyang","password":"123"};
 73             $.get(url,data,function(result){
 74                 $("#mydiv2").text(result+"來自按鈕2");
 75             });
 76         }
 77         /*$(selector).load*/
 78         function jqueryAjax3(){
 79             var url="/day11-servletConfigContext/GetAjaxResponse";
 80             var data={"username":"clyang","password":"123"};
 81             $("#mydiv2").load(url,data,function(result){
 82                 /*默認會自動將服務器返回的結果加載到元素上*/
 83                 alert(result);
 84             });
 85         }
 86     </script>
 87 
 88 </head>
 89 <body>
 90  <!--<h3>獲取XmlHttpRequest</h3>
 91  <input type="button" onclick="getAjaxObject()" value="點擊測試獲取ajax對象"></input>
 92  <input type="button" onclick="sendRequest()" value="發送請求給服務器獲取返回數據"></input>
 93  <div id="mydiv"></div>-->
 94  <h3>使用JQuery來使用XmlHttpRequest</h3>
 95  <input type="button" onclick="jqueryAjax1()" value="使用$.ajax"></input>
 96  <input type="button" onclick="jqueryAjax2()" value="使用$.get"></input>
 97  <input type="button" onclick="jqueryAjax3()" value="使用$(selector).load"></input>
 98  <div id="mydiv2"></div>
 99 </body>
100 </html>

View Code

測試結果，三種方式均可以發送異步請求，這是只放一個按鈕1的執行結果。

以上是對Ajax的部分總結，它有兩種方式可以使用，實際開發中一般使用JQuery來使用。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AJAX入門介紹 ajax基礎入門 Dojo入門：增強的Ajax功能 ASP.NET Ajax入門 ajax與java后台交互 java web 之 AJAX用法 JAVA中AJAX的使用 Java實現ajax java+ajax實例 Java入門