Ví dụ jQuery AJAX với JSP Servlet trong Java
4 phút đọc29/07/2025
Về tác giả
I’m passionate about web development and sharing my insights through articles, with over 8 years of experience. I hope these sharings inspire you and help build a strong web development community.
@#@
Tôi đam mê phát triển web và chia sẻ những hiểu biết của mình thông qua các bài viết, với hơn 8 năm kinh nghiệm. Tôi hy vọng những chia sẻ này sẽ truyền cảm hứng cho các bạn và giúp xây dựng một cộng đồng phát triển web mạnh mẽ.
Cập nhật thông tin mới nhấtNhận các thông tin mới nhất về mối đe dọa, báo cáo an ninh mạng từ CyStack về hòm thư điện tử của bạn
{"success":true,"head":"<title>Ví dụ jQuery AJAX với JSP Servlet trong Java - CyStack Tutorial</title>\n<meta name=\"description\" content=\"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\"/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-video-preview:-1, max-image-preview:large\"/>\n<link rel=\"canonical\" href=\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/\" />\n<meta property=\"og:locale\" content=\"en_US\" />\n<meta property=\"og:type\" content=\"article\" />\n<meta property=\"og:title\" content=\"Ví dụ jQuery AJAX với JSP Servlet trong Java - CyStack Tutorial\" />\n<meta property=\"og:description\" content=\"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\" />\n<meta property=\"og:url\" content=\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/\" />\n<meta property=\"og:site_name\" content=\"CyStack Tutorial\" />\n<meta property=\"article:tag\" content=\"vi\" />\n<meta property=\"article:section\" content=\"Java\" />\n<meta property=\"og:updated_time\" content=\"2026-08-03T17:31:55+07:00\" />\n<meta property=\"og:image\" content=\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\" />\n<meta property=\"og:image:secure_url\" content=\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\" />\n<meta property=\"og:image:width\" content=\"1200\" />\n<meta property=\"og:image:height\" content=\"630\" />\n<meta property=\"og:image:alt\" content=\"jQuery AJAX với JSP Servlet\" />\n<meta property=\"og:image:type\" content=\"image/jpeg\" />\n<meta property=\"article:published_time\" content=\"2025-07-29T08:59:48+07:00\" />\n<meta property=\"article:modified_time\" content=\"2026-08-03T17:31:55+07:00\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" />\n<meta name=\"twitter:title\" content=\"Ví dụ jQuery AJAX với JSP Servlet trong Java - CyStack Tutorial\" />\n<meta name=\"twitter:description\" content=\"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\" />\n<meta name=\"twitter:image\" content=\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\" />\n<meta name=\"twitter:label1\" content=\"Written by\" />\n<meta name=\"twitter:data1\" content=\"Bao Tran\" />\n<meta name=\"twitter:label2\" content=\"Time to read\" />\n<meta name=\"twitter:data2\" content=\"4 minutes\" />\n<script type=\"application/ld+json\" class=\"rank-math-schema\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https://blog.cystack.org/tutorial/#person\",\"name\":\"CyStack Tutorial\"},{\"@type\":\"WebSite\",\"@id\":\"https://blog.cystack.org/tutorial/#website\",\"url\":\"https://blog.cystack.org/tutorial\",\"name\":\"CyStack Tutorial\",\"publisher\":{\"@id\":\"https://blog.cystack.org/tutorial/#person\"},\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\",\"url\":\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\",\"width\":\"1200\",\"height\":\"630\",\"caption\":\"jQuery AJAX v\\u1edbi JSP Servlet\",\"inLanguage\":\"en-US\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":\"1\",\"item\":{\"@id\":\"https://blog.cystack.org/tutorial\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":\"2\",\"item\":{\"@id\":\"https://blog.cystack.org/tutorial/vi/category/java/\",\"name\":\"Java\"}},{\"@type\":\"ListItem\",\"position\":\"3\",\"item\":{\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/\",\"name\":\"V\\u00ed d\\u1ee5 jQuery AJAX v\\u1edbi JSP Servlet trong Java\"}}]},{\"@type\":\"WebPage\",\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/#webpage\",\"url\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/\",\"name\":\"V\\u00ed d\\u1ee5 jQuery AJAX v\\u1edbi JSP Servlet trong Java - CyStack Tutorial\",\"datePublished\":\"2025-07-29T08:59:48+07:00\",\"dateModified\":\"2026-08-03T17:31:55+07:00\",\"isPartOf\":{\"@id\":\"https://blog.cystack.org/tutorial/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\"},\"inLanguage\":\"en-US\",\"breadcrumb\":{\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/#breadcrumb\"}},{\"@type\":\"Person\",\"@id\":\"https://blog.cystack.org/tutorial/author/baotran/\",\"name\":\"Bao Tran\",\"url\":\"https://blog.cystack.org/tutorial/author/baotran/\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://secure.gravatar.com/avatar/0cdd33c02ec4a531fcf557b9c1ccc276df0c69031b2382c959bcf335248e840c?s=96&d=mm&r=g\",\"url\":\"https://secure.gravatar.com/avatar/0cdd33c02ec4a531fcf557b9c1ccc276df0c69031b2382c959bcf335248e840c?s=96&d=mm&r=g\",\"caption\":\"Bao Tran\",\"inLanguage\":\"en-US\"}},{\"@type\":\"BlogPosting\",\"headline\":\"V\\u00ed d\\u1ee5 jQuery AJAX v\\u1edbi JSP Servlet trong Java - CyStack Tutorial\",\"keywords\":\"jquery,ajax,jsp,servlet\",\"datePublished\":\"2025-07-29T08:59:48+07:00\",\"dateModified\":\"2026-08-03T17:31:55+07:00\",\"articleSection\":\"Java\",\"author\":{\"@id\":\"https://blog.cystack.org/tutorial/author/baotran/\",\"name\":\"Bao Tran\"},\"publisher\":{\"@id\":\"https://blog.cystack.org/tutorial/#person\"},\"description\":\"Trong c\\u00e1c \\u1ee9ng d\\u1ee5ng web s\\u1eed d\\u1ee5ng Java JSP Servlet , vi\\u1ec7c t\\u00edch h\\u1ee3p Ajax l\\u00e0 r\\u1ea5t ph\\u1ed5 bi\\u1ebfn. G\\u1ea7n \\u0111\\u00e2y, t\\u00f4i \\u0111\\u00e3 vi\\u1ebft kh\\u00e1 nhi\\u1ec1u v\\u1ec1 c\\u00e1c ph\\u01b0\\u01a1ng th\\u1ee9c c\\u1ee7a jQuery v\\u00e0 c\\u00e1ch \\u00e1p\",\"name\":\"V\\u00ed d\\u1ee5 jQuery AJAX v\\u1edbi JSP Servlet trong Java - CyStack Tutorial\",\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/#richSnippet\",\"isPartOf\":{\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/#webpage\"},\"image\":{\"@id\":\"https://s2.cystack.net/tutorial/29085844/jquery-ajax-voi-jsp-servlet-trong-java.jpg\"},\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https://blog.cystack.org/tutorial/vi/2025/07/29/jquery-ajax-voi-jsp-servlet-trong-java/#webpage\"}}]}</script>\n"}
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.
