使用Ajax接收json格式的响应消息-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45846263/article/details/106696415

本文介绍了JSON（Javascript Object Notation）的轻量级特点，强调了它在Web编程中替代XML的趋势。主要内容包括JSON数据的两种形式——数组和对象，数组和对象的构成规则，以及如何在服务端创建JSON数据并使用Ajax进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

json 格式：特殊的对象

JSON的全称是 Javascript Object Notation（轻量级的字符串数据格式），对于我们更容易阅读和编写，对于机器：易于机器解析和生成，在Web编程领域可以取代XML字符串格式！！！
1、数据分两种： [] {} json不要对象套对象
2、整个字符串要么是一个数组，要么是一个对象
3、数组中可以包含各种：数字、boolean、字符串、null、[]、{}
4、对象中可以包含多个键值对，键必须用双引号，值若是字符串也必须用双引号
例：

var json{"sname" :"丁禹兮","age":24,"sex":"boy"}

application/json格式

创建一个data.php，数据

<?php    
	$stu = [  
	     ["stuID"=>1001,"stuName"=>"张三","stuAge"=>18,"stuSex"=>0,"className"=>'高三三班'], 
	     ["stuID"=>1002,"stuName"=>"李四","stuAge"=>18,"stuSex"=>0,"className"=>'高三三班'],    
	     ["stuID"=>1003,"stuName"=>"赵露思","stuAge"=>16,"stuSex"=>1,"className"=>'高二三班'], 
	     ["stuID"=>1004,"stuName"=>"丁禹兮","stuAge"=>17,"stuSex"=>0,"className"=>'高二三班'],      
	     ["stuID"=>1005,"stuName"=>"易烊千玺","stuAge"=>18,"stuSex"=>0,"className"=>'高三一班'],        
	     ["stuID"=>1006,"stuName"=>"张艺兴","stuAge"=>18,"stuSex"=>0,"className"=>'高三一班'],    
	     ]
	?>

创建一个文件服务端响应

<?php    
// 设置响应消息头   
 header('Content-Type:application/json;charset=UTF-8');    
 // 引入数据    
 require('data.php');    
 //  php中将数组转换为JSON字符串    
 echo json_encode($stu);
 ?>

在客户端创建请求消息，连接服务器

<!DOCTYPE html>
<html lang="en">
<head>    
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<title>json</title>    
	<style>        
		*{padding: 0;margin: 0; }        
		.wrapper{width: 500px;margin: 20px auto;text-align: center;}        
		ul{list-style: none;display: flex;border: 1px solid #999;}        
		ul li{width: 100px;text-align: center;}        
		ul.thead{font-weight: bold;}      
		ul.noData li{width: 500px;}    
	</style>
</head>
<body>    
	<div class="wrapper">        
		<ul class="thead">            
			<li>学号</li>            
			<li>姓名</li>            
			<li>性别</li>            
			<li>年龄</li>            
			<li>班级</li>        
		</ul>        
		<div class="content">            
			<ul class="noData">                
				<li>暂时没有任何数据</li>            
			</ul>        
		</div>        
		<button id="btnLoadMore">加载更多数据</button>    
	</div>    
<script>        
// 点击加载更多        
document.getElementById('btnLoadMore').onclick = function(){            
	// 创建xhr对象，兼容写法            
	var xhr = null;            
	if(window.XMLHttpRequest){                
		xhr = new XMLHttpRequest();            
	}else if(window.ActiveXObject){                
		xhr = new ActiveXObject('Microsoft.XMLHTTP');            
	}else{                
		alert('该浏览器不支持Ajax网络请求！');           
 	}
 	//2.绑定监听事件
	xhr.onreadystatechange = function(){                
		if(xhr.readyState == 4 && xhr.status == 200){                    
			doresponse(xhr);                
		}            
	}  
	//3.设置请求的url         
 	xhr.open('GET','json.php',true);   
 	// 4、发送请求消息         
 	xhr.send(null);    
 }         
function doresponse(xhr){            
 	if(xhr.responseText){                
 		var stulist = JSON.parse(xhr.responseText);                
 		var str = "";                
 		for(var i = 0; i < stulist.length; i++){                    
 			var stu = stulist[i];                    
		 	str += `<ul >                                
			 	<li>${stu['stuID']}</li>                                
			 	<li>${stu['stuName']}</li>                                
			 	<li>${stu['stuAge']}</li>                                
			 	<li>${stu['stuSex'] ==  0? '男':'女'}</li>                                
			 	<li>${stu['className']}</li>                            </ul>`                	
		}                
 		document.getElementsByClassName('content')[0].innerHTML = str;            
 	}    
 }    
 </script>
 </body>
 </html>