JSP／Servlet開發——第十章 Ajax與JQuery

時間 2020-05-29

標籤 jsp servlet 開發第十 ajax jquery 欄目 JSP 简体版

原文原文鏈接

一、 認識Ajax：javascript

◆在傳統的 Web 應用中，每次請求服務器都會生成新的頁面，用戶在提交請求後，老是要等待服務器的響應，若是前一個請求沒有獲得響應，則後一個請求就不能發送。 html

◆因爲這是一種獨佔式的請求，所以若是服務器響應沒有結束，用戶就只能等待或者不斷地刷新頁面，在等待期間，因爲新的頁面沒有生成，整個瀏覽器將是一片空白，而用戶只能繼續等待。對於用戶而言，這是一種不連續的體驗，同時，頻繁地刷新頁面也會使服務器的負擔加劇；java

◆Ajax技術正是爲了彌補以上不足而誕生的，Ajax 應用使用 JavaScript 異步發送請求，不用每次請求都從新加載頁面，發送請求時能夠繼續其餘的操做，在服務器響應完成後，再使用 JavaScrip將晌應展現給用戶；jquery

◆使用 Ajax技術從用戶發送請求到得到響應，當前用戶界面在整個過程當中不會受到干擾，並且咱們能夠在必要的時候只更新頁面的一小部分，而不用刷新整個頁面，即 ’無刷新’ 技術，這就避免了重複加載、浪費網絡資源的現象，提升了加載進度，這是無刷新技術的第一個優點；ajax

◆無刷新：不刷新整個頁面，只刷新局部數組

　　★無刷新的好處：瀏覽器

　　　　▲只更新部分頁面，有效利用帶寬服務器

　　　　▲提供連續的用戶體驗網絡

　　　　▲提供相似C/S的交互效果，操做更方便；app

◆Web 2.0的特色（全部操做都是在不刷新窗口的狀況下完成的）：用戶貢獻內容、內容聚合RSS 、更豐富的「用戶體驗」；

◆傳統的 Web 開發技術和 Ajax 技術的區別：

★不管使用哪一種開發技術，流程都是先由客戶端發送HTTP請求，而後由服器對請求生成響應。

差別	方式	說明
發送請求方式不一樣	傳統Web	瀏覽器發送同步請求
Ajax技術	異步引擎對象發送請求，經過 JavaScript的 XMLHttpRequest對象
服務器響應不一樣	傳統Web	服務器的響應內容是一個完整頁面
Ajax技術	服務器響應內容只是須要的數據
客戶端處理方式不一樣	傳統Web	需等待服務器響應完成並從新加載整個頁面後用戶才能進行操做
Ajax技術	能夠動態更新頁面中的部份內容，經過 JavaScdp動態更新頁面中須要更新的部分不影響用戶在頁面進行其餘操做

二、Ajax（異步刷新技術）簡介：

●Ajax (Asynchronous JavaScript and XNL) 並非一種全新的技術 . 而是由 JavaScript、XML、CSS等幾種現有技術整合而成。

●Ajax 的執行流程：用戶界面觸發事件調用 JavaScript , 經過 Ajax引擎——XMLHttpRequest 對象異步發送請求到服務器，服務器返回XML、JSON 或 HTML等格式的數據，而後利用返回的數據使用 DOM 和 CSS 技術局部更新用戶界面；

●工做流程如圖：

●Ajax的關鍵元素：

　　★JavaScript語言：Ajax技術的主要開發語言；

　　★XML / JSON / HTML等：用來封裝請求或響應的數據格式；

　　★DOM(文檔對象模型)：經過 DOM 屬性或方法修改頁面元素，實現頁面局部刷新；

　　★CSS：改變樣式，美化頁面效果，提高用戶體驗度；

　　★Ajax 引擎 ; 即 XMLHttpRequest 對象，以異步方式在客戶端與服務器端之間傳遞數據；

三、XMLHttpRequest對象：整個Ajax技術的核心，提供異步發送請求的能力；

