2020-11-11 Ajax和json

开篇引入

1.ajax

关于ajax的简介

Asynchronous Javascript and Xml 简称为ajax,

异步的js和xml

引入了XMLHttpRequest对象

1.1同步请求和异步请求

同步请求：
浏览器发送请求后，只有等服务端处理后，完成响应，才能看到响应结果，其他时间处于等待状态，不能做其他事情

异步请求：
浏览器发送请求后，只有等服务端处理后，完成响应，才能看到响应结果，在这个时间，浏览器不阻塞，可以做其他事情，直到服务端响应结束，通知你回来（接受事件的触发）
相当于浏览器支持多线程

我们看到的同步请求：整个浏览器页面都会刷新，一次请求刷新一次，体验差，比如填表格时，一个不符合格式，整个页面刷新则之前填的也要重填

异步请求：局部刷新，由浏览器开启一个新线程发送请求到服务端，主线程不受影响，直到异步线程从服务端响应回来，主线程对响应进行处理

1.2Ajax对象

XMLHttpRequest对象，专门用来发送异步请求，也可以发送同步请求

1.3Ajax编码步骤

1.创建XMLHttpRequest对象
2.注册回调函数
3.建立与服务端连接（无状态连接，不是长连接）
4.发送请求

1.4 代码

            var xmlhttp;//1.创建对象
			function ajax_demo(){
				if(window.XMLHttpRequest){
					xmlhttp=new XMLHttpRequest();
				}else{
					//IE5 IE6
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				 //2.注册回调函数
				xmlhttp.onreadystatechange=function(){
					//异步代码逻辑写在这里
					if(xmlhttp.readyState==4){
						//....
						if(xmlhttp,status==200){
							//服务端响应正常
							var str=xmlhttp.responseText;
						}
					}
				}
				//3.建立连接
				xmlhttp.open("提交方式post、get","目标url","true:异步 false:同步");
				//4.发送请求
				xmlhttp.send();//可以把数据作为参数传给服务端
			}

1.5XMLHttpRequest对象的属性

1.readystate：0-4 五个状态
0 请求未初始化
1 服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成、响应已就绪
共有四次变化

2.status属性
响应的状态码（5种类型的值）：
1XX服务器返回此代码表示已收到请求的部分
2XX正常
3XX服务端资源没有改变
4XX资源找不到
5XX服务端错误

3.responseText、responseXML
responseTex：以文本的形式获取服务器端的响应，获取的是字符串

JSON.parse(str);//json->string
JSON.stringify(obj);//json->对象

responseXML:xml格式返回给客户端，拿到的是Dom对象

2.ajax和json一起使用

前端：

$.ajax({
   url:'',//通讯地址
   type:'',//get或者post 
   data:{'key':value,'entity':管理员},//发送到服务端的数据K-V形式
    dataType:"text",//接收到的数据的类型可以是json或者text
   success:function(res){//接收到200状态码才能进入sucess回调方法
        if(res=="sucess"){
          alert("操作成功");
        }else {
           alert("操作失败");
        }
   }
})

后端：

//前端发送过来的数据可以用request.getParameter("key")的方式接收
String entity=request.getParameter("entity");

if(entity.equals("管理员")) {
			Admin admin;
			try {
				admin = loginService.selectallAdmin(name, password);
				if(admin!=null) {
					response.getWriter().write("success");
				    }else {
				    	response.getWriter().write("fail");
					}
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			
			}

1.前端发送过来的数据可以用request.getParameter(“key”)的方式接收
2.返回结果给后端可以是response.getWriter().write(“success”);这样的文本
还可以是json 字符串
response.getWrite.write(JSON.toJSON(xxx));
使用上述方法需要实例一个类Vo
vo.setCode(int)
vo.setMag(String);
vo.setCount(int);
vo.setData(List<Object>);
response.getWrite.write(JSON.toJSON(vo));

//json
{"result":[{'name':张三},{'name':李四}]}
$.ajax({
 url:'json/XXX.json',
 type:'get'
 success:function(res){
    console.log(res);
    alert(res.result[0].name);
 }
})