AJAX大白菜学习笔记之一：初用AJAX

最新推荐文章于 2022-04-10 22:52:56 发布

huai2325

最新推荐文章于 2022-04-10 22:52:56 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/huai2325/article/details/108426934

版权

大白菜第一次使用ajax，在浏览器中打开编写的test.html文件后，显示如下

点击按钮后，界面显示：

test.html文件内容

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" >
	<title>Ajax测试</title>
</head>
<body>
	<button>显示欢迎词</button>
	<h2></h2>
</body>

<script>
	var btn = document.getElementsByTagName("button")[0];
	btn.onclick = function(){
		var xhr = new XMLHttpRequest();   // 创建ajax对象
		xhr.onreadystatechange = function(){  // 监听返回的状态
			if(xhr.readyState == 4 && xhr.status == 200){
				var h2 = document.getElementsByTagName('h2')[0];
				h2.innerHTML = xhr.responseText;
			}
		}
		xhr.open('get', 'test.php', true);
		xhr.send(null);
	}
</script>
</html>

test.php文件内容

<?php

echo "欢迎使用AJAX";

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huai2325

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX大白菜学习笔记之一：初用AJAX

大白菜第一次使用ajax，在浏览器中打开编写的test.html文件后，显示如下点击按钮后，界面显示：test.html文件内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" > <title>Ajax测试</title></head><body> <button>显示欢迎词</b.
复制链接

扫一扫