AJAX :
概念:
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
AJAX是一种能够不用从新加载整个页面 , 就可以更新部分页面的技术
异步和同步 : 客户端和服务器端通信的基础上
同步 :
- 同步代码块 :
- 加 synchronous 代码块
- 客户端必须等待服务器端的响应 , 在等待服务器响应的期间 , 客户端不能做其他操作
异步 :
- 客户端不需要等待服务器端的响应 , 在服务器处理请求的过程中 , 客户端可以去进行其他操作
实现方式 :
1.原生的JS实现方式 :
-
<script> //定义方法 function fun() { //发送异步请求 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+ , Firefox , Chrome , Opera , Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE5 , IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2.建立连接 xmlhttp.open("GET" , "AjaxServlet" , true); /* 参数 : 1.请求方式 : GET / POST GET请求 : 参数是在URL后边拼接 , send方法为空参 xmlhttp.open("GET" , "AjaxServlet?username=sichen " , true); POST请求 : 参数是在send中定义的 , xmlhttp.send("username=sichen"); 2.请求路径 : URL 3.异步或同步 : true(异步) , false(同步) * */ //3.发送请求 : xmlhttp.send(); //4.接受并处理响应结果 //获取方式 : //什么时候获取 ? 当服务器响应成功后再获取 //当xmlhttp对象的就绪状态改变时 , 触发事件onreadystatechange xmlhttp.onreadystatechange = function () { //判断就绪状态 readyState 是否为4 并且再次判断响应的状态码是否是200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 , // document.getElementById("myDiv").innerHTML = xmlhttp.responseText; var text = xmlhttp.responseText; alert(text); } } } </script>
2.JQuery的实现方式 :
(1) $.ajax()
-
语法 : $.ajax ( url , [ settings ]) / $.ajax({ 键值对 })
-
<script> //定义方法 function fun() { //使用$.ajax()的方式发送异步请求 $.ajax({ //请求路径 url: "ajaxServlet111", //请求方式 type: "POST", //请求参数 //data:"username=sichen&age=21", //第二种方式的请求参数 JSON格式的 data: {"username": "sichen", "age": 21}, //响应成功后的回调函数 success:function (data) { //这个data就是服务器响应过来的数据 , 随便定义一个变量接收即可 alert(data); }, //如果请求响应出现错误会执行的回调函数 error:function (){ alert("出错了..."); }, //设置接收到的响应数据的格式 dataType:"text" }); } </script>
(2) $.get()
- $.get ( url , [ data ] , [ callback ] , [ type ]) , 就不用再在前边加属性名和 : 了
- url : 请求路径
- data : 请求参数
- callback : 回调函数
- type : 响应结果返回类型
- xml, html, script, json, text, _default
<script>
//定义方法
function fun() {
//使用$.get()的方式发送异步请求
$.get(
"ajaxServlet",
{username:"chen"},
function (data){
alert(data);
},
"text"
);
}
</script>
(3) $.post() 和 $.get () 方法一致 , 只是方法名称不一样
<script>
//定义方法
function fun() {
//使用$.get()的方式发送异步请求
$.post(
"ajaxServlet",
{username:"chen"},
function (data){
alert(data);
},
"text"
);
}
</script>
JSON :
概念 :
JavaScript Object Notation JavaScript对象表示法
-
var p = { " name " : " sichen " , " age" : 23 , " genter " : " 男 " };
json现在多用于存储和交换文本信息的语法 ,
- 进行数据的传输 ,
json的语法 :
1.基本规则 :
-
数据在名称/值对中 , json数据是由键值对构成的
-
键用引号引起来 , 单双都行 , 也可不使用引号
-
值的取值类型 ,
-
数字 : (整数或浮点数)
-
字符串 : (在双引号之间)
-
逻辑值 : ( true 或 false )
-
数组 : 在方括号中 可以获取多个person对象 , 封装在数组中 , 每一个数据就是一个person对象
-
{ " persons " : [ {"年龄":23 , "性别":"男" ..} , {"年龄":21 , } ] } -
对象 : 在花括号中
-
{ "address" : { "省":"河南" , "市":"南阳" , "区":"卧龙区" ... } } -
null
-
-
-
数据由逗号分隔 : 多个键值对之间由逗号分隔
-
花括号保存对象 : 使用 { } 定义 json 格式
-
方括号保存数据 : [ ]
演示:
<script>
//定义基本格式 :
var person = {"name": "思尘", age: 23, 'gender': true};
alert(person);
//嵌套格式 : {} --> []
var persons = {
"persons": [
{"name": "思尘", "age": 23, "gender": true},
{"name": "尘", "age": 21, "gender": false},
{"name": "怪", "age": 99, "gender": true}
]
};
alert(persons);
//数组方式嵌套 : [] --> {}
var ps = [
{"name": "思尘", "age": 23, "gender": true},
{"name": "尘", "age": 21, "gender": false},
{"name": "怪", "age": 99, "gender": true}
];
alert(ps);
</script>
获取数据 :
1.json对象 .键名 (这里键名不需要加引号)
-
<script> alert(person.name + "年龄:" + person.age + person.gender); </script>
2.json对象 [ " 键名 " ] (这种方式需要加引号) (为遍历做服务的)
3.数组对象 [ 索引 ] .键名
//获取对象中数组中的值
alert(persons.persons[0].name);
JSON的遍历 :
使用 for in 格式遍历
//定义基本格式 :
var person = {"name": "思尘", age: 23, 'gender': true};
//-------------------------------------------------------
//获取person对象中所有的键和值
for (var key in person) {
//这样的方式不行 , 相当于 person."name" ;
// alert(key + person.key);
alert(key +":"+ person[key]);
//这样相当于 person["name"] , 这样就可获取到值了
}
双重循环遍历
//数组方式嵌套 :
var ps = [
{"name": "思尘", "age": 23, "gender": true},
{"name": "尘", "age": 21, "gender": false},
{"name": "怪", "age": 99, "gender": true}
];
//------------------------------------------------------------
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for (var key in p) {
alert(key + ":" + p[key]);
}
}
JSON数据和java对象的相互转换(使用jackson工具)
网络交互的时候 , 要使用json来进行数据交互 , 这个时候就要将json数据和java对象相互转换
因为客户端支持json 解析 , 所以一般在java中查到的数据 , 就转换为json类型的数据 , 发送到前端 , 前端获取非常简单
会使用json的解析器来进行解析 :
- 常见的解析器 :
- Jsonlib : 官方提供的解析工具
- Gson : 谷歌提供的一种高效解析工具
- fastJson : 阿里巴巴提供的一个解析工具
- jackson : 是后期 学习的springMVC框架内置的解析器 ,
1.json转java对象
2.java对象转换为json
使用步骤 :
1.导入jeckson的jar包
2.创建 jackson 的核心对象 , ObjectMapper
3.调用 ObjectMapper 的相关方法进行转换
//1.创建几个person对象
Person p = new Person();
p.setName("思尘"); p.setAge(21); p.setGender("男");
//2.创建jackson核心对象 , ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
/*
转换方法 :
1.writeValue(参数 , obj)
参数 :
File : 将obj对象转换为json字符串 , 并保存到指定的文件中
Writer : 将obj对象转换为jsom字符串 , 并将json数据填充到字符输出流中
OutputStream : 将obj对象转换为jsom字符串 , 并将json数据填充到字节输出流中
2.writeValueAsString(Object) : 将对象转换为json字符串
* */
String s = mapper.writeValueAsString(p);
System.out.println(s);
//输出 : {"name":"思尘","age":21,"gender":"男"}
}
//将数据写到d盘一个文件中
mapper.writeValue(new File("D://日记本//json.txt"), p);
//将数据关联到一个Writer中
mapper.writeValue(new FileWriter("D://日记本//json2.txt"),p);
3.复杂的java对象转换 :
1.List :
-
创建了一个List数组 , 放入三个person对象 ,
-
输出 :
-
[ {"name":"思尘","age":21,"gender":"男","birthday":"2022-02-13"} , {"name":"思尘","age":21,"gender":"男","birthday":"2022-02-13"} , {"name":"思尘","age":21,"gender":"男","birthday":"2022-02-13"} ]
2.Map :
-
输出 :
-
{"gender":"男","name":"思尘","age":23}
注解 :
这两个注解都是加在javabean文件的属性上的 ,
加第一个 , 在生成json数据的时候 , 就会忽略这个属性
1.@JsonIgnore : 排除属性
//忽略这个属性
@JsonIgnore
private Date birthday;
2.@JsonFormat : 属性值的格式化 要加一个pattern (模式的意思 )
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
JSON转java对象
步骤 :
1.导入JSON相关的jar包
2.创建JSON的核心对象 , ObjectMapper
3.调用ObjectMapper的相关方法进行转换 :
-
readValue ( json字符串数据 , Class)
-
//初始化json的字符串 String json = "{\"name\":\"思尘\",\"age\":21,\"gender\":\"男\",\"birthday\":\"2022-02-13\"}"; //创建json的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); Person person = mapper.readValue(json, Person.class); System.out.println(person);
案例 : 校验用户名是否存在
使用的是异步技术 , 当文本框离焦之后 , 发送异步请求 , 进行校验
服务器响应的数据 , 在客户端使用时 , 要想当做json数据格式使用 ,
1.$.get( type ) : 将最后一个参数type设置为 " json " ,
2.如果客户端不指定的话 , 在服务器中 , response中可以指定返回值数据格式 : 异步请求就会自动识别返回值类型
response.setContentType("application/json;charset=UTF-8");
HTML:
<!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();
//发送ajax请求
$.get(
"findUserServlet",
{username: username},
//期望服务器响应回调的数据格式
// { "userExist" : true(存在) , "msg" : "此用户名太受欢迎 , 请更换一个" }
// { "userExist" : false(不存在) , "msg" : "可用" }
function (data){
var span = $("#s_username");
//判断userExist键的值是否是true
if (data.userExist){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else {
//用户名不存在
span.css("color","YELLOW");
span.html(data.msg);
}
},
"json");
});
});
</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="注册">
</form>
</body>
</html>
FindUserServlet:
package cn.sichen.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/text;charset=UTF-8");
//获取用户名 :
String username = request.getParameter("username");
//写一个Map集合 ,
Map<String, Object> map = new HashMap<String, Object>();
// { "userExist" : true(存在) , "msg" : "此用户名太受欢迎 , 请更换一个" }
// { "userExist" : false(不存在) , "msg" : "可用" }
//调用service层判断 数据 (这里省略了)
if ("sichen".equals(username)) {
map.put("userExist" , "true");
map.put("msg" ,"此用户名太受欢迎 , 请更换一个");
} else {
map.put("userExist" , "false");
map.put("msg" ,"可用");
}
ObjectMapper mapper = new ObjectMapper();
//因为是纯文本 ,直接使用mapper的writeValue()方法 ,
//使用字符输出流即可 , 将数据输出到客户端
mapper.writeValue(response.getWriter() , map);
}
}
此用户名太受欢迎 , 请更换一个" }
// { “userExist” : false(不存在) , “msg” : “可用” }
//调用service层判断 数据 (这里省略了)
if (“sichen”.equals(username)) {
map.put(“userExist” , “true”);
map.put(“msg” ,“此用户名太受欢迎 , 请更换一个”);
} else {
map.put(“userExist” , “false”);
map.put(“msg” ,“可用”);
}
ObjectMapper mapper = new ObjectMapper();
//因为是纯文本 ,直接使用mapper的writeValue()方法 ,
//使用字符输出流即可 , 将数据输出到客户端
mapper.writeValue(response.getWriter() , map);
}
}
扫一扫
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
