通过原生js发起ajax请求和通过json格式返回数据及解析

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