学习笔记--Ajax：html格式返回数据

最新推荐文章于 2021-06-04 03:47:27 发布

不吃鱼的猫_0305

最新推荐文章于 2021-06-04 03:47:27 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： javascript js html ajax 异步

本文链接：https://blog.youkuaiyun.com/Linda_ke/article/details/51183705

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍AJAX技术，一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新，无需重载整个网页即可更新部分内容。

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

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

接下来分别用3钟格式返回数据的例子来说明：

一。HTML

在项目中建一个文件夹用来存放数据的html

在index.html中：

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML//EN">
<html>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<head>
		<script type="text/javascript">
			window.onload=function(){
				//1.获取节点
				var aNodes=document.getElementsByTagName("a");
				for(var i=0;i<aNodes.length;i++){
					aNodes[i].onclick=function(){
						
						//3.创建XMLHttpRequest对象
						var request=new XMLHttpRequest();
						
						//4.准备发送请求数据：url
						var method="GET";
						var url=this.href;
						
						//5.调用XMLHttpRequest的open方法
						request.open(method,url);
						
						//6.调用XMLHttpRequest的send方法
						request.send(null);
						
						//7.为XMLHttpRequest添加onreadystatechange响应函数
						request.onreadystatechange=function(){
							//8.判断响应函数是否完成，当onreadystatechange对象的readystate为4的时候
							if(request.readyState ==4){
								//9.判断响应是否可用，当onreadystatechange对象的status属性为200或304时候
								if(request.status==200||request.status==304){
									//10.打印响应结果
									document.getElementById("divtext").innerHTML=request.responseText;
								}
							}
						};
						
						//2.添加事件，修改默认行为
						return false;
					};
				}
			};
		</script>
	</head>
	<body>
		<h1>People</h1>
		<ul>
			<li><a href="files/andy.html">andy</a></li>
			<li><a href="files/jeremy.html">jeremy</a></li>
			<li><a href="files/richar.html">richar</a></li>
		</ul>
		<div id="divtext"> </div>
	</body>
</html></span>

在andy.html / jeremy.html / richar.html中

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<body>
		<h2><a href="#">andy</a></h2>
		<a href="#">http://www.baidu.com</a>
	</body>
</html></span>

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<body>
		<h2><a href="#">jeremy</a></h2>
		<a href="#">http://www.baidu.com</a>
	</body>
</html>
</span>

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<body>
		<h2><a href="#">richar</a></h2>
		<a href="#">http://www.baidu.com</a>
	</body>
</html>

</span>

每个页面对应相应的数据，可以自己定义！