ajax 无参请求,ajax无参请求学习

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代码如下

Title

显示欢迎词

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请求不需要传参

}

test.php代码如下

echo '欢迎学习ajax与php';

?>