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等。

 $.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等。

$.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：请求失败时调用的回调函数。

$.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>>(){});