## 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)