ajax最简单的小案例

最新推荐文章于 2026-04-29 13:37:15 发布

原创

最新推荐文章于 2026-04-29 13:37:15 发布 · 1.2k 阅读

标签

#ajax #javascript #前端

收录于

这篇博客将展示一个简单的Ajax应用案例，旨在帮助理解如何在前端开发中使用Ajax进行数据交互，提升用户体验。

//		1.创建小黄人对象(哈哈其实就是xhr)
		var xhr = new XMLHttpRequest()
//		2.绑定事件监听函数
		xhr.onreadystatechange = function(){
			//readyState 属性存有 xhr 的状态信息, 为4时: 请求已完成，且响应已就绪
			if(xhr.readyState==4){
//				5.拿数据 , 200表示异步调用成功
				if(xhr.status==200){
					console.log(xhr.responseText)
				}
			}
		}
//		3.建立连接
		xhr.open("GET","http://47.95.123.51:8080/tjj/tjj/app-live-type-statistics/mylist")
//		4.发送请求
		xhr.send()

兄弟，相信你已经看懂了，不会继续康康，接下来我们来点实用的。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		//	1.创建小黄人对象
		//		老铁这次写的谨慎一点
		var xhr = null;
		//		首先判断有没有小黄人对象,有朋友肯定想怎么能没有,哈哈以前还真有可恶的,比如老鼠屎ie6
		if (window.XMLHttpRequest) {
			//如果不考虑ie的老版本就不用写判断了
			xhr = new XMLHttpRequest();
		} else {
			//老版本的IE，ie6及以下(老鼠屎)
			xhr = new ActiveXObject("Microsoft.XMLHTTP")　　
		}
		//	2.绑定事件监