●XMLHttpRequest 對象能夠在不刷新當前頁面的狀況下向服務器端發送異步請求，並接收服務器端的響應結果，從而實現局部更新當前頁的功能，儘管名爲XMLHttpRequest，但它並不限於和XML文檔一塊兒使用，它還能夠接收 JSON 或 HTML 等格式的文檔數據。 XMLHttpRequest 獲得了目前全部覽器的較好支持，但它的建立方式在不一樣瀏覽器下還具備必定的差異；

●建立 XMLHttpRequest 對象：

　　◆ 老版本 IE （IE 5和 IE 6)：

　　　　XMLHttpRequest =new ActiveXObject( "Microsoft.XMLHTTP)

　　◆新版本IE和其餘大部分瀏覽器(推薦使用):

　　　　XMLRttpRequest = new XMLHttpReqest()

●XMLHttpRequest 對象經常使用方法：

方法	說明
open( String method, String url, boolean async, String user, String password )	建立一個新的HTTP請求，參數method：設置HTTP的請求方法，如：POST、GET等，對大小寫不敏感；參數url：請求的URL地址；參數async：可選，指定此請求是否爲異步方法，默認爲true；參數user：可選，若是服務器須要驗證，此處須要指定用戶名，不然，會彈出，驗證的窗口；參數password：可選，驗證信息中的密碼，若是用戶名爲空，此值將被忽略；
send( String data )	發送請求到服務器端；參數data：字符串類型，經過此請求發送的數據，此參數取決於open方法中的method參數，若是method參數爲’POST’，能夠指定該參數，若是，method值爲」GET」,該參數的值爲null；
abort( )	取消當前請求
setRequestHeader(String header, String value )	設置請求的某個HTTP頭信息；參數header：要指定的HTTP頭名稱；參數value：要指定的HTTP頭名稱所對應的值；
getResponseHeader(String header)	獲取響應的指定HTTP頭信息；參數header：要獲取的HTTP頭；
getAllResponseHeader( )	獲取響應的全部HTTP頭信息

●XMLHttpRequest 對象經常使用屬性：

屬性名稱

說明

onreadystatechange

指定回調函數

readyState

XMLHttpRequest的狀態信息，返回請求的當前狀態；

0	XMLHttpRequest對象未完成初始化
1	XMLHttpRequest對象開始發送請求
2	XMLHttpRequest對象的請求發送完成
3	XMLHttpRequest對象開始讀取響應
4	XMLHttpRequest對象讀取響應結束

status

返回當前請求的HTTP的狀態碼；就緒狀態是4且狀態碼是200，表示正確完成；

狀態碼	說明
200	服務器正確返回響應
404	請求的資源不存在
500	服務器內部錯誤
403	沒有訪問權限
…	……

statusText

返回當前請求的響應狀態

responseText

以文本形式得到響應的內容

responseXML

以XML形式獲取響應值，而且解析成DOM對象返回；

四、 使用 Ajax 發送 GET 請求及處理響應：

●實現Ajax的過程分爲發送請求和處理響應兩個步驟，

　　◆發送請求能夠分爲兩種方式：即 GET 方式和 POST方式；

　　◆處理響應也分兩種方式：即處理文本響應和處理 XML 響應；

●使用XMLHttpRequest對象發送 GET 請求到服務器端，並處理文本方式響應，須要經過如下 4步驟實現：

　　（1）、建立 XMLHttpRequest對象。經過 window . XMLHttpRequeSt 的返回值判斷建立 XMLHttpRequest對象的方式；

　　（2）、設置回調函數，經過 onreadystatechange 屬性設置回調函數，其中回調函數須要自定義；

　　（3）、初始化XMLHttpRequest對象，經過 open ( ) 方法設置請求的發送方式和路徑；

（4）、發送請求；

eg：實現無刷新用戶名驗證：

　　◆當用戶名文本框失去焦點時，發送請求到服務器，判斷用戶名是否存在，若是已經存在提示「用戶名已被使用」，若是不存在則提示「用戶名可使用」；

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>註冊</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function validate() { var name = $("#name").val(); if (name == null || name == "") { $("#nameDiv").html("用戶名不能爲空！"); } else { //1.建立XMLHttpRequest對象
 xmlHttpRequest = createXmlHttpRequest(); //2.設置回調函數
 xmlHttpRequest.onreadystatechange = callBack; //3.初始化XMLHttpRequest組件
            var url = "userServlet?name=" + name;//服務器端URL地址,name爲用戶名文本框獲取的值
 xmlHttpRequest.open("GET", url, true); //4.發送請求
 xmlHttpRequest.send(null); /* 使用POST方式發送請求 var url = "userServlet";//服務器端URL地址 xmlHttpRequest.open("POST", url, true); xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = "name=" + name;//須要發送的數據信息,name爲用戶名文本框獲取的值 xmlHttpRequest.send(data); */
            //Ajax 回調函數
            function callBack() { if (xmlHttpRequest.readyState == 4
                        && xmlHttpRequest.status == 200) { var data = xmlHttpRequest.responseText; if (data == "true") { $("#nameDiv").html("用戶名已被使用！"); } else { $("#nameDiv").html("用戶名可使用！"); } } }//end of callBack()
 } }//end of validate()

    /* *建立XMLHttpRequest對象 */
    function createXmlHttpRequest() { if (window.XMLHttpRequest) {//返回值爲true時說明是新版本IE或其餘瀏覽器
            return new XMLHttpRequest(); } else {//返回值爲false時說明是老版本IE瀏覽器（IE5和IE6）
            return new ActiveXObject("Microsoft.XMLHTTP"); } } </script>
</head>
<body>
    <form action="" id="form1">
        <table>
            <tr>
                <td>用 戶 名：</td>
                <td><input type="text" name="name" id="name" onblur="validate();" />&nbsp;<font color="#c00fff">*</font></td>
                <td>
                    <div id="nameDiv" style="display: inline"></div></td>
            </tr>
        </table>
    </form>
</body>
</html>

import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); boolean used = false; if("ajax".equals(name)){ used = true; }else{ used = false; } response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out.print(used); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); this.doGet(request, response); } }

