## AJAX 基本概念
考虑客户端（如浏览器）与服务器端相互通信的情况，服务器处理客户端的请求并作出响应是需要一定的时间的，同步是指客户端在等待服务器端响应期间，无法进行其他操作，而异步是指，此期间内客户端可以进行其他操作。
AJAX，Asynchronous JavaScript And XML，即异步的 JavaScript 和 XML。
AJAX 是一种无需重新加载整个网页的情况下，更新部分网页内容的技术，通过与服务器进行少量的数据交换，AJAX可以实现网页的异步更新。传统的网页，例如之前 JSP 页面，如果需要更新内容，必须重载整个网页页面。
## 原生 JavaScript 实现 AJAX
首先写一个简单的页面，包含一个 `button` 表单，和一个 `h1` 用于展示服务器的返回结果
```html
js原生方式实现Ajax
异步请求
这里是服务器返回的内容
```
然后是一段 js 脚本，给 `button` 绑定一个点击事件
```js
```
服务器端准备一个 Servlet
```java
@WebServlet(urlPatterns = {"/ajaxServlet"})
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
System.out.println("收到AJAX异步请求，username="+username);
// 使用流的方式响应，需要设置MIME类型和编码方式
response.setContentType("html/text;charset=utf-8");
response.getWriter().write("hello "+username+"，服务器收到信息");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
```
可以看到，使用原生 js 的方式实现 AJAX 请求响应还是比较麻烦的，推荐使用 jQuery 框架实现
## 使用 jQuery 实现 AJAX
### 方式一：使用 $.ajax()
基本语法：`$.ajax({键值对})`
```js
```
### 方式二：使用 $.get()
基本语法：`$.get([url], [data], [callback], [type])`，其中参数
`url`：请求的 url 路径
`data`：请求参数，一般使用 json 格式
`callback`：回调函数
`type`：响应数据格式
```js
$.get("/AjaxDemo/ajaxServlet",{"username":"tom","age":18},function (text) {
$("#response").text(text);
},"text");
```
### 方式三：使用 $.post()
基本语法：`$.post([url], [data], [callback], [type])`，其中参数
`url`：请求的 url 路径
`data`：请求参数，一般使用 json 格式
`callback`：回调函数
`type`：响应数据格式
```js
$.post("/AjaxDemo/ajaxServlet",{"username":"tom","age":18},function (text) {
$("#response").text(text);
},"text");
```
## JSON 基本概念和语法
JSON，JavaScript Object Notation，即 JavaScript 对象表示法，现在多用于存储和交换**文本信息**，JSON 比 XML 更小、更快，更易解析。
### JSON 基本语法规则
JSON 对象整体由花括号 `{}` 定义，数据由键值对构成，键值对之间由逗号 `,` 分隔，键名建议使用双引号引起（单引号或不使用引号也可），值可以有以下类型：
* 数字：整型或浮点型
* 字符串：使用双引号引起
* 布尔值：`true` 或 `false`
* 数组：使用方括号 `[]`，例如 `{"persons":[{},{}]}`
* JSON 对象：使用花括号 `{}`，例如 `{"address":{"province":"山东"，"city":"济南"}}`
* null：较少使用
```js
var person = {"name":"张三","age":19,"gender":"男"};
var persons = {"persons":[{"name":"张三","age":19,"gender":"男"},
{"name":"李四","age":20,"gender":"男"},
{"name":"王五","age":21,"gender":"女"}]};
```
### JS 中获取 JSON 数据
1. 获取 json 对象中的值
`json对象.键名` 或者 `json对象["键名"]`
```js
// 获取 person 对象的 age 并赋值
var age = person.age;
age = person["age"];
```
2. 获取数组对象中的
`数组对象[索引]`
```js
// 获取persons中第二个对象的name并弹出
alert(persons.persons[1].name);
```
3. 遍历
遍历一个 JSON 对象，弹出所有键值对
```js
for(var key in person) {
// 错误方式，因为相当于 person."key"
// alert(key +":"+ person.key);
// 正确方式
alert(key +":"+ person[key]);
}
```
遍历一个 JSON 对象数组，并弹出所有 JSON 对象的键值对
```js
// 一个json对象的数组
var ps = [{"name":"张三","age":19,"gender":"男"},
{"name":"李四","age":20,"gender":"男"},
{"name":"王五","age":21,"gender":"女"}];
// 双层循环
for(var i=0;i
list = new ArrayList<>();
list.add(p1);
list.add(p2);
list.add(p3);
ObjectMapper mapper = new ObjectMapper();
try {
String json = mapper.writeValueAsString(list);
System.out.println(json);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
```
打印结果为：`[{"name":"张三","age":25},{"name":"李四","age":24},{"name":"王五","age":23}]`
* Map
Map 以键值对的形式存储数据，转换成 json，仍然保持原有的键值对结构
```java
Map map = new HashMap<>();
map.put("name","张三");
map.put("age",25);
map.put("gender","男");
ObjectMapper mapper = new ObjectMapper();
try {
String json = mapper.writeValueAsString(map);
System.out.println(json);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
```
打印结果为：`{"gender":"男","name":"张三","age":25}`
## 参考
* [黑马 JavaWeb](https://www.bilibili.com/video/BV1J4411877m)
