Ajax和Json基础

逃离我推掉我的手 2024-04-18 15:44 82阅读 0赞

[我的网站：欢迎大家访问奥][Link 1]  
![在这里插入图片描述][format_png]

## Ajax&Json ##

### Ajax ###

#### 概念 ####

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

#### 作用 ####

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

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

#### 实质 ####

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

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

#### 同步和异步交互方式 ####

**同步**

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

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

**异步**

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

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

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

**直观一点**

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

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

#### 获取Ajax对象 ####

#### 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的值

[Link 1]: https://www.ifueen.com
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMi5heDF4LmNvbS8yMDE5LzA5LzA5L25KOGwwSC5wbmc?x-oss-process=image/format,png