Ajax介绍
Ajax是异步的JavaScript和XML
多个技术综合
,用于快速创建动态网页
可实现局部更新
原生JS实现Ajax
- 核心对象:XMLHttpRequest
用于在后台与服务器
交换数据
。可以在不重新加载整个网页的情况下,对网页的某部分进行更新
。
let xmlHttp = new XMLHttpRequest();
- 打开链接:open(method,url,async)
method:请求的类型
GET 或 POST
。
url:请求资源的路径。
async:true(异步) 或 false(同步)。
let username = document.getElementById("username").value;
xmlHttp.open("GET","userServlet?username="+username,true);
- 发送请求:send(String params)
params:请求的
参数
(POST 专用)。
xmlHttp.send();
- 处理响应:onreadystatechange
readyState:0-请求
未初始化
,1-服务器连接已建立
,2-请求已接收
,3-请求处理中
,4-请求已完成
,且
响应已就绪
。
status:200-响应
已全部 OK。
xmlHttp.onreadystatechange = function() {
//判断请求和响应是否成功
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//将响应的数据显示到span标签
document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
}
}
- 获得响应数据形式
responseText:获得
字符串
形式的响应数据。
responseXML:获得XML
形式的响应数据。
JQuery实现Ajax
get方式
- 核心语法:$.
get
(url,[data],[callback],[type]);- url:请求的资源
路径
。 - data:发送给服务器端的
请求参数
,格式可以是key=value,也可以是 js 对象。 - callback:当请求成功后的
回调函数
,可以在函数中编写我们的逻辑代码。 - type:预期的
返回
数据的类型
,取值可以是 xml, html, js, json, text等。
- url:请求的资源
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
post方式
- 核心语法:$.
post
(url,[data],[callback],[type]);- url:请求的资源
路径
。 - data:发送给服务器端的
请求参数
,格式可以是key=value,也可以是 js 对象。 - callback:当请求成功后的
回调函数
,可以在函数中编写我们的逻辑代码。 - type:预期的
返回
数据的类型
,取值可以是 xml, html, js, json, text等。
- url:请求的资源
$.post(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
通用方式
- 核心语法:$.
ajax
({name:value,name:value,…});- url:请求的资源
路径
。 - async:是否
异步请求
,true-是,false-否 (默认是 true)。 - data:发送到服务器的
数据
,可以是键值对形式,也可以是 js 对象形式。 - type:
请求方式
,POST 或 GET (默认是 GET)。 - dataType:预期的
返回
数据的类型
,取值可以是 xml, html, js, json, text等。 - success:请求
成功
时调用的回调函数。 - error:请求
失败
时调用的回调函数。
- url:请求的资源
$.ajax({
//请求资源路径
url:"userServletxxx",
//是否异步
async:true,
//请求参数
data:"username="+username,
//请求方式
type:"POST",
//数据形式
dataType:"text",
//请求成功后调用的回调函数
success:function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//请求失败后调用的回调函数
error:function () {
alert("操作失败...");
}
});
JSON的处理
JSON介绍
JSON是一种轻量级的数据交换格式
,拥有简洁和清晰的层次结构,易于人阅读和编写,易于计算机解析和生成
轻量
:组件对其环境的依赖较小
JSON转换
常用类
ObjectMapper常用方法
实例:
对象转 JSON
String json = mapper.writeValueAsString(user);
JSON 转对象
User user2 = mapper.readValue(json, User.class);
Map转 JSON
String json = mapper.writeValueAsString(map);
JSON 转 Map
HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});
List转 JSON
String json = mapper.writeValueAsString(list);
JSON 转 List
ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});