ajax【点击】请求流程
test.html代码流程
- 创建button按钮，为button绑定一个点击事件（函数）
- 在函数内书写ajax代码
2.1 创建ajax对象
2.2 设置onreadystatechange属性 用来监听变化 如果有变化 会响应一个函数
2.2.1 判断readyState 是否等于4并且status 是否等于200
2.2.2 获取请求得结果
2.3 设置请求参数（请求方式，文件名字，同步异步）
2.4 发送请求
test.php代码
返回给[test.html请求]一个结果
test.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>显示欢迎词</button>
<h2></h2>
</body>
<script>
var btn = document.getElementsByTagName('button')[0]; // 获取到按钮 按钮序号为0
btn.onclick = function () { // 为按钮绑定点击事件 值是一个函数
var xhr = new XMLHttpRequest(); // 创建Ajax对象
xhr.onreadystatechange = function () { // 设置onreadystatechange属性 这个属性监听ajax请求的变化
if (xhr.readyState == 4 && xhr.status == 200){ // readyState状态为4时 ajax请求结束 status为服务器返回的状态码 状态码为200时 正确返回数据 404为错误
var h2 = document.getElementsByTagName('h2')[0]; // 获取到h2标签 按钮序号为0
h2.innerHTML = xhr.responseText; // 为h2标签传值
}
}
xhr.open('get','test.php',true); // 初始化ajax请求[类型 地址 异步]
xhr.send(null); // 将请求发送到浏览器 get请求不需要传参
}
</script>
</html>
test.php代码如下
<?php
echo '欢迎学习ajax与php';
?>
