Ajax和JSON
Ajax：异步的JavaScript和XML
1. 比较
没有Ajax的：
有Ajax：
2.XMLHttpRequest
（1）属性
服务器响应：
①responseText：字符串形式的响应数据
②responseXML：XML形式响应数据
3. 实现方式
3.1 原生JS实现
function fun() {
//发送异步请求
//1.创建核心对象
var xmlHttp;
if(window.XMLHttpRequest) { //非IE浏览器
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { //IE浏览器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
}
}
}
//2. 建立连接
//参数1：请求方式
//参数2：请求的URL
//参数3：true，异步 false，同步
xmlHttp.open("GET","ServletTest?name=xt",true);
//xmlHttp.open("POST","test.txt",true);
//3.发送请求
xmlHttp.send();
//xmlHttp.send("name=value"); //post请求的参数
//4.接收并处理服务器的响应结果
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState==4 && xmlHttp.status==200) {
document.getElementById("div2").innerHTML=xmlHttp.responseText;
}
}
}
3.2 JQuery方式
（1）$.ajax
<script> function fun(){ $.ajax({ url:"ServletTest", //url type:"POST", //请求方式 data:{"name":"xt","age":20}, success:function (data) { //响应成功的回调函数 var x = $("#input2"); x.val(data); } }); } </script>
（2）$.get("url",data,callBack,dataType)
发送GET请求
（3）$.post("url",data,callBack,dataType)
发送POST请求
------------------------------------------------------------------------------------------------------------------------------------------
JSON
javascript对象表示法
比XML更小，能更快解析
语法：
键值对保存一个数据
多个数据逗号分隔
[ ] 保存数组
{ } 保存对象
值：
数字、字符串、逻辑值、数组、对象、null
例子：
定义一个对象数组：
var objs = [
{"name":"name1","age":10},
{"name":"name2","age":20},
{"name":"name3","age":30},
];
获取第一个对象的值：
var a = objs[0].name //objs[0]["name"]
var b = objs[0].age //objs[0]["age"]
遍历：
for(var i in objs) {
var x = objs[i];
for(var key in x) {
console.log(key+":"+x[key]);
}
}
客户端：
1. 对象转字符串
var objs ={"name":"name1","age":10,"date":"2020-05-26"};
var str = JSON.stringify(objs)
2.字符串转对象
var obj = JSON.parse(str);
JSON数据的解析(java)/JSON的服务器端处理：
JSON解析器：Jsonlib、Gson、fastjson、jackson(以下使用jackson)
1. JSON数据转Java对象
Class readValue(JSON数据,Class class) //JSON数据转Java对象
2. java对象转JSON数据
（1）导入jackson相关jar
（2）创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
（3）ObjectMapper对象的相关方法
writeValue(参数1,obj) /* 参数1： File obj对象转换为JSON字符串，并保存到指定的文件中 Writer obj对象转换为JSON字符串，并将数据填充到字符输出流 OutputStream obj对象转换为字符串，并将数据填充到字节输出流 */ String writeValueAsString(obj) 对象转JSON字符串
例子：
前端传一个对象数组，服务器回传次对象数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JsonTest</title> <script src="js/jquery3.5.1.js"></script> <script> var objs =[ {"name":"name1","age":10,"date":"2020-05-26"}, {"name":"name2","age":20,"date":"2000-01-26"}, {"name":"name3","age":30,"date":"1990-01-26"}, ]; function fun1() { $.post("JSONTest",{"objs":JSON.stringify(objs)},function (data) { $("#row1_col1").html(data[0]["name"]); $("#row1_col2").html(data[0]["age"]); $("#row1_col3").html(data[0]["date"]); $("#row2_col1").html(data[1]["name"]); $("#row2_col2").html(data[1]["age"]); $("#row2_col3").html(data[1]["date"]); $("#row3_col1").html(data[2]["name"]); $("#row3_col2").html(data[2]["age"]); $("#row3_col3").html(data[2]["date"]); },"json"); //指定响应数据类型为JSON } </script> </head> <body> <input type="button" value="发送JSON" onclick="fun1()"> <table> <tr> <td><label>Name</label></td> <td><label>Age</label></td> <td><label>Date</label></td> </tr> <tr> <td><label id="row1_col1"></label></td> <td><label id="row1_col2"></label></td> <td><label id="row1_col3"></label></td> </tr> <tr> <td><label id="row2_col1"></label></td> <td><label id="row2_col2"></label></td> <td><label id="row2_col3"></label></td> </tr> <tr> <td><label id="row3_col1"></label></td> <td><label id="row3_col2"></label></td> <td><label id="row3_col3"></label></td> </tr> </table> </body> </html>
服务器端：
package com.net; import com.fasterxml.jackson.annotation.JsonProperty; public class Person { @JsonProperty(value = "name") private String name; @JsonProperty(value = "age") private int age; @JsonProperty(value = "date") private String gender; public void setName(String name) { this.name = name; } public void setAge(int age) { this.age = age; } public void setGender(String gender) { this.gender = gender; } public String getName() { return name; } public int getAge() { return age; } public String getGender() { return gender; } }
package com.net; 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.io.PrintWriter; @WebServlet("/JSONTest") public class JSONTest extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //JSON转换对象 ObjectMapper mapper = new ObjectMapper(); //接收JSON数据，转Java对象 String data = request.getParameter("objs"); Person[] p2 = mapper.readValue(data,Person[].class); for(int i=0;i<p2.length;i++) { System.out.println(p2[i].getName()+" "+p2[i].getAge()+" "+p2[i].getGender()); } //对象转JSON数据 response.setContentType("application/json;charset=utf-8"); PrintWriter pw = response.getWriter(); mapper.writeValue(pw,p2); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }
