Ajax&Json

Ajax

概念

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

作用

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

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

实质

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

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

同步和异步交互方式

同步

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

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

异步

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

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

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

直观一点

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

异步：各做各的相互不干扰（效率高）

获取Ajax对象

function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对其他浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}

Ajax发送请求

<!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对象

@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原生的方法进行转换

var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
				alert(json.inputdate);//打印Json中inputdate的值

fueen

发布了87 篇原创文章 · 获赞 7 · 访问量 2万+

私信关注

Ajax和Json基础