ajax可以实现不刷新页面就发起请求(局部刷新)
异步对象:XMLHttpRequest
ajax中使用xmlHttpRequest对象
//1、创建xmlHttpRequest对象
var xmlHttpRequest = new xmlHttpRequest();
//2、绑定事件 (每次当异步对象发起请求,获取了数据都会触发这个事件 onreadystatechange)
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//此时可以处理服务器端的数据,更新当前页面
//获取服务端返回数据
let responseText = xmlHttpRequest.responseText;
alert(responseText)
}
}
//3、初始异步请求对象
xmlHttpRequest.open("post","loginservlet",true);
//4、使用异步对象发送请求
xmlHttpRequest.send();
readyState属性-----异步对象请求的状态变化--------xmlHttpRequest.readyState
0:请求未初始化,创建异步请求对象
1:初始化异步请求对象 -------- xmlHttpRequest.open()
2:异步对象发送请求 -------- xmlHttpRequest.send()
3:异步对象接收从服务端返回数据
4:异步对象已经将数据解析完毕 ----此时才可以读取数据
status属性-----网络请求状况 200 404 500 …
xmlHttpRequest.open(请求方法,访问地址,同步或异步)-------默认是true,异步请求
当服务器返回数据多个时,使用json格式返回数据
json分类:
- json对象:名称:值 可以看作是key:value
- json数组:存放json对象的数组
//json依赖
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.10.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.10.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.10.0</version>
</dependency>
//使用json,将对象转换为json格式字符串,并将此字符串返回给客户端
ObjectMapper om=new ObjectMapper();
String json = om.writeValueAsString(provice);//将传入参数转换为json格式字符串,provice是一个对象
//在js中将接收服务器端返回json字符串格式进行处理
//eval是执行括号中的代码,把json字符串转为json对象,此时通过此对象获取属性
var data=xmlHttp.responseText;
var jsonobj=eval("("+data+")")
document.getElementById("proid").value=jsonobj.id
document.getElementById("proname").value=jsonobj.name
document.getElementById("projiancheng").value=jsonobj.jiancheng
document.getElementById("proshenghui").value=jsonobj.shenghui