Ajax和Json基础

Ajax&Json

Ajax

概念

AJAX即Asynchronous Javascript And XML(异步JavaScript和XML),是改善用户体验的网页开发技术

作用

提高传输效率,提升用户体验

减少服务器与浏览器之间的数据传输

实质

通过浏览器的Ajax对象发送异步请求

获取Ajax对象,Ajax没有标准化,需要区分浏览器

同步和异步交互方式

同步

同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令

相当于浏览器给服务器发送一个请求,然后进行等待,一直到请求响应后再执行操作

异步

异步请求,发送请求的同事还可以继续操作页面。页面不销毁;

返回部分数据,减少不必要的数据承传输,介绍网络资源。页面不刷新,而是更新页面部分数据

相当于浏览器给服务器发送请求,但是同时还可以继续执行后面的操作,不会等待

直观一点

同步:你先做完我再做,后一步的操作必须要等待前一步操作的结果

异步:各做各的相互不干扰(效率高)

获取Ajax对象

1
2
3
4
5
6
7
8
9
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对其他浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}

Ajax发送请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form enctype="application/x-www-form-urlencoded">
<input /> <input /> <input type="submit" />
<br/>
<input type="button" onclick="randomData()" value="获取随机数"/>
</form>
<script type="text/javascript">
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}

//get方式请求
/* var xhr = getXhr();//获取ajax对象
xhr.open("get","ajaxGet?name=fueen");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){//200表示请求成功
var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
alert(json.inputdate);//打印inputdate值
//alert(xhr.responseText);
}
} */


//post方式请求

function randomData(){
var xhr = getXhr();//获取Ajax对象
var name="冲冲冲";
xhr.open("post","ajaxPost");//设置请求方式和请求地址
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}

}




</script>
</body>

</html>

Json

简介

JSON:JavaScript 对象表示法(JavaScript Object Notation)

JSON 是存储和交换文本信息的语法。类似 XML

JSON 比 XML 更小、更快,更易解析

Java对象转换为Json对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Controller
public class JsonController {
@ResponseBody //加入注解将返回值类型转为json
@RequestMapping("/json")
public List<User> json(Model model) {
System.out.println("json来咯");
User user1 = new User("曾经沧海难为水","乌斯怀亚的灯塔");
User user2 = new User("布宜诺斯艾利斯的海岸","伊瓜苏瀑布");
List<User> list = new ArrayList<User>();
list.add(user1);
list.add(user2);
return list;
//model.addAttribute("json", list);
//return "jsp/json";
}
}

解析Json对象

JS原生的方法进行转换

1
2
var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
alert(json.inputdate);//打印Json中inputdate的值
❤赏点钱让我买杯快乐水8❤