4 phút để đọc
Trong các ứng dụng web sử dụng Java JSP Servlet , việc tích hợp Ajax là rất phổ biến. Gần đây, tôi đã viết khá nhiều về các phương thức của jQuery và cách áp dụng chúng.
Hôm nay, chúng ta sẽ cùng tìm hiểu về một trong những tính năng quan trọng của jQuery, cho phép thực hiện các lệnh gọi AJAX một cách dễ dàng và xử lý phản hồi trong ứng dụng web sử dụng JSP và Servlet.
Ví dụ Ajax với JSP và Servlet
Tôi sẽ sử dụng Eclipse IDE để tạo một “Dynamic Web Project”, tuy nhiên bạn có thể sử dụng bất kỳ IDE nào khác. Mục tiêu chính trong bài này là sử dụng jQuery để gửi lệnh AJAX từ trang JSP đến Servlet và xử lý kết quả trả về. Hình ảnh dưới đây minh họa cấu trúc cuối cùng của dự án:
Mã Servlet sử dụng Ajax
Chúng ta sẽ tạo một servlet đơn giản, nhận userName từ request, tạo lời chào và trả về dưới dạng văn bản thuần (plain text).
package com.journaldev.servlets;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userName = request.getParameter("userName").trim();
if(userName == null || "".equals(userName)){
userName = "Guest";
}
String greetings = "Hello " + userName;
response.setContentType("text/plain");
response.getWriter().write(greetings);
}
}
Lưu ý rằng tôi đang sử dụng annotation của Servlet 3 để cấu hình. Nếu bạn thích cấu hình bằng XML, bạn có thể thực hiện trong file web.xml. Chúng ta sẽ xử lý servlet bất đồng bộ bằng cách sử dụng hỗ trợ AJAX của jQuery.
Trang JSP sử dụng Ajax
Dưới đây là mã cho trang JSP. Trang này có một trường nhập liệu để người dùng nhập tên. Ngay khi người dùng chuyển focus khỏi trường này, phương thức AJAX của jQuery sẽ được kích hoạt, gọi servlet và xử lý phản hồi.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<https://www.w3.org/TR/html4/loose.dtd>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>
<script src="<https://code.jquery.com/jquery-1.10.2.js>"
type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>
<form>
Enter Your Name: <input type="text" id="userName" />
</form>
<br>
<br>
<strong>Ajax Response</strong>:
<div id="ajaxGetUserServletResponse"></div>
</body>
</html>
Lưu ý rằng chúng ta có hai file JavaScript được nhúng trong trang JSP: một là thư viện jQuery, và một là file chứa đoạn mã JavaScript dùng để thực hiện lệnh gọi AJAX. Trong ví dụ này, tôi đang nhúng jQuery từ URL của code.jquery.com, tuy nhiên bạn cũng có thể tải thư viện này về và lưu cùng với file JS của bạn. Mã JSP rất đơn giản, nội dung của phần tử div là ajaxGetUserServletResponse sẽ được cập nhật bằng phản hồi trả về từ lệnh gọi AJAX thông qua jQuery.
File JavaScript jQuery AJAX
Dưới đây là mã nguồn file JavaScript dùng để gửi yêu cầu AJAX bằng jQuery. Mã file app-ajax.js:
$(document).ready(function() {
$('#userName').blur(function(event) {
var name = $('#userName').val();
$.get('GetUserServlet', {
userName : name
}, function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
});
});
});
Chúng ta cũng có thể thực hiện lệnh gọi AJAX bằng cách sử dụng phương thức ajax() của jQuery, như được minh họa bên dưới. Ví dụ ở trên là cách viết rút gọn của việc sử dụng phương thức ajax().
$(document).ready(function() {
$('#userName').blur(function() {
$.ajax({
url : 'GetUserServlet',
data : {
userName : $('#userName').val()
},
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
}
});
});
});
Dưới đây là cú pháp của phương thức ajax() trong jQuery. Bạn hãy đối chiếu với đoạn mã phía trên để hiểu rõ cách thức hoạt động của nó.
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Ứng dụng ví dụ jQuery Ajax JSP Servlet của chúng ta đã sẵn sàng, chỉ cần tiến hành build và deploy vào servlet container mà bạn yêu thích. Hình ảnh dưới đây hiển thị kết quả đầu ra. Tôi đang sử dụng công cụ Developer Tools của Chrome để xác nhận rằng servlet đã được gọi thành công.
Vậy là chúng ta đã tìm hiểu những kiến thức cơ bản về cách jQuery hỗ trợ AJAX và cách tích hợp nó vào ứng dụng web sử dụng Java. Trong các bài hướng dẫn tiếp theo, chúng ta sẽ tiếp tục khám phá thêm nhiều tính năng khác của jQuery có thể áp dụng trong bất kỳ ứng dụng web nào.
