AJAX
今天给大家介绍以下几个内容：
- AJAX的介绍
- AJAX的快速入门
- JSON的处理
AJAX的介绍
- AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
- 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
- 一般的网页如果需要更新内容，必需重新加载个页面。
- 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新
- 比如百度的搜索候补就是利用异步更新数据来实现的
上面提到了异步，我用一张图来解释下同步和异步：
AJAX的快速入门
- 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。
- 同步和异步 同步：服务器端在处理过程中，无法进行其他操作。 异步：服务器端在处理过程中，可以进行其他操作。
- GET 方式实现：$.get();
- POST 方式实现：$.post(); url：请求的资源路径。
data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。 type：预期的返回数据的类型，取值可以是 xml,
html, js, json, text等 - 通用方式实现：$.ajax();
url：请求的资源路径。
async：是否异步请求，true-是，false-否 (默认是 true)。
data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
type：请求方式，POST 或 GET (默认是 GET)。
dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
success：请求成功时调用的回调函数。
error：请求失败时调用的回调函数。
通过一个案例来演示AJAX的实现方式
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
$.ajax({
url:"userServlet",
async:"true",
dataType:"text",
type:"GET",
success:function (data) {
$("#uSpan").html(data+"ys");
},
error:function () {
alert("操作失败");
}
});
});
</script>
</html>
后台代码（我这里用servlet来演示）：
package com.web;
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("/userServlet")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置请求和响应的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//1.获取请求参数
String username = req.getParameter("username");
//2.判断姓名是否已注册
if("zhangsan".equals(username)) {
resp.getWriter().write("<font color='red'>用户名已注册</font>");
}else {
resp.getWriter().write("<font color='green'>用户名可用</font>");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
效果图：
JSON的处理
- JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
- 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的 提升网络传输效率。
我们可以利用工具来将其他类型的数据转换为JSON格式
转换一些常用的数据类型：
package com.test;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
/*
JSON转换工具的使用
*/
public class ObjectMapperTest {
private ObjectMapper mapper = new ObjectMapper();
/*
1.User对象转json, json转User对象
json字符串 = {"name":"张三","age":23}
user对象 = User{name='张三', age=23}
*/
@Test
public void test01() throws Exception{
//User对象转json
User user = new User("张三",23);
String json = mapper.writeValueAsString(user);
System.out.println("json字符串：" + json);
//json转User对象
User user2 = mapper.readValue(json, User.class);
System.out.println("java对象：" + user2);
}
/*
2.map<String,String>转json, json转map<String,String>
json字符串 = {"姓名":"张三","性别":"男"}
map对象 = {姓名=张三, 性别=男}
*/
@Test
public void test02() throws Exception{
//map<String,String>转json
HashMap<String,String> map = new HashMap<>();
map.put("姓名","张三");
map.put("性别","男");
String json = mapper.writeValueAsString(map);
System.out.println("json字符串：" + json);
//json转map<String,String>
HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
System.out.println("java对象：" + map2);
}
/*
3.map<String,User>转json, json转map<String,User>
json字符串 = {"一班":{"name":"张三","age":23},"黑马二班":{"name":"李四","age":24}}
map对象 = {一班=User{name='张三', age=23}, 黑马二班=User{name='李四', age=24}}
*/
@Test
public void test03() throws Exception{
//map<String,User>转json
HashMap<String,User> map = new HashMap<>();
map.put("一班",new User("张三",23));
map.put("二班",new User("李四",24));
String json = mapper.writeValueAsString(map);
System.out.println("json字符串：" + json);
//json转map<String,User>
HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});
System.out.println("java对象：" + map2);
}
/*
4.List<String>转json, json转 List<String>
json字符串 = ["张三","李四"]
list对象 = [张三, 李四]
*/
@Test
public void test04() throws Exception{
//List<String>转json
ArrayList<String> list = new ArrayList<>();
list.add("张三");
list.add("李四");
String json = mapper.writeValueAsString(list);
System.out.println("json字符串：" + json);
//json转 List<String>
ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
System.out.println("java对象：" + list2);
}
/*
5.List<User>转json, json转List<User>
json字符串 = [{"name":"张三","age":23},{"name":"李四","age":24}]
list对象 = [User{name='张三', age=23}, User{name='李四', age=24}]
*/
@Test
public void test05() throws Exception{
//List<User>转json
ArrayList<User> list = new ArrayList<>();
list.add(new User("张三",23));
list.add(new User("李四",24));
String json = mapper.writeValueAsString(list);
System.out.println("json字符串：" + json);
//json转List<User>
ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});
System.out.println("java对象：" + list2);
}
}
以上就是本次介绍的全部内容了，如果有不恰当的地方，欢迎指正。
3341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
