- 搞定J2EE核心技術與企業應用
- 常建功 王向華編著
- 1570字
- 2018-12-29 13:50:13
8.4 關于Ajax的經典框架——jQuery
在Java Web項目中為了方便用戶實現Ajax技術的應用，經常會使用到Ajax的各種框架。Ajax框架出現的目標就是使煩瑣的Ajax開發變得更加容易，讓程序員不用重復地構造JavaScript的底層。本章將詳細介紹關于Ajax的經典框架——jQuery的使用。
8.4.1 jQuery框架的下載和配置
JQuery框架由John Resig于2006年初創建，主要用來簡化JavaScript和Ajax的編程。使用該框架可以非常方便地在網頁上實現操作文檔、處理事件、實現特效，并為Web頁面添加Ajax方面的交互。
目前JQuery框架比較穩定的版本為1.6.2，具體的下載步驟如下：
01 首先訪問下載JQuery組件的官方網站（http://jquery.com），如圖8.16所示。
圖8.16 JQuery組件首頁
02 在Jquery首頁中，首先選擇“DEVELOPMENT”選項，然后單擊“Download（jQuery）”鏈接就可以實現關于JQuery組件的下載，具體過程如圖8.17所示。
圖8.17 JQuery組件下載
至此，就完成了對JQuery組件的下載。由于該組件是一個javascript文件，所以在具體使用時，可以通過直接引入外部javascript文件的方式來調用該組件。
8.4.2 jQuery框架的簡單使用
為了能夠清楚地理解JQuery框架，本節將詳細介紹實現用戶名驗證的功能。雖然通過Ajax技術也可以實現該功能，但是使用JQuery框架卻可以更簡單，具體步驟如下：
01 新建一個名Jqueryajax的Web Project，在目錄Jqueryajax\WebRoot下創建一個名為javascript的文件夾用來存放該項目的JavaScript類型文件。
02 復制JQuery框架中的jquery.js文件到javascript文件夾中，完整項目的目錄結構如圖8.18所示。
圖8.18 目錄結構
03 在目錄Jqueryajax\WebRoot下，首先創建一個名為ajax.html的頁面，接著在Jqueryajax\Src目錄下創建一個名為ajaxservlet的Servlet程序。
關于ajax.html頁面的內容如下所示：
//＊＊＊＊＊＊＊ ajax.html ＊＊＊＊＊＊＊＊＊＊＊＊＊＊
＜head＞
＜title＞用戶名校驗＜/title＞
＜script type="text/javascript" src="javascript/jquery.js"＞＜/script＞
＜script type="text/javascript" src="javascript/verify.js"＞＜/script＞
＜/head＞
＜body＞
請輸入用戶名：
＜br /＞
＜input type="text" id="userName" /＞
＜input type="button" value="校驗" onclick="verify()" /＞
＜div id="result"＞＜/div＞
＜/body＞
…
關于ajaxservlet程序的內容如下所示：
//＊＊＊＊＊＊＊ ajaxservlet.java ＊＊＊＊＊＊＊＊＊＊＊＊＊＊
public class ajaxservlet extends HttpServlet {
protected void doPost(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse) throws ServletException,
IOException {
doGet(httpServletRequest, httpServletResponse);
}
//編寫doGet方法
protected void doGet(HttpServletRequest httpServletRequest,
HttpServletResponse httpServletResponse) throws ServletException,
IOException {
try {
//設置編碼格式
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//獲取參數
String old = httpServletRequest.getParameter("name");
String name = URLDecoder.decode(old, "UTF-8");
if(old==null||old.length()==0){ //判斷參數
out.println("用戶名不能為空");
} else {
if (name.equals("cjgong")) {
out.println("用戶名[" + name + "]已經存在，請使用其他用戶名");
} else {
out.println("用戶名[" + name + "]尚未存在，可以使用該用戶名注冊
");
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
接著在web.xml文件中配置Servlet程序，具體內容如下：
＜!--配置ajaxservlet類路徑--＞
＜servlet＞
＜servlet-name＞ajaxservlet＜/servlet-name＞
＜servlet-class＞ajaxservlet＜/servlet-class＞
＜/servlet＞
＜!--配置ajaxservlet映射路徑--＞
＜servlet-mapping＞
＜servlet-name＞ajaxservlet＜/servlet-name＞
＜url-pattern＞/ajaxservlet＜/url-pattern＞
＜/servlet-mapping＞
04 創建好客戶端和服務器端程序后，接著就需要通過創建一個javascript文件來實現兩者的相互交互，該javascript文件的具體內容如下：
//定義用戶名校驗的方法
function verify() {
var jqueryObj = $("#userName");
var userName = jqueryObj.val();
$.get("ajaxservlet?name=" + userName, null, callback);
}
//回調函數
function callback(data) {
var resultObj = $("#result");
resultObj.html(data);
}
代碼說明：
● 由于上述代碼需要使用JQuery框架的方法，所以必須要把JQuery框架中名為jquery.js的文件引入該項目。
● 在具體實現客戶端與服務器端相互交互時，首先要獲取客戶端文本框中的內容。查看JQuery幫助文檔可以發現，通過$()查找節點的方式可以實現該功能。在表達式$()中，參數必須為#加上id屬性值，同時該表達式返回的是jquery的對象。接著通過jquery的對象的val()方法獲取該節點的值。
● 獲取客戶端的內容后，就需要把該內容傳送給服務器中的Servlet程序。通過使用JQuery框架中XMLHTTPrequest對象的get方法把請求封裝后發送給服務器，即$.get()。在該方法中存在3個參數，其中第一個參數表示處理請求的url地址；第二個參數表示發送請求中的key/value值對，由于使用Get方法來發送請求，所以該值一般會直接寫在url地址的后面，于是該值一般為null；第三個參數表示回調函數，注意這里只需要函數名稱，沒有括號。
● 當與服務器交互成功后，就需要調用回掉函數callback()。在該方法中首先通過參數data獲取服務器返回的數據，然后再把該數據顯示在客戶端。在具體顯示時，首先獲取顯示內容節點的jquery對象，然后通過該對象的html()方法在相應的節點上顯示出參數的內容。
啟動服務器。最后打開瀏覽器，在地址欄目中輸入地址http://localhost:8080/Jqueryajax/ajax.html，出現如圖8.19所示的頁面。在該頁面中如果填寫“cjgong”字符串，單擊“校驗”按鈕該頁面就會變成如圖8.20所示的內容。
圖8.19 登錄首頁
圖8.20 校驗結果