分析：

★步驟一：經過 window.XMLHttpRequest 的返回值判斷當前瀏覽器建立XMLHttpRequest對象的方式，若是爲 true, 說明是新版本 IE 或其餘瀏覽器；可使用 "new XMLHttpRequest()' 的方式創XMHttpRequest 對象；若是爲false 說明是老版本 IE 瀏覽器 (IE 5 和 IE 6) , 須要使用 ’new ActiveXObject( 'Microsoft . XMLHTTP「) 的方式建立 XMLHttpRequest 對象；

★步驟二：經過 XMLHttpRequest 對象的 onreadystatechange 屬性設置回調函數，監聽服務器的響狀態並作相應處理；

★步驟三：經過 XMLHttpRequest 對象的 open()方法,傳入參數完成初始化 XMLHttpRequest 對象的工做。其中，第一個參數爲 HTTP請求方式，這裏選擇發送 HTTP GET 請求。第二個參數爲要發送的URL請求路徑，由於採用「GET’ 方式請求 , 因此須要將要發送的數據附加到 URL 路徑後面；

★步驟四：調用 XMLHttpRequest 對象的 send ( ) 方法，參數爲要發送到服務器端的數據，由於採用GET方式請求時, 參數只能附加到 URL 路徑後面，因此這裏直接設爲 null便可，須要提醒的是，若是 send()方法不設值，在不一樣的瀏覽器下可能存在不兼容問題。例如,在 IE 中可以正常運行,在 Firefox 中卻不能，因此，建議最好設爲 null；

★執行完步驟四：這個異步請求的發送過程就結束了，可是如何知道這個請求是否發送成功，服務器是否成功返回數據，則須要在步驟二設置的回調函數中判斷。在回調函數中，使用 XMLHttpRequest對象的 readyState 屬性判斷當前請求的狀態，使用 status 屬性判斷當前請求的 HTTP狀態碼，當請狀態碼爲「4', 同時 HTTP 「200「時, 表示成功接收到服務器端發送的數據。這時就能夠用XMLHttpRequest對象的 responseText 屬性去獲取服務器端返回的文本格式數；

