AJAX
-
概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
- 异步和同步：客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
- 异步和同步：客户端和服务器端相互通信的基础上
-
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升用户的体验
-
实现方式：
-
原生的JS实现方式（了解）
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//定义方法
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*
*
* 参数：
*
method：请求的类型；GET 或 POST
*get方式：请求参数在url后面拼接，send方法为空参
*post方式：请求参数在send方法中定义
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*
* */
xmlhttp.open("GET", "/ajaxServlet?username=Tom", true);
//3.发送请求
// string：仅用于 POST 请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式：document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
//什么时候获取？当服务器响应成果之后
//当xmlhttp对象的就绪状态改变是否为4，判断status响应状态是否为200
/*
* readyState：
* 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status：
200: "OK"
404: 未找到页面
*
* */
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
}
</script>
<body>
<input type="button" value="发送异步请求" onclick=fun();>
</body>
</html>
- JQeury实现方式
代码如下：
Ajaxservlet：
package zhang.chen.servlet;
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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String username = request.getParameter("username");
//2.打印username
System.out.println(username);
//3.做出响应
response.getWriter().write("hello :" + username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url: "ajaxServlet",//请求参数路径
type: "POST",//请求方式
//data:"username=jack&age=23",//请求参数
data: {"username": "jack", "age": "23"},
success: function (data) {
alert(data);
//响应成功后的回调函数
},
error: function () {
alert("出错了。。。")
},//表示如果请求响应出现错误，会执行的回调函数
dataType: "text"//设置接受到的响应数据的格式
});
}
</script>
<body>
<input type="button" value="发送异步请求" onclick=fun();>
</body>
</html>
-
.
g
e
t
(
)
：
发
送
g
e
t
请
求
∗
语
法
：
.get()：发送get请求 * 语法：
.get()：发送get请求∗语法：.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
//定义方法
function fun() {
//使用$.get(url, [data], [callback], [type])
/*
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。*/
$.get("ajaxServlet", {username: "rose"}, function (data) {
alert(data);
}, "text");
}
</script>
<body>
<input type="button" value="发送异步请求" onclick=fun();>
</body>
</html>
-
.
p
o
s
t
(
)
：
发
送
p
o
s
t
请
求
∗
语
法
：
.post()：发送post请求 * 语法：
.post()：发送post请求∗语法：.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<script>
//定义方法
function fun() {
//使用$.post(url, [data], [callback], [type])
/*
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。*/
$.post("ajaxServlet", {username: "rose"}, function (data) {
alert(data);
}, "text");
}
</script>
<body>
<input type="button" value="发送异步请求" onclick=fun();>
</body>
</html>
JSON：
-
概念： JavaScript Object Notation JavaScript对象表示法
Person p = new Person();
p.setName(“张三”);
p.setAge(23);
p.setGender(“男”);var p = {“name”:“张三”,“age”:23,“gender”:“男”};
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON 比 XML 更小、更快，更易解析。
-
语法：
- 基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中） {“persons”:[{},{}]}
- 对象（在花括号中） {“address”:{“province”：“陕西”…}}
- null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json 格式
- 方括号保存数组：[]
代码如下:
perosn类：
- 数据在名称/值对中：json数据是由键值对构成的
- 基本规则
package zhang.chen.domian;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;
import java.util.Date;
public class person {
private String username;
private int age;
private String gender;
// @JsonIgnore // 忽略该属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
@Override
public String toString() {
return "person{" +
"username='" + username + '\'' +
", age=" + age +
", gender='" + gender + '\'' +
'}';
}
}
json数据语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//1.定义基本格式
var person = {"username": "张三", age: 23, 'gender': true};
//alert(person);
//var username = person.username;
var username = person["username"];
//alert(username);
//2.嵌套格式{}--》[]
var persons = {
"persons": [
{"username": "张三", "age": 23, "gender": true},
{"username": "李四", "age": 24, "gender": false},
{"username": "王五", "age": 25, "gender": true},
{"username": "赵六", "age": 26, "gender": false}
]
};
var username1 = persons.persons[2].username;
//alert(username1);
//alert(persons);
//3.嵌套格式[]-->{}
var ps = [
{"username": "张三", "age": 23, "gender": true},
{"username": "李四", "age": 24, "gender": false},
{"username": "王五", "age": 25, "gender": true},
{"username": "赵六", "age": 26, "gender": false}
];
var username2 = ps[1].username;
alert(username2);
//alert(ps);
</script>
<body>
</body>
</html>
2. 获取数据:
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
4. 遍历
json遍历语法：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//3.嵌套格式[]-->{}
var person = {"name": "张三", "age": 23, "gender": true};
var ps = [
{"username": "张三", "age": 23, "gender": true},
{"username": "李四", "age": 24, "gender": false},
{"username": "王五", "age": 25, "gender": true},
{"username": "赵六", "age": 26, "gender": false}
];
//获取person对象中所有的键和值
//for in 循环
for (var key in person) {
//这个样子获取不行，因为相当于person."username"
// alert(key+":"+person.key);
//alert(key + ":" + person[key]);
}
//获取ps中所有的值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];//把数组中的每个单独的对象获取出来
for (var key in p) {
alert("key" + ":" + p[key]);
}
}
</script>
<body>
</body>
</html>
-
JSON数据和Java对象的相互转换
- JSON解析器：
- 常见的解析器：Jsonlib，Gson，fastjson，jackson
- JSON转为Java对象
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据,Class)
- Java对象转换JSON
- 使用步骤：
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
-
转换方法：
- writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 - writeValueAsString(obj):将对象转为json字符串
- writeValue(参数1，obj):
-
注解：
- @JsonIgnore：排除属性。
- @JsonFormat：属性值得格式化
- @JsonFormat(pattern = “yyyy-MM-dd”)
-
复杂java对象转换
- List：数组
- Map：对象格式一致
代码如下：
-
- 使用步骤：
- JSON解析器：
package zhang.chen.test;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import zhang.chen.domian.person;
import java.io.FileWriter;
import java.io.IOException;
import java.util.*;
public class jacksonTest {
// Java对象转为JSON字符串
@Test
public void test01() throws Exception {
//1.创建Person对象
person p = new person();
p.setUsername("张三");
p.setAge(23);
p.setGender("男");
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
/*
转换方法：
writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
writeValueAsString(obj):将对象转为json字符串
*/
String json = mapper.writeValueAsString(p);
//{"username":"张三","age":23,"gender":"男"}
System.out.println(json);
//writeValue，将数据写到d://a.txt文件中
//mapper.writeValue(new File("D:\workspace\javaIDEAspace\Ajax&&Json\src\zhang\chen\test"),p);
//writeValue.将数据关联到Writer中
mapper.writeValue(new FileWriter("D:\\workspace\\javaIDEAspace\\Ajax&&Json\\src\\zhang\\chen\\test/b.txt"), p);
}
@Test
public void test02() throws Exception {
//1.创建Person对象
person p = new person();
p.setUsername("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
String json = mapper.writeValueAsString(p);
System.out.println(json);
//{"username":"张三","age":23,"gender":"男","birthday":1601880852911}
//使用JsonFormat格式化之后得到{"username":"张三","age":23,"gender":"男","birthday":"2020-10-05"}
}
@Test
public void test03() throws Exception {
//1.创建Person对象
person p = new person();
p.setUsername("张三");
p.setAge(23);
p.setGender("男");
person p1 = new person();
p1.setUsername("张三");
p1.setAge(23);
p1.setGender("男");
person p2 = new person();
p2.setUsername("张三");
p2.setAge(23);
p2.setGender("男");
person p3 = new person();
p3.setUsername("张三");
p3.setAge(23);
p3.setGender("男");
//封装到List集合之中
List<person> ps = new ArrayList<person>();
ps.add(p);
ps.add(p1);
ps.add(p2);
ps.add(p3);
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
String json = mapper.writeValueAsString(ps);
System.out.println(json);
// [{"username":"张三","age":23,"gender":"男","birthday":null},
// {"username":"张三","age":23,"gender":"男","birthday":null},
// {"username":"张三","age":23,"gender":"男","birthday":null},
// {"username":"张三","age":23,"gender":"男","birthday":null}]
}
@Test
public void test04() throws Exception {
//1.创建Map对象
Map map = new HashMap();
map.put("username", "张三");
map.put("age", 23);
map.put("gender", "男");
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
String json = mapper.writeValueAsString(map);
System.out.println(json);
//{"gender":"男","age":23,"username":"张三"}
}
@Test
public void test06() throws IOException {
//json转Java对象
//1.初始化JSON字符串
String json = "{\"gender\":\"男\",\"age\":23,\"username\":\"张三\"}";
2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
person person = mapper.readValue(json, person.class);
System.out.println(person);
//person{username='张三', age=23, gender='男'}
}
}
案例：
- 校验用户名是否存在
- 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
- $.get(type):将最后一个参数type指定为"json"
- 在服务器端设置MIME类型
response.setContentType(“application/json;charset=utf-8”);
- 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
代码如下：
findUserServlet：
package zhang.chen.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
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;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/findUserServlet")
public class findUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取用户名
String username=request.getParameter("username");
//2.调用service层是否存在该用户
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map=new HashMap<>();
//这里先设置为tom
if("tom".equals(username)){
//存在
map.put("userExsit", true);
map.put("msg", "此用户名太受欢迎,请更换一个");
}else{
//不存在
map.put("userExsit", false);
map.put("msg", "用户名可用");
}
//3.将map转换为json，并且传递给客户端
//将map转换为json
ObjectMapper mapper = new ObjectMapper();
//并且传递给客户端
mapper.writeValue(response.getWriter(),map );
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
验证码判断页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//在页面加载完成之后
$(function () {
//给username绑定单击事件
//blur([[data],fn])
// 当元素失去焦点时触发 blur 事件。
/* data:blur([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的blur事件中绑定的处理函数*/
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送Ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
/* url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
*/
$.get("findUserServlet", {username:username}, function (data) {
//1.判断userExsit键的值是否为true
//userEsit是判断用户名是否一样
var span=$("#s_username");
if(data.userExsit){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else{
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
});
});
});
</script>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<input type="password" name="password" placeholder="请输入密码">
<input type="button" value="注册">
</form>
</body>
</html>
结果如下：
扫一扫
1300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
