AJAX简介
- 概念:Asynchronous JavaScript And XML:异步的JavaScripe和XML
- 作用:
- 与服务器进行数据交换:通过AHAX可以给服务器发送请求,并获取服务器响应数据
- 使用AJAX和服务器进行通信,就可以使用HTML+AJAX来替换JSP页面了
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验等。
- 同步:客户端请求服务器端后需等待服务器处理后才可继续操作
- 异步:客户端请求服务器端后无需等待服务器处理而可以继续执行操作
AJAX快速入门
- 编写AjaxServlet,并使用response输出字符串
@WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //1. 响应数据 resp.getWriter().write("hello ajax"); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } }
- 创建XMLHttpRequest对象:用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
<!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, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. 发送请求 /* open(nethod, url, async); method:请求的类型:GET 还是 POST url:服务器(文件)位置 async:true(异步)或 false(同步) */ xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet", true); xhttp.send(); //3. 获取响应 /* readyState: 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪 status: 200 : OK */ xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } }; </script> </body> </html>
案例
使用AJAX验证用户名是否存在
需求:在完成用户注册时,当用户名输入框失去焦点时,校验用户名是否在数据库已存在
register.html | SelectUserServlet | |
---|---|---|
1. 给用户输入框绑定光标失去焦点事件 2. 发送Ajax请求,携带username参数 3. 处理响应 | 请求 ------> <------ 响应 | 1. 接收用户名 2. 调用service查询User 3. 返回标记 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title>
</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="/Demo1/registerServlet" method="post">
<table>
<tr>
<td>用户名:</td>
<td class="inputs">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<br>
<span id="username_err" class="err_msg">用户名已存在</span>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" id="password" placeholder="请输入密码">
<br>
<span id="password_err" class="err_msg"></span>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" value="注册" 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, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2. 发送请求
xhttp.open("GET", "http://localhost:8080/Demo5/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>
@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1. 接收用户名
String username = req.getParameter("username");
//2. 调用service方法,查询用户信息(模拟)
boolean flag = false;
//3. 响应标记
resp.getWriter().write(flag ? "true" : "false");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
Axios异步框架
Axios对原生的AJAX进行封装,简化书写
官网:https://www.axios-http.cn/
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.js"></script>
<script>
//1. get请求
/*axios({
method: "get",
url: "http://localhost:8080/ajax-demo/axiosServlet?name=zhangsan"
}).then(function (response) {
alert(response.data);
})*/
//2. post请求
axios({
method: "post",
url: "http://localhost:8080/ajax-demo/axiosServlet",
data: "name=lisi"
}).then(function (response) {
alert(response.data);
})
</script>
</body>
</html>
Axios请求方式别名
<script>
//1. get请求
/*axios.get("http://localhost:8080/ajax-demo/axiosServlet?name=zhangsan")
.then(function (response) {
alert(response.data);
});*/
//2. post请求
axios.post("http://localhost:8080/ajax-demo/axiosServlet", "name=lisi")
.then(function (response) {
alert(response.data);
});
</script>
JSON
- 概念:JavaScript Object Notation。JavaScript对象表示法
- 由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
JSON基础语法
- 定义:
var 变量名 = { "key1":value1, "key2":value2, ... }
- vlaue的数据类型有:
- 数字(整数或浮点数)
- 字符串(在""中)
- 逻辑值(true或者false)
- 数组(在[]中)
- 对象(在{}中)
- null
- 获取数据:
变量名.key
JSON数据和Java对象转换
- 请求数据:JSON字符串转化为Java对象
- 响应数据:Java对象转化为JSON字符串
- fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库,是目前Java语言中最快的JSON库,可以实现Java对象和JSON字符串的相互转换
- 使用:
- 导入坐标
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
- Java对象转JSON字符串
- JSON字符串转Java对象
public class FastjsonDemo { public static void main(String[] args) { //1. Java对象转JSON字符串 User user = new User(); user.setId(1); user.setUsername("张三"); user.setPassword("123456"); String s = JSON.toJSONString(user); System.out.println(s); //2. JSON字符串转Java对象 User user1 = JSON.parseObject(s, User.class); System.out.println(user1); } }
案例
需求:使用Axios+JSON完成品牌列表数据查询和添加
此处有问题尚未解决
@WebServlet("/addServlet") public class AddServlet extends HttpServlet { private BrandService brandService = new BrandService(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //1. 接收数据 req.getParameter无法接收json数据 BufferedReader reader = req.getReader(); StringBuilder sb = new StringBuilder(); String line = null; while ((line = reader.readLine()) != null) { sb.append(line); } String jsonStr = sb.toString(); //2. 转换数据 Brand brand = null; try { brand = JSON.parseObject(jsonStr, Brand.class); } catch (JSONException e) { e.printStackTrace(); } //3. 业务处理 brandService.add(brand); //4. 响应数据 resp.getWriter().write("success"); /*//获取请求体数据 BufferedReader br = req.getReader(); String params = br.readLine(); System.out.println(params); //将json字符串转为Java对象 Brand brand = JSON.parseObject(params, Brand.class); //2. 调用service方法添加 brandService.add(brand); //3. 响应成功标识 resp.getWriter().write("success");*/ } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } }
当使用注释中的代码时,添加能够成功,但浏览器报500