五、使用 Ajax 發送 GET 請求及處理響應：見上面示例註釋部分的紅色字體；

六、GET請求和POST請求的區別：

步驟	請求方式	實現思路和代碼
初始化組件（步驟三：初始化 XMLHttpRequest 對象）	GET	指定 XMLHttpRequest 對象的open( )方法中 method 參數爲 "GET「；xmlHttpRequest.open( "GET", url, true );
POST	指定 XMLHttpRequest 對象的open( )方法中 method 參數爲 "POST「；xmlHttpRequest.open( "POST", url, true ); 指定XMLHttpRequest對象要請求的HTTP頭信息，該HTTP頭信息爲固定寫法； xmlHttpRequest.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" );
發送請求(步驟四)	GET	指定 XMLHttpRequest 對象的 send()方法中的 data參數爲「 nul「；xmlHttpRequest.send( null );
POST	能夠指定 XMLHttpRequest 對象的 send()方法中data 參數的值，即該請求須要攜帶的具體數據，多個名/值對使用「&" 鏈接；xmlHttpRequest.send("key=xxx&type=12&year=2016" );

　　　◆注意：採用 GET 方式發送請求時，一般會將須要攜帶的參數附加在URL路徑後面一塊兒發送，xmlHttpRequest.send() 方法不能傳遞參數，data 參數設置爲null便可； 而採用 POST 方式發送請求時，則能夠在xmlHttpRequest.send()方法中指定傳遞的參數；

七、 使用 jQuery 實現 Ajax：

●傳統方式實現Ajax的不足：

　　★步驟繁瑣

　　★方法、屬性、經常使用值較多很差記憶

　　★處理複雜結構的響應數據（如XML格式）比較煩瑣

　　★瀏覽器兼容問題

●$.ajax()方法：能夠經過發送 HTTP請求加載遠程數據，是 jQuery 最底層的 Ajax 實現，具備較高靈活性；

　　 語法：$.ajax( [settings] ); //參數 settings 是$.ajax ( )方法的參數列表，用於配置 Ajax 請求的鍵值對集合;

　　　　★經常使用配置參數表:

參數	類型	說明
url	String	發送請求的地址，默認爲當前頁地址
type	String	請求方式，默認爲GET，1.9.01以後的版本可使用method代替type
data	PlainObject或 String或 Array	發送到服務器的數據
dataType	String	預期服務器返回的數據類型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	設置請求超時時間
global	Boolean	表示是否觸發全局Ajax事件，默認爲true
beforeSend	Function ( jqXHR jqxhr, PlainObject settings )	發送請求前調用的函數,可用於設置請求頭，返回false將終止請求；參數jqxhr：可選：jqXHR是XMLHttpRequest的超集；參數settings：可選：當前ajax()方法的settings對象；
success	Function( 任意類型 result, String textStatus, jqXHR jqxhr )	請求成功後調用的函數參數result：可選，由服務器返回的數據參數textStatus：可選，描述請求狀態的字符串；參數jqxhr：可選
error	Function ( jqXHR jqxhr, String textStatus, String errorThrown )	請求失敗時調用的函數參數：jqxhr：可選；參數textStatus：可選，錯誤信息；參數errorThroen：可選，文本描述的HTTP狀態；
complete	Function ( jqXHR jqxhr, String textStatus )	請求完成後（不管成功仍是失敗）調用的函數參數：jqxhr參數：可選；參數：textStatus：可選，描述請求狀態的字符串；

eg：使用$.ajax()發送異步請求：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>註冊</title>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript"> $(document).ready(function() { $("#name").blur(function() { var name = this.value; if (name == null || name == "") { $("#nameDiv").html("用戶名不能爲空！"); } else { $.ajax({ "url" : "userServlet", //要提交的URL路徑

                "type" : "GET", //發送請求的方式

                "data" : "name="+name, //要發送到服務器的數據

                "dataType" : "text", //指定返回的數據格式

                "success" : callBack, //響應成功後要執行的代碼

                "error" : function() { //請求失敗後要執行的代碼
 alert("用戶名驗證時出現錯誤，請稍後再試或與管理員聯繫！"); } }); //響應成功時的回調函數

                 function callBack(data) { if (data == "true") { $("#nameDiv").html("用戶名已被使用！"); } else { $("#nameDiv").html("用戶名可使用！"); } }//end of callBack()
 } });//end of blur()
 }); </script>

