VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học AJAX

AJAX là gì? Các công nghệ AJAX Đối tượng XMLHttpRequest trong AJAX

Java AJAX

Ví dụ Java Ajax Ví dụ Ajax với Database
1 / 3
❮ ❯

Ví dụ Java Ajax


Đối tượng XMLHttpRequest trong AJAX
Ví dụ Java Ajax

Để tạo ví dụ ajax, bạn cần sử dụng bất kỳ ngôn ngữ phía máy chủ nào ví dụ như servlet, jsp, php, asp.net vv. Ở đây chúng tôi sử dụng JSP để tạo mã phía máy chủ.

Trong ví dụ này, chúng ta chỉ cần in bảng của một số đã cho.


Nội dung chính

  • Các công nghệ sử dụng
  • Các bước để tạo ví dụ ajax với jsp
    • Tạo trang tiếp nhận yêu cầu
    • Tạo trang bên máy chủ để xử lý yêu cầu
    • Cấu hình trang web mặc định (index) trong tệp web.xml
  • Kết quả

Các công nghệ sử dụng

Các công nghệ sử dụng trong ví dụ này:

  • JDK 1.8
  • Apache Tomcat v8.5

Cấu trúc của project:

Ví dụ Java Ajax

Các bước để tạo ví dụ ajax với jsp

Các bước để tạo ví dụ ajax với jsp:

  1. Tạo trang index.jsp tiếp nhận yêu cầu.
  2. Tạo trang tinhtong.jsp để xử lý yêu cầu.
  3. Cấu hình trang web mặc định (index) trong tệp web.xml

Tạo trang tiếp nhận yêu cầu

Trong trang này, chúng tôi đã tạo form nhận dữ liệu nhập từ người dùng. Khi người dùng nhấp vào nút Tinh Tong, hàm sendInfo() được gọi. Ajax được sử dụng bên trong hàm này.

Chúng ta đã gọi hàm getInfo() bất cứ khi nào trạng thái sẵn sàng thay đổi. Nó ghi dữ liệu trả về vào trang web hiện tại một cách năng động bởi sự trợ giúp của thuộc tính innerHTML.

File: index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Java Ajax Example</title>
<script>
 var request;
 function sendInfo() {
  var varA = document.tinhtong.a.value;
  var varB = document.tinhtong.b.value;
  var url = "tinhtong.jsp?a=" + varA + "&b=" + varB;

  if (window.XMLHttpRequest) {
   request = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   request = new ActiveXObject("Microsoft.XMLHTTP");
  }

  try {
   request.onreadystatechange = getInfo;
   request.open("GET", url, true);
   request.send();
  } catch (e) {
   alert("Unable to connect to server");
  }
 }

 function getInfo() {
  if (request.readyState == 4) {
   var val = request.responseText;
   document.getElementById('ketqua').innerHTML = val;
  }
 }
</script>
</head>
<body>
  <h1>Ví dụ Java Ajax</h1>
  <form name="tinhtong">
    <input type="text" name="a"> 
    <span> + </span>
    <input type="text" name="b">
    <input type="button" value="Tinh Tong" onClick="sendInfo()">
  </form>

  <span id="ketqua"> </span>
</body>
</html>

Tạo trang bên máy chủ để xử lý yêu cầu

Trong trang jsp này, chúng ta tính tổng của 2 số được truyền qua url parameter.

File: tinhtong.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Java Ajax Example</title>
</head>
<body>
  <%
      int a = Integer.parseInt(request.getParameter("a"));
      int b = Integer.parseInt(request.getParameter("b"));

      out.print((a + b) + "<br>");
  %>
</body>
</html>

Cấu hình trang web mặc định (index) trong tệp web.xml

File: web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>JavaAjaxExample</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

Kết quả

Chạy ứng dụng và chúng ta có kết quả như sau:

Ví dụ Java Ajax
Đối tượng XMLHttpRequest trong AJAX
Ví dụ Java Ajax

Recent Updates

AJAX là gì?Các công nghệ AJAXĐối tượng XMLHttpRequest trong AJAXVí dụ Ajax với DatabaseVí dụ Java AjaxVí dụ JSON với AJAXXuất dữ liệu ra màn hình console trong JavaCài đặt môi trường JavaJava Swing - Bài tập quản lý sinh viên trong javaSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?LinkedList trong javaArrayList trong javaBài tập java có lời giảiXử lý duplicate trong SQLPhím tắt hay dùng trong ExcelBảo mật tập tin ExcelDịch trang tính trong ExcelIn trang tính trong ExcelSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml