網(wǎng)站開發(fā)文件綜述網(wǎng)絡(luò)營銷企業(yè)網(wǎng)站
文章目錄
- Ajax
- Ajax 是什么
- Ajax 經(jīng)典應(yīng)用場景
- Ajax 原理示意圖
- ajax的異步請求的方法
- ajax的邏輯：
- 應(yīng)用實例-驗證用戶名是否存在
- 思路框架圖：
- 需求分析: 到數(shù)據(jù)庫去驗證用戶名是否可用
- 思路框架圖
- 大功告成：
- 使用JQuery-Ajax實現(xiàn)上面相同的需求：
Ajax
Ajax 是什么
- AJAX 即"Asynchronous Javascript And XML"(異步 JavaScript 和 XML)
- Ajax 是一種瀏覽器異步發(fā)起請求(指定發(fā)哪些數(shù)據(jù))，局部更新頁面的技術(shù)
Ajax 經(jīng)典應(yīng)用場景
- 搜索引擎根據(jù)用戶輸入關(guān)鍵字，自動提示檢索關(guān)鍵字
- 動態(tài)加載數(shù)據(jù)，按需取得數(shù)據(jù)【樹形菜單、聯(lián)動菜單…】
- 改善用戶體驗?！据斎雰?nèi)容前提示、帶進度條文件上傳…】
- 電子商務(wù)應(yīng)用。 【購物車、郵件訂閱…】
- 訪問第三方服務(wù)。【訪問搜索服務(wù)、rss 閱讀器】
- 頁面局部刷新, https://piaofang.maoyan.com/dashboard
Ajax 原理示意圖
ajax的異步請求的方法
要在點擊某個按鈕之后才能有反應(yīng)，所以整個的ajax的異步請求需要在onclick里面寫：
// $(function () {}) 等價 window.onload = function () {}
$(function () {// $("#btn01") 底層: document.getElementById("btn01")var $checkButton = $("#checkButton"); //得到按鈕// 綁定click事件$checkButton.click(function () {在這里寫ajax的邏輯...}
}
ajax的邏輯：
- 創(chuàng)建XMLHttpRequest對象(!!!) [ajax引擎對象]
var xhr = new XMLHttpRequest();
- 準(zhǔn)備發(fā)送指定數(shù)據(jù)：open，send
xhr.open("GET", "/ajax/checkUserServlet?uname=" + $uname, true);
在send函數(shù)調(diào)用前，需要給XMLHttpRequest綁定一個事件onreadystatechange事件。 該事件可以去指定一個函數(shù)，當(dāng)數(shù)據(jù)變化時，會出發(fā)onreadystatechange每當(dāng)xhr對象readyState改變時， 就會觸發(fā)onreadystatechange事件
xhr.onreadystatechange = function () { .... }
- 真正的發(fā)送ajax請求[http請求]
老韓再說明如果你POST 請求，再send(“發(fā)送的數(shù)據(jù)”)
xhr.send();應(yīng)用實例-驗證用戶名是否存在
- 演示 jquery 發(fā)送 ajax 請求的案例
1 ) 在輸入框輸入用戶名
2 ) 點擊驗證用戶名, 服務(wù)端驗證該用戶名是否已經(jīng)占用了, 如果該用戶已經(jīng)占用, 以 json格式返回該用戶信息
3 ) 假定用戶名為 king , 就不可用, 其它用戶名可以
4 ) 對頁面進行局部刷新, 顯示返回信息
思路框架圖：
-
導(dǎo)包
由于需要以json格式返回數(shù)據(jù)，所以需要導(dǎo)入gson包。
由于還是用到servlet，需要在tomcat的lib目錄下找servlet-api并導(dǎo)入該包。
導(dǎo)入到哪里？
由于是web應(yīng)用，所以需要導(dǎo)入到web/WEB-INF/lib目錄下。
你以為結(jié)束了？ 還需要導(dǎo)入jquery所需要的包：
-
編寫用戶登錄界面（這里需要用到ajax的異步請求的方法）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用戶注冊</title><!--使用JQUery需要先正確加載JQuery--><script type="text/javascript" src="script/jquery-3.7.1.min.js"></script><script type="text/javascript">// $(function () {}) 等價 window.onload = function () {}$(function () {// $("#btn01") 底層: document.getElementById("btn01")var $checkButton = $("#checkButton");// 綁定click事件$checkButton.click(function () {// 1. 創(chuàng)建XMLHttpRequest對象(!!!) [ajax引擎對象]var xhr = new XMLHttpRequest();// 獲取用戶填寫的用戶名var $uname = $("#uname").val();// alert($uname);// 2. 準(zhǔn)備發(fā)送指定數(shù)據(jù)：open，sendxhr.open("GET", "/ajax/checkUserServlet?uname=" + $uname, true); // 這里發(fā)送數(shù)據(jù)是GET方法，把內(nèi)容一起打過去// 在send函數(shù)調(diào)用前，需要給XMLHttpRequest綁定一個事件onreadystatechange事件// 該事件可以去指定一個函數(shù)，當(dāng)數(shù)據(jù)變化時，會出發(fā)onreadystatechange// 每當(dāng)xhr對象readyState改變時， 就會觸發(fā)onreadystatechange事件xhr.onreadystatechange = function () {// 如果請求已完成，且響應(yīng)已就緒，且狀態(tài)碼是200if(xhr.readyState == 4 && xhr.status == 200){//把json數(shù)據(jù)顯示在div1中var $div1 = $("#div1");var responseText = xhr.responseText;console.log("當(dāng)前得到的response=" + responseText)$div1.html(responseText);if(responseText != "") {// 返回的json串為""，則用戶名可用$("#myres").val("用戶名不可用");}else {$("#myres").val("用戶名可用");}}}//3. 真正的發(fā)送ajax請求[http請求]// 老韓再說明如果你POST 請求，再send("發(fā)送的數(shù)據(jù)")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="驗證用戶名"><input style="border-width: 0;color: red" type="text" id="myres"><br/><br/> <!--編寫服務(wù)端打回來的內(nèi)容-->用戶密碼:<input type="password" name="password"><br/><br/>電子郵件:<input type="text" name="email"><br/><br/><input type="submit" value="用戶注冊">
</form>
<h1>返回的json數(shù)據(jù)</h1>
<div id="div1"></div>
</body>
</html>
- 編寫checkUserServlet.java，接受發(fā)送過來的數(shù)據(jù)
@WebServlet(urlPatterns = "/checkUserServlet")
public class checkUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException