AJAX(Asynchronous JavaScript And XML)
异步的JavaScript和XML
多种技术综合 用于快捷创建东陶网页的技术
一般的网页如果需要更新内容 必须重新加载整个页面
而AJAX通过浏览器与服务器进行少量数据交换 就可以使网页实现异步更新
也就是在不重新加载整个页面的情况下 对网页部分内容进行局部更新
同步 在客户端请求服务器过程中 客户端只能处于等待过程
同步 在客户端请求服务器过程中 客户端可以执行其他的操作
Jquery 实现对应的异步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名 : <input type="username" id="username">
<span id="uSpan" ></span>
<br>
密码: <input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script>
// 围殴姓名绑定失去焦点
document.getElementById("username").onblur=function () {
// 创建XMLRquet核心对象
// 会存在let 对应的报错 在settings中的JavaScript 提高对应的js版本
let xmlHttp = new XMLHttpRequest();
// 打开链接
let username = document.getElementById("username").value;
// 提交方式 提交的资源路径 true 代表着 是否异步
xmlHttp.open("GET","userServlet?username="+username,true);
// 发送请求
xmlHttp.send();
// 处理响应
xmlHttp.onreadystatechange = function () {
// 判断请求状态和响应状态是否成功
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 将响应的数据显示到span标签中
document.getElementById("uSpan").innerHTML =xmlHttp.responseText;
}
}
}
</script>
</html>
Servket层 进行处理响应
package com.example.AJAX;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
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");
// 获取请求参数
String username = req.getParameter("username");
// 模拟服务器处理请求需要5秒钟
try{
Thread.sleep(5000);
}catch (InterruptedException e){
e.printStackTrace();
}
// 判断姓名是否以及注册过 在页面进行展示
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);
}
}
利用Get和Post实现对应的异步操作
在这里插入代码片
<!-- Jquery的Get方式实现AJAX-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名 : <input type="username" id="username">
<span id="uSpan" ></span>
<br>
密码: <input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// 用户名绑定失去焦点
$("#username").blur(function () {
// 获取到所填写的数据
let username = $("#username").val();
// JQuery的GEt或者POST 方式实现AJAX
$.get(
// 请求资源路径
"userServlet",
// 请求参数
"username=" + username,
function (data) {
// 将响应数据显示到span标签
$("#uSpan").html(data);
},
// 响应数据
"text"
);
});
</script>
</html>
通用的异步操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名 : <input type="username" id="username">
<span id="uSpan" ></span>
<br>
密码: <input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// 用户名绑定失去焦点
$("#username").blur(function () {
let username = $("#username").val();
// JQuery的通用的方式实现AJAX
$.ajax({
// 请求的资源路径
url:"userServlet",
// 是否异步
async : true,
// 请求参数
data:"username="+username,
// 请求方式
type:"GET",
// 数据形式
dataType:"text",
// 请求成功后的回调函数
success:function (data) {
// 将响应的事件 显示到Uspan标签’
$("#uSpan").html(data);
},
// 请求失败之后回调函数
error:function () {
alert("操作失败");
},
});
});
</script>
</html>
核心对象 XMlHttpRequest
用于在后台服务器交换数据 可以在不重新加载整个网页的情况下 对网页的某部分进行更新
打开链接 open(method ,url , async)
请求类型 请求的类型GET和POST
请求的资源路径 如果是get请求需要在资源路径上拼接上 如果是POST方法 需要在send中进行传递
异步true或者同步false
发送请求 send (String params)
params 请求的参数(POST专用)
处理响应 onreadystatechange
readyState 0 请求为初始化 1 服务器连接已建立 2 请求处理中 3 请求处理中 4 请求已完成 且已经响应
status 200 响应已全部ok
获得响应数据形式
responseText 获得字符串形式的响应数据
reponseXML 获得XML形式的响应数据
JQuery 的POST方式实现AJAX
$.post{url, [data], [callback], [type]};
url 请求的资源路径
data 发送给服务器的请求参数 格式可以实key=value 也可以是js对象
callback 当请求成功后的回调函数 可以在函数中编写我们的逻辑代码
type 预期返回数据的类型 取值可以是xml html js json text
核心语法 $,ajax(name.value , name,vlaue …)
url 请求的资源路径
async 是否异步请求 true 是 false 否 默认是true
data 发送到服务器的数据 可以是键值对形式 也可以是js对象形式
type 请求方式 PIOST或GET 默认是GET
dataType 预期返回数据的类型 取值可以实xml html js json text
success 请求成功事件调用的回调函数
error 请求失败时调用的回调函数
对应的Json处理
json 是一种轻量级的数据交换格式
对象类型 {name: value ,name:value …}
数组/集合类型 {name: value … {name: value}}
混合类型 {name : [{name : value }, {name:value} ]} name 是字符串类型 value 可以是任意类型
Stringfy (对象) 将指定对象转为为json 格式字符串
parse (字符串) 将指定json字符串解析成对象
json转换工具
jackson 开源免费JSON转换工具 SPringMVC 转换默认使用jackson
objectMapper 是jackson 工具包的核心类 他提供一些方法实现json字符串和对象之间转换
TypeReference 对集合范型的凡序列化 使用TypeReference可以明确的指定反序列化的对象类型
objectMapper
String writeValueAsString(Object obj ) 将java对象转换成json字符串
T readValue(String json , Class valueType) 将json字符串转换成java对象
T readValue(String json, TypeReference valueTypeRef) 将json字符串转换成json对象
package com.example.AJAX;
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;
public class ObjectMapperTest {
private ObjectMapper mapper = new ObjectMapper();
/**
*
* User对象转json json转User对象
* json 字符串 = { “name”: "zhangsan","age": 23}
* User 对象 = User{name=’zhangsan‘ ,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);
}
@Test
public void test02() throws Exception{
// HashMap 对象转json
HashMap<String,String > map = new HashMap<>();
map.put("姓名","张三");
map.put("性别","男");
String json = mapper.writeValueAsString(map);
System.out.println("json字符串 :" +json);
// json 转 HashMap 对象
HashMap<String,String> map2 = mapper.readValue(json,HashMap.class);
System.out.println("json字符串 :" + map2);
}
@Test
public void test03() throws Exception{
// ArrayList 对象转json
ArrayList<String> list = new ArrayList<>();
list.add("张三");
list.add("李四");
String json = mapper.writeValueAsString(list);
System.out.println("json字符串 :" +json);
// json 转 ArrayList
ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
System.out.println("java对象 :" + list2);
}
@Test
public void test04() throws Exception{
// List<User>(自定义类型) 对象转json
ArrayList<User> list = new ArrayList<>();
list.add(new User("张三",34));
list.add(new User("李四",23));
String json = mapper.writeValueAsString(list);
System.out.println("json字符串 :" +json);
// json 转 List<User>(自定义类型)
ArrayList<String> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});
System.out.println("java对象 :" + list2);
}
}