</head>

<body>

     <form action="" id="form1">

           <table>

                 <tr>

                       <td>用 戶 名：</td>

                       <td><input type="text" name="name" id="name" />&nbsp;<font color="#c00fff">*</font></td>

                       <td>

                            <div id="nameDiv" style="display: inline"></div></td>

                 </tr>

           </table>

     </form>

</body>

</html>

注意：$.ajax()方法的參數語法比較特殊。參數列表須要包含在一對花括號「{ }」之間，每一個參數以以"參數名「："參數值「的方式書寫；若有多個參數，以逗號「，」隔開；

分析：上面的代碼，它與原生 JavaScript 實現 Ajax 相比要簡潔清晰不少，只需設置幾個參數便可。其中， success 函數用來處理晌應，至關於原生 JavaScript 實現

Ajax 時，回調數中晌應成功的分支；error 函數則至關於錯誤分支，在該函數中執行程序出錯後的操做，如給出示信息等。另外，須要注意的是，不須要特別設定

的參數能夠省略；

技巧：

★1）、beforeSend回調函數除了能夠修改請求參數外，還能夠添加一些業務功能，以提高用戶體驗。例如，若是請求耗時較長，可在請求提交前顯示一條提示信息，提醒用戶正在處理中，以避免用戶認爲沒有響應而重複操做。

　　　　「beforeSend" : function(){

　　　　 $(「#loading」).show（）；//#loading 爲帶有提示信息的div元素；

　　　　　　}//若後面還有其餘參數，這裏應加「，「

　　還能夠進一步禁用「提交’ 按鈕，以杜絕用戶的重複操做：

　　　　「beforeSend" : function(){

　　　　　　$(「#loading「 ).show（）；//顯示提示信

　　　　　　$ (「#submit「) .attr(「disabled", "disabled」) ；//禁用「提交「按鈕；

　　　　}//若後面還有其餘參數，這裏應加「，」；

★2)、 complete 回調函數則相似於 Java 代碼中 finally語句塊的特色。例如，不管是否成功，響應結束後都要隱藏「處理中」提示並將 ‘提交」按鈕恢復可用；

　　　　"complete" : function(){

　　　　　　　　$(「#loading「 ).hide()； // 隱藏提示；

　　　　　　　　$("#submit') .removeAttr(「 disabled」)；// 恢復按鈕可用

　　　　　　}// 若後面還有其餘參數. 這裏應加 ", 「

八、 處理 JSON 格式的響應數據：

●JSON（JavaScript Object Notation）一種輕量級的數據交換格式，它基於 JavaScript 的一個子集，採用獨立於語言的文本格式。JSON 相似於實體類對象，一般用來在客戶端和服務器之間傳遞數據，在 Ajax 出現之初，客戶端腳本和服務器之間傳遞數據使用的是 XML，但XML難於解析，體積也比較大，如今有JSON將 XML 取而代之的趨勢；

●JSON（JavaScript Object Notation）：

　　★一種輕量級的數據交換格式

　　★採用獨立於語言的文本格式

　　★一般用於在客戶端和服務器之間傳遞數據

●JSON的優勢：

　　★輕量級交互語言

　　★結構簡單

　　★易於解析

●定義JSON對象：

　　語法：var JSON對象 = { "name" : value, "name" : value, …… };

　　　　◆JSON數據以名/值對的格式書寫，名和值用 '：' 隔開，名/值對之間用 '，' 隔開，整個表式放在 ’{ }' 中，其中.，name必須是字符串，由雙引號「」括起來，value能夠是String、Number、boolean、null、對象、數組；

　　　　　　eg：var person = { "name" : "張三", "age" : 30, "spouse" : null };