Ajax
概念
Asynchronous JavaScript And XML 异步的JavaScript和XML
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面
异步和同步
建立在客户端和服务端相互通信的基础上，分为异步和同步
同步
客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
异步
客户端不需要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
实现方式
原生的JS实现方式(了解)
创建核心对象
建立连接
参数：
- 请求方式：GET、POST
- get方式：请求参数在URL后边拼接。send方法为空参
- post方式：请求参数在send方法中定义
- 请求的URL
- 同步或异步请求
发送请求
接受并处理来自服务器的响应结果
获取方式 ：xmlhttp.responseText
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","ajaxServlet?username=tom",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>
|
JQuery实现方式
$.ajax()
语法：$.ajax(url, [settings])
- url：一个用来包含发送请求的URL字符串
- setting：Ajax请求设置。所有选项都是可选的，格式为键值对格式，键值对之间用逗号分隔
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script>
function fun(){
$.ajax({
url:"ajaxServlet111",
type:"POST",
data:{"username":"jack","age":23},
success:function(data){
alert(data);
},
error:function(){
alert("出错啦...")
},
dataType:"text"
});
}
</script>
|
$.get()
发送get请求
语法：$.get(url, [data], [callback], [type])
参数：
- url：请求路径
- data：请求参数信息
- callback：回调函数
- type：响应结果的类型
1
2
3
4
5
6
7
8
|
function fun() {
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
|
$.post()
发送post请求
1
2
3
4
5
6
7
|
function fun() {
$.post("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
|
Json
概念
JavaScript Object Notation JavaScript对象表示法
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON比XML更小、更快、更易解析
语法
基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引导（单双都行）引起来，也可以不使用引号
- 值的取值类型
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true或false）
- 数组（在方括号中）{“persons”:[{},{}]}
- 对象（在花括号中）{“address”:{“province”:”陕西”…}}
- null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json格式
- 方括号保存数组：[]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var person = {"name": "张三", age: 23, 'gender': true};
var name = person["name"];
var persons = {
"persons": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};
var name1 = persons.persons[2].name;
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
alert(ps[1].name);
</script>
</head>
<body>
</body>
</html>
|
获取数据
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var person = {"name": "张三", age: 23, 'gender': true};
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
</script>
</head>
<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字符串
注解
@JsonIgnore：排除属性
@JsonFormat：属性值得格式化
@JsonFormat(pattern=”yyyy-MM-dd”)
复杂java对象转换
- List：数组
- Map：对象格式一致
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| package cn.itcast.test;
import cn.itcast.domain.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.io.FileWriter;
import java.util.*;
public class JacksonTest {
@Test
public void test1() throws Exception {
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
mapper.writeValue(new FileWriter("d://b.txt"),p);
}
@Test
public void test2() throws Exception {
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
System.out.println(json);
}
@Test
public void test3() throws Exception {
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
Person p1 = new Person();
p1.setName("张三");
p1.setAge(23);
p1.setGender("男");
p1.setBirthday(new Date());
Person p2 = new Person();
p2.setName("张三");
p2.setAge(23);
p2.setGender("男");
p2.setBirthday(new Date());
List<Person> ps = new ArrayList<Person>();
ps.add(p);
ps.add(p1);
ps.add(p2);
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(ps);
System.out.println(json);
}
@Test
public void test4() throws Exception {
Map<String,Object> map = new HashMap<String,Object>();
map.put("name","张三");
map.put("age",23);
map.put("gender","男");
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(map);
System.out.println(json);
}
@Test
public void test5() throws Exception {
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
ObjectMapper mapper = new ObjectMapper();
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
}
|
案例
检验用户名是否存在
服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function () {
var username = $(this).val();
$.get("findUserServlet",{username:username},function (data) {
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>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| package cn.zhuixun.web.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 {
String username = request.getParameter("username");
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<String,Object>();
if("tom".equals(username)){
map.put("userExsit",true);
map.put("msg","此用户名太受欢迎,请更换一个");
}else{
map.put("userExsit",false);
map.put("msg","用户名可用");
}
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
|