Ajax是一种用于创建快速动态网页的技术，通过XMLHttpRequest对象实现页面无刷新的数据更新。它涉及readyState属性的五个状态，包括未初始化、发送、接收、加载完成等。此外，文章还介绍了open、send等方法以及ontimeout、onload等事件，展示了在实际场景中的应用示例，如从服务器获取数据并动态更新HTML内容。
一Ajax的工作原理
Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。它能够在不需要重新刷新页面的情况下，通过异步请求加载后台数据，并在网页上呈现出来。
通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
二XMLHttpRequest的属性
1.readyState 对象状态值，表示当前请求的状态
当值为0时描述一种未初始化的状态，这个时候已经创建一个XMLHttpRequest对象但是没有初始化。
当值为1时描述一种发送的状态，此时代码调用XMLHttpRequest open方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
当值为2时描述一种发送的状态，此时通过send（）方法把一个请求发送到服务器端，但是还没有收到一个响应。
当值为3描述一种正在接收状态，此时已经接收到HTTP响应头部信息，但是信息体部分还没有完全接收结束。
当值为4时，描述一种已加载状态，此时响应已经完全被接收。
2.onreadystatechange 每次状态改变所触发事件的事件处理程序
3.responseText 从服务器进程返回数据的字符串形式
4.respXML 从服务器进程返回的DOM兼容的文档数据对象
5.status 从服务器返回的数字代码，比如20*（操作成功），30*（重定向），4**（操作错误），50*（服务器内部错误）。
三XMLHttpRequest方法
open方法： open(method, uri, async, username, password) 用来进行初始化工作
返回值：得到一个包含send()方法的对象method：必须。用于指定HTTP方法如GET,POST,PUT....。按规定必须大写。uri：请求发送到服务器相应的URI.自动解析成绝对地址。async：请求是否异步，默认为true.调用open后，readystate状态为1.
Send方法：可以调用send()方法来发送请求。当open 中async=true时，send()方法调用后立即返回，否则会中断直到请求返回。
setRequestHeader方法：该方法用来设置请求的头部信息。在调用open后调用这个方法，否则会得到一个异常。
四 XMLHttpRequest事件
ontimeout：当请求超时时触发。
onload：当请求成功完成时触发。可以通过responseText或responseXML属性获取响应内容。
onerror：当请求失败时触发。可以通过status属性获取服务器响应的HTTP状态码。
五 运用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="posts"></ul>
<script>
var url = "http://1.14.69.117:5000/posts";
//1. new对象
var xhr = new XMLHttpRequest();
//2加监听
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("in load event");
console.log(xhr.response);
//(1)把json格式字符串转化成对象
var data = JSON.parse(xhr.response);
//(2)遍历，生成li
var liALL = "";
for (var i = 0; i < data.length; i++) {
var oneli = `<li>title:${data[i].title} author:${data[i].author}</li>`;
liALL = liALL + oneli;
}
//(3)将生成的li加入到ul
document.querySelector("#posts").innerHTML = liALL;
} else {
console.log("错误情况", xhr.status);
}
});
xhr.addEventListener("error", function (e) {
console.log(e);
});
//3.初始化，设置
xhr.open("GET", url, false);
//4.发送
xhr.send();
console.log("after send");
</script>
</body>
</html>
扫一扫
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
