文章目录
- 一、Ajax
- 1.1 概念
- 1.2 实现方式
- 1.2.1 原生的JS实现方式
- 1.2.2 JQuery实现方式
- 二、JSON
- 2.1 概念
- 2.2 语法
- 2.2.1 基本规则
- 2.2.2 获取数据
- 2.3 JSON数据和Java对象的相互转换
- 2.3.1 JSON解析器
- 2.3.2 JSON对象转为Java对象
- 2.3.3 Java对象转为JSON对象
- 三 案例 - 校验用户名是否存在
一、Ajax
1.1 概念
- ASynchronous JavaScript And XML：异步的JavaScript和XML
- 什么是异步和同步？？客户端和服务器端相互通信的
- 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
- 特点：
- Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
- 通过在后台与服务器进行少量数据交换，Ajax可以是网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
- 传统的网页（不适用Ajax）如果需要更新内容，必须重载整个网页页面。
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 提升用户的体验。
1.2 AJAX实现方式
1.2.1 原生的JS实现方式(了解)
html界面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun(){
//发送异步请求
//1.创建核心请求对象（不同版本浏览器获取不同的对象）
//（这段代码不需要背，www.w3school上面有）
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. 建立请求连接
/*
open方法的参数：
第一个参数： 请求方式：GET POST
第二个参数： 请求的URL(请求那一个Servlet)
第三个参数： 同步或异步请求 true（异步）或 false（同步）
*/
xmlhttp.open("GET","AjaxServlet?username=tom",true);
/*
请求的参数的定义
* get方式的请求参数在url后边拼接。send方法空参
* post方式的请求参数在send方法中定义
*/
//3. 发送请求
xmlhttp.send();
//4. 客户端浏览器接收并处理来自服务器的响应结果
//获取方式：xmlhttp.responseText
//什么时候获取？当服务器响应后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，并且再次判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText)
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">
</body>
</html>
- Servlet代码
package cn.itcast.web.servlet;
import java.io.IOException;
@javax.servlet.annotation.WebServlet("/AjaxServlet")
public class AjaxServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
//1. 获取请求参数
String username = request.getParameter("username");
//处理业务逻辑。耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2. 打印username
System.out.println(username);
//3. 响应
response.getWriter().write("hello," + username);
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
this.doPost(request, response);
}
}1.2.2 JQuery实现方式
$.ajax()发送请求的通用4方式
- 语法：
$.ajax({键值对})
$.ajax({
url:"",//设置请求的资源路径（一般为一个servlet的路径）
data:{json的数据格式},//设置请求参数
data:"参数1=值1 & 参数2=值2 &..." //设置请求参数
success:function(data){//设置成功后的回调函数,data是响应回来的东西},
dataType:"JSON",//设置接收到的响应的数据类型
type:"GET", //设置请求的方式
async:true //默认异步，false为同步
error:funcation(){},//如果请求出现错误，执行的函数
还有很多的设置，w3shool上的api自己去看
});$.get()：发送get请求
-
语法：
$.get(url,[data],[callback],[type])
-
url：请求路径 -
data：请求参数。如："name=zhangsan&age=18",或使用json格式 -
callback：回调函数 -
type：响应结果的类型
$.get("AjaxServlet",{username:"tom"},function (data) {
alert(data)
},"text");$.post()：发送post请求 语法：$.post(url,[data],[callback],[type])
$.post("AjaxServlet",{username:"tom"},function (data) {
alert(data)
},"text");二、JSON
2.1 概念
- JavaScript Object Notation：JavaScript对象表示法
Person p = new Person();
p.setName("张三");
p.setAge(23);var p = {"name":"张三","age":23};- 1
- JSON 是存储和交换文本信息的语法
- 进行数据的传输。
2.2 语法
2.2.1 基本规则
- 数据在名称/值对中：json数据是由键值对构成的
- 键用引号（单双都行）引起来，也可以不使用引号
- 值的取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（
true或false） - 数组（在方括号中）：
{"persons":[{},{}]} - 对象（在花括号中）:
{"address":{"province":"浙江"...}} null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用
{}定义json格式 - 方括号保存数组：
[]
<script>
//1. 定义基本格式
var person = {"name":"张三", "age":23, "gender":"男"}；
alert(person.name);
//2. 嵌套格式 {} -> []
var persons = {
"persons":[
{"name":"zhangsan", "age":23},
{"name":"lisi", "age":21},
{"name":"wangwu", "age":26}
]
};
//2. 嵌套格式 [] -> {}
var p = [
{"name":"zhangsan", "age":23},
{"name":"lisi", "age":21},
{"name":"wangwu", "age":26}
];
</script>2.2.2 获取数据
json对象.键名json对象["键名"]json数组对象[下标]
<script>
//1. 定义基本格式
var person = {"name":"张三", "age":23, "gender":"男"};
// alert(person.name);
//2. 嵌套格式 [] -> {}
var ps = [
{"name":"zhangsan", "age":23},
{"name":"lisi", "age":21},
{"name":"wangwu", "age":26}
];
//获取person对象中所有的键和值
//for in 循环
for(var key in person){
// alert(key + "---" + person.key);//person.key相当于person."name"，key为字符串形式
alert(key + "---" + person[key]);
}
//获取ps中的所有值 - 双层for循环
for(var i = 0; i < ps.length; i++){
var p = ps[i];//把数组中的每个元素拿出来
for(var key in p){ //把每个元素中的键拿出来
alert(key + "---" + p[key]);
}
}
</script>2.3 JSON数据和Java对象的相互转换（在.java中）
2.3.1 JSON解析器
- 常见的解析器：Jsonlib,Gson,fastjson,jackson
- 解析器：封装好的java类（.jar)）
2.3.2 JSON对象转为Java对象
- 使用步骤
- 导入
Jackson的相关jar包 - 创建
Jackon核心对象:ObjectMapper - 调用
ObjectMapper的相关方法进行转换
-
readValue(json字符串, Class)将Json字符串转化为什么样的对象Class
2.3.3 Java对象转为JSON对象
- 使用步骤
- 导入
Jackson的相关jar包 - 创建
Jackon核心对象:ObjectMapper - 调用
ObjectMapper的相关方法进行转换
- 常见的转换方法：
writeValue(参数1,obj)
- 常见的参数1有：
-
File：将obj对象转换为JSON字符串，并保存到指定的文件中 -
Writer：将obj对象转换为JSON字符串，并将JSON数据填充到字符输出流中 -
OutputStream：将obj对象转换为JSON字符串，并将JSON数据填充到字节输出流中
-
writeValueAsString(obj)将对象转为json字符串
public void test1() throws Exception {
//1. 创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//2. 创建Jackson的核心对象 ObjectMapper
ObjectMapper om = new ObjectMapper();
//3. 转换
String json = om.writeValueAsString(p);
System.out.println(json);//{"name":"张三","age":23,"gender":"男"}
//writeValue：将数据写到d://text文件中
om.writeValue(new File("d://a.txt"), p);
//writeValue：将数据关联到Writer中
om.writeValue(new FileWriter("d://b.txt"), p);
}- 注解：
@JsonIgnore：排除属性（对象被排除的属性就不会转为JSON字符串了）（添加到User类中对于的属性上或者对于的get方法上）
@JsonIgnore//忽略birthday
private Date birthday;@JsonFormat：属性值的格式化（对于的属性被转化为JSON的时候，先被格式化）（添加到User类中对于的属性上或者对于的get方法上）
//pattern为设置格式化的规则
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;- 复杂的java对象转换JSON数据
-
List集合转JSON：转为数组 [ {}，{}，{}，....] -
Map集合转JSON：对象格式一致 { "键"="值",.....}
三 案例 - 校验用户名是否存在
- 校验用户名是否存在
- 服务器响应的数据，在客户端使用时，要想当做json数据格式使用
-
$.get(...,"json"):将最后一个参数指定为json - 在服务器端设置MIME格式
response.setContentType("application/json;charset=utf-8");
- 注册页面
<!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事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExist":true, "msg":"此用户已注册，请更换"}
// {"userExist":false, "msg":"用户名可用"}
$.get("findUserServlet", {username:username}, function (data) {
//判断userExist键的值是否为true
var span = $("#s_username");
if(data.userExist){
//用户名存在
span.css("color", "red");
span.html(data.msg);
} else {
//用户名不存在
span.css("color", "green");
span.html(data.msg);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username"></span><br>
<input type="password" name="password" placeholder="请输入密码"> <br>
<input type="submit" value="注册">
</form>
</body>
</html>findUserServlet
package cn.itcast.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 {
//1. 获取用户名
String username = request.getParameter("username");
//2. 调用service层判断用户名是否存在
//期望服务器响应回的数据格式：{"userExist":true, "msg":"此用户已注册，请更换"}
// {"userExist":false, "msg":"用户名可用"}
//解决乱码
// response.setContentType("text/html;charset=utf-8");
//设置响应的格式为json
response.setContentType("application/json;charset=utf-8");
Map<String, Object> map = new HashMap<>();
if("tom".equals(username)){
//存在
map.put("userExist", true);
map.put("msg", "此用户已注册，请更换");
} else{
//不存在
map.put("userExist", false);
map.put("msg", "用户名可用");
}
//将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);
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
