VietTuts

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

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • Python
  • Java WS
  • MyBatis
  • Eclipse
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • PHP
    • CSS
    • HTML
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Phần mềm tiện ích
    • Selenium Test
    • Lập trình C
    • Lập trình C++
  • Tuyển Dụng

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

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.


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

Bài tập Java - Trộn 2 mảng trong javaBài tập Java - Chèn phần tử vào mảng trong javaBài tập Java - Sắp xếp mảng theo thứ tự giảm dầnBài tập Java - Sắp xếp mảng theo thứ tự tăng dầnJava - Liệt kê số lần xuất hiện của các phần tử trong một mảngJava - Liệt kê các phần tử xuất hiện trong mảng đúng 2 lầnJava - Liệt kê các phần tử xuất hiện trong mảng đúng 1 lầnChuỗi chứa chuỗi trong javaJava - Liệt kê số lần xuất hiện của các từ trong một chuỗiBài tập Java - Đếm số từ trong một chuỗiBài tập java có lời giảiJava - Liệt kê số Fibonacci nhỏ hơn n và là số nguyên tố

VietTuts on facebook

Học Java Cơ Bản Đến Nâng Cao - VietTuts.Vn

Danh sách bài học

Học java
Học servlet
Học jsp
Học Hibernate
Học Struts2
Học Spring
Học SQL

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

About VietTuts.Vn

Hệ thống bài học trên VietTuts.Vn bao gồm các bài lý thuyết và thực hành về các công nghệ java và công nghệ web. Các bài lý thuyết trên hệ thống VietTuts.Vn được tham khảo và tổng hợp từ các trang http://javatpoint.com, http://www.tutorialspoint.com, http://docs.oracle.com/en …

Scroll back to top

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