✅作者简介：大家好,我是Philosophy7？让我们一起共同进步吧！🏆 📃个人主页：Philosophy7的csdn博客
🔥系列专栏： 数据结构与算法
👑哲学语录: 承认自己的无知，乃是开启智慧的大门
💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博>主哦🤞
一、什么是AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
二、同步和异步
①同步：
浏览器页面发送请求到服务器，服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等待服务器响应结束后才能做后续的操作
②异步:
浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。
三、快速入门
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo">
<h2>让 AJAX 更改这段文本</h2>
<button type="button" onclick="loadDoc()">更改文本</button>
</div>
<script type="application/javascript">
function loadDoc(){
//1.创建XMLHttpRequest对象
var xhttp = new XMLHttpRequest();
//2.onreadystatechange属性 --- 发送变化时被调用的函数
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText; //responseText属性 以字符串返回响应数据
}
};
//open方法用于规定请求相关信息
xhttp.open("GET", "ajax_info.txt", true);
//发送请求
xhttp.send();
}
</script>
</body>
</html>
四、XMLHttpRequest
Ajax 的核心是 XMLHttpRequest 对象。
①XMLHttpRequest对象方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) | 规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码 |
| send() | 将请求发送到服务器，用于 GET 请求 |
| send(string) | 将请求发送到服务器，用于 POST 请求 |
| setRequestHeader() | 向要发送的报头添加标签/值对 |
②XMLHttpRequest 对象属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
| readyState | 保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪 |
| responseText | 以字符串返回响应数据 |
| responseXML | 以 XML 数据返回响应数据 |
| status | 返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found” |
| statusText | 返回状态文本（比如 “OK” 或 “Not Found”） |
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
