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>JsonTesttitle>
<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>Namelabel>td>
<td><label>Agelabel>td>
<td><label>Datelabel>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) { 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); } }