JSON&Ajax02
1.Ajax基本介紹
1.1Ajax是什么
- AJAX 即“Asynchronous JavaScript And XML”（異步JavaScript和XML）
- Ajax 是一種瀏覽器異步發起請求（指定發哪些資料），區域更新頁面的技術
- 傳統的網頁（不使用 AJAX）如果需要更新內容，必需多載整個網頁面，而使用Ajax，通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，
- 傳統的網頁（不使用 AJAX），如果沒有得到服務器的回應，瀏覽器程式會處于一個等待掛起的狀態，無法執行其他操作，直至得到http回應，
1.2Ajax經典應用場景
- 搜索引擎根據用戶輸入關鍵字，自動提示檢索關鍵字
- 動態加載資料，按需取得資料 [樹形選單，聯動選單]
- 改善用戶體驗 [輸入內容前提示，帶進度條檔案上傳]
- 電子商務應用 [購物車，郵件訂閱]
- 訪問第三方服務 [訪問搜索服務，rss閱讀器]
- 頁面區域重繪
- Ajax的三個特點
- 異步請求
- 發送指定資料
- 區域重繪
2.Ajax原理示意圖
2.1傳統的web應用資料通信方式
傳統web應用資料通信方式
-
瀏覽器發出http請求（攜帶資料username=xxx&pwd=xxx）
-
服務端接收資料，并處理
-
通過http回應，把資料回傳給瀏覽器
缺點：
-
表單提交是把該表單的所有資料都提交給服務端，資料量大，沒有意義
-
在服務端沒有回應前，瀏覽器前端頁面處于等待狀態，處于一個掛起的狀態
-
不能進行區域重繪頁面，而是重繪整個頁面
2.2Ajax資料通信方式
Ajax資料通信方式：
- 瀏覽器發出http請求，使用XMLHttpRequest物件
- 服務端接收資料，并處理
- 通過http回應，把資料回傳給瀏覽器（回傳的資料格式可以多樣 如json，xml，普通文本）
優點：
-
可以通過XMLHttpReques物件，發送指定資料，資料量小，速度快
-
XMLHttpReques是異步發送，在服務端沒有Http回應前，瀏覽器不需要等待，用戶可以進行其他操作
-
可以進行區域重繪，提高了用戶體驗
3.JavaScript原生Ajax請求
3.1Ajax檔案
AJAX - XMLHttpRequest 物件 (w3school.com.cn)
- onreadystatechange 事件
當請求被發送到服務器時，我們需要執行一些基于回應的任務，
每當 readyState 改變時，就會觸發 onreadystatechange 事件，
readyState 屬性存有 XMLHttpRequest 的狀態資訊，
下面是 XMLHttpRequest 物件的三個重要的屬性：
在 onreadystatechange 事件中，我們規定當服務器回應已做好被處理的準備時所執行的任務，
3.2應用實體
演示JavaScript發送原生Ajax請求的案例
-
在輸入框輸入用戶名
-
點擊驗證用戶名，使用ajax方式，服務端驗證該用戶名是否已經被占用，如果已經被占用，以json格式回傳該用戶資訊
-
假定用戶名為king，就不可用，其他用戶名可以（后面我們接入DB）
-
對頁面進行區域重繪，顯示回傳資訊
-
思考：為什么直接回傳用戶名是否可用資訊？==>為什么回傳json格式的字串？
可以根據回傳的json可以做更多的業務操作，
思路
-
首先創建一個新專案，添加web支持(暫時不使用maven)
-
在web-inf檔案夾下添加lib目錄，添加servlet和json的相關jar包
-
配置Tomcat服務器
-
創建login.html，使用ajax
大致的流程是：用戶點擊驗證用戶名按鈕后，操作dom獲取填寫的用戶名，然后創建XMLHttpRequest物件[ajax引擎物件]，呼叫XMLHttpRequest 物件的 open() 和 send() 方法
-
在open中設定三個引數：1.請求方式、2.請求url（如果是get請求，url需包括請求引數）、3.是否使用異步發送
-
給XMLHttpRequest物件系結一個事件onreadystatechange，該事件的觸發時機是XMLHttpRequest的readyState狀態改變，
readyState狀態詳見：AJAX - 服務器回應 (w3school.com.cn)
-
然后呼叫send方法真正發送ajax請求（如果是post請求，引數就是在send方法中設定）
-
根據readyState的狀態判斷請求已完成且回應已就緒，然后進行業務操作，
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用戶注冊</title>
<script type="text/javascript">
window.onload = function () {//頁面加載完畢后執行function
var checkButton = document.getElementById("checkButton");
checkButton.onclick = function () {
//1.創建XMLHttpRequest物件[ajax引擎物件]
var xhr = new XMLHttpRequest();
//2.準備發送指定資料
// 2.1獲取用戶填寫的用戶名
var username = document.getElementById("uname").value;
// 2.2XMLHttpRequest 物件的 open() 和 send() 方法
// (1)"GET" 請求方式，也可以是post
// (2)"/ajax/checkUserServlet?username="+username 就是url
// (3) true表示異步發送
xhr.open("GET", "/ajax/checkUserServlet?username=" + username, true);
//2.3在send方法呼叫前，給XMLHttpRequest物件系結一個事件==>onreadystatechange
//每當XMLHttpRequest物件的 readyState 改變時，就會觸發 onreadystatechange 事件
xhr.onreadystatechange = function () {
//如果請求已完成，并且回應已經就緒，并且狀態碼是200
if (xhr.readyState == 4 && xhr.status == 200) {
//把回傳的json資料顯示在div上
document.getElementById("div1").innerText = xhr.responseText;
// console.log("xhr=", xhr);
//處理XMLHttpRequest物件中拿到的資料
var responseText = xhr.responseText;
// console.log("回傳的資訊= "+responseText);
if (responseText != "") {
//根據在servlet設定的邏輯，如果回傳的資料不是空串，說明該用戶名不可用
document.getElementById("myres").value = "https://www.cnblogs.com/liyuelian/archive/2022/12/07/用戶名不可用";
} else {
document.getElementById("myres").value = "https://www.cnblogs.com/liyuelian/archive/2022/12/07/用戶名可用";
}
}
}
//2.4真正發送ajax請求[底層還是http請求]
//如果前面open的第一個引數指定的是post請求，那么post的引數在send中指定
//如果open的第一個引數指定的是get請求，那么send中不需要寫任何資料，因為前面已經在url中指定了
xhr.send();
}
}
</script>
</head>
<body>
<h1>用戶注冊</h1>
<form action="/ajax/checkUserServlet" method="post">
用戶名字:<input type="text" name="username" id="uname">
<input type="button" id="checkButton" value="https://www.cnblogs.com/liyuelian/archive/2022/12/07/驗證用戶名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用戶密碼:<input type="password" name="password"><br/><br/>
電子郵件:<input type="text" name="email"><br/><br/>
<input type="submit" value="https://www.cnblogs.com/liyuelian/archive/2022/12/07/用戶注冊">
</form>
<h1>回傳的 json 資料</h1>
<div id="div1"></div>
</body>
</html>
- 在web.xml中配置servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>CheckUserServlet</servlet-name>
<servlet-class>com.li.ajax.servlet.CheckUserServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUserServlet</servlet-name>
<url-pattern>/checkUserServlet</url-pattern>
</servlet-mapping>
</web-app>
- CheckUserServlet：如果接收到的用戶名為king，就將其資訊以json形式回傳前端頁面，如果是其他名字，就回傳空串，
package com.li.ajax.servlet;
import com.google.gson.Gson;
import com.li.ajax.entity.User;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
public class CheckUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//System.out.println("CheckUserServlet 被呼叫...");
//接收ajax提交的資料
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");//引數名取決于url中的引數名
System.out.println("uname=" + username);
//如果用戶名為king，就認為是不可用的
if ("king".equals(username)) {//假定king已經有人使用了
//后面這個資訊是從資料庫db來獲取的
User king = new User(100, "king", "6666", "[email protected]");
//把king 物件轉成 json 格式的字串
String strKing = new Gson().toJson(king);
//回傳資訊
response.getWriter().print(strKing);
} else {
//如果用戶名可用，回傳空串即可
response.getWriter().print("");
}
}
}
- Javabean，為了完成物件-->json字串的需求
package com.li.ajax.entity;
/**
* User類就是一個Javabean/pojo/entity/domain
*/
public class User {
private Integer id;
private String name;
private String pwd;
private String email;
public User(Integer id, String name, String pwd, String email) {
this.id = id;
this.name = name;
this.pwd = pwd;
this.email = email;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
3.3練習
需求分析：到資料庫中驗證用戶名是否可用
- 點擊驗證用戶名，到資料庫中驗證用戶名是否可用
- 自己設計創建資料庫ajaxdb，創建users表
- 使用ajax方式，服務端驗證該用戶名是否已經被占用了，若已經被占用，以json格式回傳該用戶資訊
- 對頁面進行區域重繪，顯示回傳資訊
- 提示：[Mysql+JDBC+資料庫連接池]
只需在前面的應用實體中進行升級改進，接入DB
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539477.html
標籤：其他
上一篇：博客園雪花特效