一、AJAX 概述
AJAX (Asynchronous JavaScript And XML) ：异步的 JavaScript 和 XML 。
AJAX 作用有以下两方面：（1）与服务器进行数据交换 ：通过 AJAX 可以给服务器发送请求，服务器将数据直接响应回给浏览器。使用AJAX和服务器进行通信，以达到使用 HTML+AJAX来 替换JSP页面（2）异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…
二、AJAX 快速入门
（1）编写AjaxServlet，并使用response输出字符串
（2）创建XMLHttpRequest对象：用于和服务器交换数据
（3）向服务器发送请求
（4）获取服务器响应数据
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script>//1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2. 发送请求xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");xhttp.send();//3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert(this.responseText);}};</script></body> </html>
三、使用AJAX验证用户名是否存在
需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet"> </head> <body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="login.html">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">用户名已存在</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>验证码</td><td class="inputs"><input name="checkCode" type="text" id="checkCode"><img src="imgs/a.jpg"><a href="#" id="changeImg">看不清？</a></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div><script>//1. 给用户名输入框绑定 失去焦点事件document.getElementById("username").onblur = function () {//2. 发送ajax请求// 获取用户名的值var username = this.value;//2.1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.2. 发送请求xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);xhttp.send();//2.3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {//alert(this.responseText);//判断if(this.responseText == "true"){//用户名存在，显示提示信息document.getElementById("username_err").style.display = '';}else {//用户名不存在 ，清楚提示信息document.getElementById("username_err").style.display = 'none';}}};}</script> </body> </html>
四、Axios 异步框架
Axios 对原生的 AJAX 进行封装，简化书写。Axios 官网是： https://www.axios - http.cn
1. Axios 快速入门
（1）引入 Axios 的 js 文件
（2）使用 axios 发送请求，并获取响应结果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script src="js/axios-0.18.0.js"></script><script>//1. getaxios({method:"get",url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"}).then(function (resp) {alert(resp.data);})//2. postaxios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"}).then(function (resp) {alert(resp.data);})</script></body> </html>
2. Axios 请求方式别名
为了方便起见， Axios 已经为所有支持的请求方法提供了别名。get 请求 ： axios.get(url[,config])delete 请求 ： axios.delete(url[,config])head 请求 ： axios.head(url[,config])options 请求 ： axios.option(url[,config])post 请求： axios.post(url[,data[,config])put 请求： axios.put(url[,data[,config])patch 请求： axios.patch(url[,data[,config])<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script src="js/axios-0.18.0.js"></script><script>//1. getaxios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {alert(resp.data);})//2. postaxios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {alert(resp.data);})</script></body> </html>
五、JSON
1. JSON 概述
概念： JavaScript Object Notation 。JavaScript 对象表示法
作用：由于其语法格式简单，层次结构鲜明，现多用于作为 数据载体 ，在网络中进行数据传输。
2. JSON 基础语法
JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。 定义格式如下：var 变量名 = '{"key":value,"key":value,...}';value 的数据类型分为如下（1）数字（整数或浮点数）（2）字符串（使用双引号括起来）（3）逻辑值（ true 或者 false ）（4）数组（在方括号中）（5）对象（在花括号中）（6）nullvar jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'获取数据：js对象.属性名 jsonStr.name
3. JSON 数据和 Java 对象转换
请求数据：JSON字符串转为Java对象
响应数据：Java对象转为JSON字符串
Fastjson 是阿里巴巴提供的一个 Java 语言编写的高性能功能完善的 JSON 库，是目前 Java 语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。
（1）导入坐标
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>（2）Java对象转JSON
String jsonStr = JSON.toJSONString(obj);（3）JSON字符串转Java对象
User user = JSON.parseObject(jsonStr, User.class);
4. 案例
@WebServlet("/selectAllServlet") public class SelectAllServlet extends HttpServlet {private BrandService brandService = new BrandService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 调用Service查询List<Brand> brands = brandService.selectAll();//2. 将集合转换为JSON数据 序列化String jsonString = JSON.toJSONString(brands);//3. 响应数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);} }<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <a href="addBrand.html"><input type="button" value="新增"></a><br> <hr> <table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><tr align="center"><td>1</td><td>三只松鼠</td><td>三只松鼠</td><td>100</td><td>三只松鼠，好吃不上火</td><td>启用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr><tr align="center"><td>2</td><td>优衣库</td><td>优衣库</td><td>10</td><td>优衣库，服适人生</td><td>禁用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr><tr align="center"><td>3</td><td>小米</td><td>小米科技有限公司</td><td>1000</td><td>为发烧而生</td><td>启用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr> </table><script src="js/axios-0.18.0.js"></script><script>//1. 当页面加载完成后，发送ajax请求window.onload = function () {//2. 发送ajax请求axios({method:"get",url:"http://localhost:8080/brand-demo/selectAllServlet"}).then(function (resp) {//获取数据let brands = resp.data;let tableData = " <tr>\n" +" <th>序号</th>\n" +" <th>品牌名称</th>\n" +" <th>企业名称</th>\n" +" <th>排序</th>\n" +" <th>品牌介绍</th>\n" +" <th>状态</th>\n" +" <th>操作</th>\n" +" </tr>";for (let i = 0; i < brands.length ; i++) {let brand = brands[i];tableData += "\n" +" <tr align=\"center\">\n" +" <td>"+(i+1)+"</td>\n" +" <td>"+brand.brandName+"</td>\n" +" <td>"+brand.companyName+"</td>\n" +" <td>"+brand.ordered+"</td>\n" +" <td>"+brand.description+"</td>\n" +" <td>"+brand.status+"</td>\n" +"\n" +" <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +" </tr>";}// 设置表格数据document.getElementById("brandTable").innerHTML = tableData;})}</script></body> </html>
