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