AJAX详解教程
- AJAX(Asynchronous JavaScript And XML)：異步的 JavaScript 和 XML。
- 本身不是一種新技術，而是多個技術綜合。用于快速創建動態網頁的技術。
- 一般的網頁如果需要更新內容，必需重新加載個頁面。
- 而 AJAX通過瀏覽器與服務器進行少量數據交換，就可以使網頁實現異步更新。也就是在不重新加載整個頁 面的情況下，對網頁的部分內容進行局部更新。
同步&異步：
同步：在客戶端向服務器發送請求時，用戶需要等待服務器的返回結果才能繼續 異步：在客戶端向服務器發送請求時，可以做其他的事情。
AJAX介紹：
-
AJAX(Asynchronous JavaScript And XML)：異步的 JavaScript 和 XML。
-
本身不是一種新技術，而是多個技術綜合。用于快速創建動態網頁的技術。
-
一般的網頁如果需要更新內容，必需重新加載個頁面。
-
而 AJAX 通過瀏覽器與服務器進行少量數據交換，就可以使網頁實現異步更新。也就是在不重新加載整個頁 面的情況下，對網頁的部分內容進行局部更新。
原生JS實現AJAX：
代碼實現
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;@WebServlet("/userServlet") public class UserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//設置請求和響應的亂碼req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//1.獲取請求參數String username = req.getParameter("username");//模擬服務器處理請求需要5秒鐘/*try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}*///2.判斷姓名是否已注冊if ("zhangsan".equals(username)) {resp.getWriter().write("<font color='red'>用戶名已注冊</font>");} else {resp.getWriter().write("<font color='green'>用戶名可用</font>");}}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }html代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>用戶注冊</title> </head> <body> <form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密碼：<input type="password" id="password"><br><input type="submit" value="注冊"> </form> </body> <script>//1.為姓名綁定失去焦點事件document.getElementById("username").onblur = function () {//2.創建XMLHttpRequest核心對象let xmlHttp = new XMLHttpRequest();//3.打開鏈接let username = document.getElementById("username").value;xmlHttp.open("GET", "userServlet?username=" + username, true);//xmlHttp.open("GET","userServlet?username="+username,false);//4.發送請求xmlHttp.send();//5.處理響應xmlHttp.onreadystatechange = function () {//判斷請求和響應是否成功if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {//將響應的數據顯示到span標簽document.getElementById("uSpan").innerHTML = xmlHttp.responseText;}}} </script> </html>原生JS實現AJAX詳解：
核心對象：XMLHttpRequest
用于在后臺與服務器交換數據。可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
打開鏈接：open(method,url,async)：
- method：請求的類型 GET 或 POST。
- url：請求資源的路徑。
- async：true(異步) 或 false(同步)。
發送請求：send(String params)：
- params：請求的參數(POST 專用)。
處理響應：onreadystatechange：
- readyState：0-請求未初始化，1-服務器連接已建立，2-請求已接收，3-請求處理中，4-請求已完成，且響應已就緒。
- status：200-響應已全部 OK。
獲得響應數據形式：
- responseText：獲得字符串形式的響應數據。
- responseXML：獲得 XML 形式的響應數據。
JQuery的GET方式實現AJAX：
核心語法：$.get(url,[data],[callback],[type]);
- url：請求的資源路徑。
- data：發送給服務器端的請求參數，格式可以是key=value，也可以是 js 對象。
- callback：當請求成功后的回調函數，可以在函數中編寫我們的邏輯代碼。
- type：預期的返回數據的類型，取值可以是 xml, html, js, json, text等。
代碼實現：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>用戶注冊</title> </head> <body><form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密碼：<input type="password" id="password"><br><input type="submit" value="注冊"></form> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//1.為用戶名綁定失去焦點事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的GET方式實現AJAX$.get(//請求的資源路徑"userServlet",//請求參數"username=" + username,//回調函數function (data) {//將響應的數據顯示到span標簽$("#uSpan").html(data);},//響應數據形式"text");}); </script> </html>JQuery的POST方式實現AJAX：
核心語法：$.post(url,[data],[callback],[type]);
- url：請求的資源路徑。
- data：發送給服務器端的請求參數，格式可以是key=value，也可以是 js 對象。
- callback：當請求成功后的回調函數，可以在函數中編寫我們的邏輯代碼。
- type：預期的返回數據的類型，取值可以是 xml, html, js, json, text等。
代碼實現：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>用戶注冊</title> </head> <body><form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密碼：<input type="password" id="password"><br><input type="submit" value="注冊"></form> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//1.為用戶名綁定失去焦點事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的POST方式實現AJAX$.post(//請求的資源路徑"userServlet",//請求參數"username=" + username,//回調函數function (data) {//將響應的數據顯示到span標簽$("#uSpan").html(data);},//響應數據形式"text");}); </script> </html>JQuery的通用方式實現AJAX
核心語法：$.ajax({name:value,name:value,…});
- url：請求的資源路徑。
- async：是否異步請求，true-是，false-否 (默認是 true)。
- data：發送到服務器的數據，可以是鍵值對形式，也可以是 js 對象形式。
- type：請求方式，POST 或 GET (默認是 GET)。
- dataType：預期的返回數據的類型，取值可以是 xml, html, js, json, text等。
- success：請求成功時調用的回調函數。
- error：請求失敗時調用的回調函數。
代碼實現：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>用戶注冊</title> </head> <body><form autocomplete="off">姓名：<input type="text" id="username"><span id="uSpan"></span><br>密碼：<input type="password" id="password"><br><input type="submit" value="注冊"></form> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//1.為用戶名綁定失去焦點事件$("#username").blur(function () {let username = $("#username").val();//2.jQuery的通用方式實現AJAX$.ajax({//請求資源路徑url:"userServletxxx",//是否異步async:true,//請求參數data:"username="+username,//請求方式type:"POST",//數據形式dataType:"text",//請求成功后調用的回調函數success:function (data) {//將響應的數據顯示到span標簽$("#uSpan").html(data);},//請求失敗后調用的回調函數error:function () {alert("操作失敗...");}});}); </script> </html>總結
- 上一篇： linux 检查mps版本,linux_
- 下一篇： Golang——秒懂函数、参数、可变参数