中国纪检监察报网站,公司的个人网站怎么做,中国住建部和城乡建设官网,企业注册登记JavaWeb 学习笔记 8#xff1a;AJAX
AJAX#xff08;Asynchronous JavaScript And XML#xff0c;异步 js 和 XML#xff09;是一种用 js 代码异步#xff08;或同步#xff09;的方式请求服务端数据#xff0c;并在页面显示或加载的技术。
1.快速入门
先看如何用纯 …JavaWeb 学习笔记 8AJAX
AJAXAsynchronous JavaScript And XML异步 js 和 XML是一种用 js 代码异步或同步的方式请求服务端数据并在页面显示或加载的技术。
1.快速入门
先看如何用纯 js 的方式使用 AJAX
定义一个用于响应 AJAX 请求的 Servlet
WebServlet(/hello)
public class HelloServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.getWriter().println(Hello World!);}
}定义一个 html 页面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
button onclickdoAjaxRequest()send/button
/body
scriptfunction doAjaxRequest(){// 创建 XMLHttpRequest 对象const xhttp new XMLHttpRequest();// 定义回调函数xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {let result this.responseText;console.log(result);}};// 发送请求xhttp.open(GET, http://localhost:8080/ajax-demo/hello, true);xhttp.send();}
/script
/htmljs 方法doAjaxRequest负责创建一个 XMLHttpRequest 对象并用其发送 AJAX 请求然后将返回的内容打印在控制台中。 关于原生 AJAX 的详细说明可以阅读这里。 点击按钮可以看到浏览器发送了一个类型为 XHRXMLHttpRequest 的请求到服务端 并且可以看到控制台输出。
2.案例验证用户是否存在
服务端
WebServlet(/user/exist)
public class ExistController extends HttpServlet {private UserService userService new UserServiceImpl();Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username req.getParameter(username);boolean exists userService.checkUsernameExists(username);if (exists){resp.getWriter().print(true);}else{resp.getWriter().print(false);}}
}在页面表单中输入用户名的元素上设置光标焦点事件
input nameusername typetext idusername onblurcheckUsernameExists()对应的 js
// 检查用户名是否存在
function checkUsernameExists() {let username $(input#username).val();const xhttp new XMLHttpRequest();xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {let result this.responseText;console.log(result)if (result true){console.log(用户名已存在)$(span#username_err).html(用户名已存在);$(span#username_err).show();}else{$(span#username_err).hide();}}};xhttp.open(POST, http://localhost:8080/login-demo/user/exist?usernameusername, true);xhttp.send();
}3.Axios
Axios 是封装好的一个异步调用框架可以运行于浏览器或 Node.js 服务器上。
使用 Axios 可以让我们之前的 AJAX 调用的代码更为简单。
在 html 中添加对 Axios 的引用
headscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script
/head修改 AJAX 部分代码使用 Axios 进行调用
// 检查用户名是否存在
function checkUsernameExists() {let username $(input#username).val();axios({method: post,url: /login-demo/user/exist?username username}).then(function (response) {let result response.data;if (result) {$(span#username_err).html(用户名已存在);$(span#username_err).show();} else {$(span#username_err).hide();}});
}axios对象可以接收一个 js 对象其method属性指定了 HTTP Methodurl指定请求的 url。 需要注意的是这里 Axios 将返回的响应报文体进行了解析所以这里response.data不是一个字符串形式的true或false而是 bool 类型。 除了上边的方式还可以使用一种简化的方式
// 检查用户名是否存在
function checkUsernameExists() {let username $(input#username).val();axios.post(/login-demo/user/exist?username username).then(function (response) {let result response.data;if (result) {$(span#username_err).html(用户名已存在);$(span#username_err).show();} else {$(span#username_err).hide();}});
}4.JSON
通常浏览器和服务端通过异步调用方式传输的数据结构都很复杂所以会使用 JSON 格式的字符串进行传输。
浏览器端
// 检查用户名是否存在
function checkUsernameExists() {let username $(input#username).val();axios.post(/login-demo/user/exist, {username: username}).then(function (response) {let result response.data;if (result.exist) {$(span#username_err).html(用户名已存在);$(span#username_err).show();} else {$(span#username_err).hide();}});
}服务端
WebServlet(/user/exist)
public class ExistController extends HttpServlet {private UserService userService new UserServiceImpl();Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {BufferedReader reader req.getReader();StringBuilder sb new StringBuilder();do{String line reader.readLine();if (line null){break;}sb.append(line);}while (true);String content sb.toString();System.out.println(content);JSONObject jsonObject JSON.parseObject(content);String username (String) jsonObject.get(username);boolean exists userService.checkUsernameExists(username);JSONObject resultJO new JSONObject();if (exists){resultJO.put(exist, true);}else{resultJO.put(exist, false);}resp.setContentType(application/json;charsetUTF-8);resp.getWriter().print(resultJO.toJSONString());}
}这里使用了一个中间件 FastJSON用于在服务端解析和编码 JSON 字符串
dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.75/version
/dependency5.案例异步加载品牌列表
可以用 AxiosJSON 异步加载品牌列表。
后端
WebServlet(/brand/list)
public class ListController extends HttpServlet {// .../*** 获取品牌列表* param request* param response* throws ServletException* throws IOException*/Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType(text/json;charsetutf-8);ListBrand brands brandService.getAllBrands();response.getWriter().print(JSON.toJSONString(brands));}
}前端
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core %
% page contentTypetext/html;charsetUTF-8 languagejava %
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript src/login-demo/js/jquery-3.7.1.min.js/scriptscript typetext/javascript src/login-demo/js/axios-0.18.0.js/script
/head
body
h1${username}欢迎您/h1
a href/login-demo/brand/addinput typebutton value新增/abr
hr
table idbrandsTable border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/trtr aligncenter classbrandsRow hiddenhiddentd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtda href/login-demo/brand/edit?id# classedit修改/aa href/login-demo/brand/delete?id# classdelete删除/a/td/tr
/table
/body
script typetext/javascript$(document).ready(function () {loadBrandsTable();});function loadBrandsTable() {let table $(table#brandsTable);let demoRow table.find(tr.brandsRow:first);// 获取品牌列表信息axios({method: POST,url: /login-demo/brand/list}).then((resp){let brands resp.data;brands.map((brand){let newRow demoRow.clone();console.log(newRow);fillRowData(newRow, brand);table.find(tr:last).after(newRow);});});}function fillRowData(newRow, data){newRow.children(td:eq(0)).html(data.id);newRow.children(td:eq(1)).html(data.brandName);newRow.children(td:eq(2)).html(data.companyName);newRow.children(td:eq(3)).html(data.ordered);newRow.children(td:eq(4)).html(data.description);let status 禁用;if (data.status 0){status 启用;}newRow.children(td:eq(5)).html(status);newRow.children(td:eq(6)).children(a.edit).attr(href,/login-demo/brand/edit?iddata.id);newRow.children(td:eq(6)).children(a.delete).attr(href,/login-demo/brand/delete?iddata.id);newRow.removeAttr(hidden);}
/script
/html这里为表格添加了一个用于示例数据的行并使用 JQuery 选择器获取这个行的 DOM 对象并进行拷贝填充数据后依次添加到表格的末尾。
用类似的方式可以将新增品牌也修改为前端异步提交而非表单提交这里不再赘述。
6.Template
在前边的示例中使用一个表单中的“隐藏行”作为模板用于遍历品牌信息并填充数据然后添加到表格 DOM 树中并最终称为一个有数据的表格。
这样做是可行的但是“隐藏行”只是用户看不见实际上依然是存在的并且会影响页面的渲染速度。对此有一个专门用于此类问题的 Html 标签 template可以用它作为模板 Html 代码存放的位置。这样做的好处在于template标签中的内容是一个 DocumentFragment文档片段它不是当前Document文档的一部分不是任何DOM对象的子节点所以它不会参与页面渲染就不影响性能。但同时我们依然可以通过 js 代码获取其内部 DOM 结构作为模板进行使用。
使用 template 标签改写之前的示例
table idbrandsTable border1 cellspacing0 width800trth序号/thth品牌名称/thth企业名称/thth排序/thth品牌介绍/thth状态/thth操作/th/tr
/table
template idrowTemplatetr aligncentertd/tdtd/tdtd/tdtd/tdtd/tdtd/tdtda href/login-demo/brand/edit?id# classedit修改/aa href/login-demo/brand/delete?id# classdelete删除/a/td/tr
/template对应的 js 代码
function loadBrandsTable() {let table $(table#brandsTable);let demoRow $(#rowTemplate).get(0).content.querySelector(tr);// 获取品牌列表信息axios({method: POST,url: /login-demo/brand/list}).then((resp){let brands resp.data;brands.map((brand){let newRow $(demoRow).clone();// console.log(newRow);fillRowData(newRow, brand);table.find(tr:last).after(newRow);});});
}需要注意的是template 标签的内容是文档片段而文档片段并不是当前文档的一部分。如果用开发者工具观察文档结构 template 标签本身是当前文档的一部分是可以通过文档操作的方式获取的比如用 JQuery$(#rowTemplate).get(0)。但是其内部的内容是一个文档片段#document-fragment标记的部分这部分内容并不属于当前文档所以你是没办法用类似$(#rowTemplate).children()的方式获取到的这个筛选项的长度只能是0没有任何内容。
除了上边示例中使用template的content属性获取 DOM 对象外还可以用 JQuery 的方式
let demoRow $($(#rowTemplate).html()).get(0);这里是先获取template标签内的 html 内容然后用 JQuery 解析以生成 DOM 对象。
两者效果是相同的只是写法不同。 本文的完整示例可以从这里获取。 7.参考资料
黑马程序员JavaWeb基础教程AJAX 简介 (w3school.com.cn)jQuery 教程 (w3school.com.cn)DocumentFragment - Web API 接口参考 | MDN (mozilla.org)DOMParser - Web API 接口参考 | MDN (mozilla.org)javascript中html字符串转化为jquery dom对象的方法
