实现Ajax异步交互
文章目录
文章包含以下几点内容
-
实现Ajax的执行步骤
-
创建Ajax的核心对象
-
通过Ajax异步请求数据
-
监听服务器端通信状态
-
处理服务器端响应数据
实现Ajax的执行步骤
实现Ajax异步交互需要服务器端逻辑进行配合,而作为客户端的HTML页面需要完成以下步骤:
-
创建Ajax的核心对象XMILHlttpRequest对象
-
通过XMLHttpRequest对象的open()方法与服务器端建立连接
具体可以去MDN了解XMLHttpRequest.open()
-
构建请求所需的数据内容,并通过XMLHttpRequest对象的send()方法发送给服务器端
具体可以去MDN了解XMLHttpRequest.send()
-
通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态
只要
readyState
属性发生变化,就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange
会在XMLHttpRequest
的readyState
属性发生改变时触发readystatechange
事件的时候被调用。具体可参考MDN上的XMLHttpRequest.readyState
-
接收并处理服务器端向客户端响应的数据结果
-
将处理结果更新到HTMIL页面中
-
具体步骤代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button id="btn">按钮</button> <script src="js/createXMLHttpRequest.js"></script> <script> var btn = document.getElementById("btn"); btn.addEventListener("click", function () { // 实现Ajax的异步交互 // 创建XMLHttpRequest对象 var xhr = createXMLHttpRequest(); /* 2. 调用XMLHttpRequest对象的open()方法 * 作用 - 与服务器端建立连接 open(method, url)方法 * method - 表示当前的请求方式 * 常见的请求方式为GET和POST * url - 表示当前请求的服务器端地址链接 */ xhr.open("get", "https://extheor.github.io/"); /* 3. 调用XMLHttpRequest对象的send()方法 * 作用 - 将客户端页面的数据发送给服务器 send()方法 * 如果不传递任何数据内容时 - 向该方法传递null */ xhr.send(null); /* 4. 利用XMLHttpRequest对象的onreadystatechange事件 * 作用 - 用于监听服务器端的通信状态 * 服务器端的通信状态中 - 存在着处理完毕(信号) * 接收服务器端返回的处理结果 */ xhr.onreadystatechange = function () { /* XMLHttpRequest对象的readyState属性 * 作用 - 表示服务器端的通信状态 * 值 * 0 - 未初始化 * 1 - open()方法被调用 * 2 - send()方法被调用 * 3 - 正在响应 * 4 - 响应已完毕 */ if (xhr.readyState === 4) { /* 接收服务器端返回的处理结果 XMLHttpRequest对象的responseText属性 * 作用 - 用于接收服务器端的响应结果 */ console.log(xhr.responseText); } }; /* 5. 将接收到的结果更新到HTML页面 */ }); </script> </body> </html>
实现效果如下
创建Ajax的核心对象
虽然XMLHttpRequest对象目前由W3C组织进行标准化,但在不同浏览器中,创建的方式略有不同。
function createXMLHttpRequest(){
var httpRequest;
if (window.XMLHttpRequest) {
// 适用于Chrome,Firefox,Safari,...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// 适用于IE浏览器
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // IE7+
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE6-
} catch (e) {}
}
}
return httpRequest;
}
-
XMLHttpRequest继承关系
具体请参考 MDN上的XMLHttpRequest
通过Ajax异步请求数据
通过Ajax异步请求数据是通过XMLHttpRequest对象的send()方法实现,语法结构如下
httpRequest.send(data);
- data:表示请求的数据内容。
httpRequest.send(null);
httpRequest.send('name=wolongxueyuan&password=123456');
如果该请求是异步模式(默认),该方法会立刻返回。相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回。
提交表单时,向服务器端发送数据
- 请求数据被添加请求链接地址中 - ?user=maxiaoyu&pwd=123456
- 请求数据的格式
- 如果具有多个请求数据的话,之间使用"&"进行分隔
- 每个数据格式 -> name=value
- 请求数据的格式
向服务器端发送请求数据
send(data)方法
-
参数data - 表示要向服务器端发送的请求数据
-
请求方式
- 如果当前的请求方式为GET的话 - send()方法中只能传递null值
- 将请求数据添加到请求地址链接中
-
两种情况
- 发送数据 - user=maxiaoyu&pwd=123456
- 请求数据的格式
- 如果具有多个请求数据的话,之间使用"&"进行分隔
- 每个数据格式 -> name=value
- 请求数据的格式
- 不发送数据 - send()方法中必须传递null值,而不能为空
- 发送数据 - user=maxiaoyu&pwd=123456
-
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="#" method="get">
<input type="text" id="user" name="user" />
<input type="text" id="user" name="pwd" />
<input type="submit" />
</form>
<button id="btn">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
// 实现Ajax的异步交互
// 创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
// console.log(xhr.readyState);
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
if (xhr.status === 404) {
console.log("服务器端地址未找到");
}
}
};
xhr.open("get", "https://extheor.github.io/");
// 人为方式获取当前的数据,构建成制定的数据格式
xhr.send("user=maxiaoyu&pwd=123456");
});
</script>
</body>
</html>
点击按钮实现以下效果,请求URL为 http://127.0.0.1:5501/05_send()%E6%96%B9%E6%B3%95.html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sonuOBIL-1598867411321)(https://cdn.jsdelivr.net/gh/extheor/images/Ajax图片/send()]方法1.gif)
点击表单提交实现以下效果,请求URL为 http://127.0.0.1:5501/05_send()%E6%96%B9%E6%B3%95.html?user=maxiaoyu&pwd=123456
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOxVFlj8-1598867411323)(https://cdn.jsdelivr.net/gh/extheor/images/Ajax图片/send()]方法2.gif)
**XMLHttpRequest.send()
**方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。
如果没有使用 setRequestHeader()
方法设置 Accept
头部信息,则会发送带有 "* / *"
的Accept
头部。
send()方法的使用具体可参考MDN XMLHttpRequest.send()
既然请求方法是GET的话,send()方法只能设置为null值,那么我的请求数据应该在哪儿写呢?
-
将请求数据添加到请求地址链接中
xhr.open("get", "https://extheor.github.io/?user=maxiaoyu&pwd=123456");
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OWeDAv8B-1598867411325)(https://cdn.jsdelivr.net/gh/extheor/images/Ajax图片/send()]方法2.gif)
但是GET请求数据是有问题的,我们发现这请求数据是被写死掉的,我们以后是要动态获取数据的,所以不会用GET请求的
请求方式
GET请求方式
Ajax异步交互中使用GET请求方式的话,需要注意以下几个问题:
-
将构建的请求数据添加到open()方法中的url地址中,如下示例代码所示:
httpRequest.open('GET', 'http://www.wolongxueyuan.org/some.file?name=wolongxueyuan&password=123456',true);
上述示例代码中,“name=wolongxueyuan&password=123456”表示请求数据
-
将发送请求数据的send()方法中参数设置为null值,如下示例代码所示:
httpRequest.send(null);
-
POST请求数据代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button id="btn">按钮</button> <script src="js/createXMLHttpRequest.js"></script> <script> var btn = document.getElementById("btn"); btn.addEventListener("click", function () { // 实现Ajax的异步交互 // 创建XMLHttpRequest对象 var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function () { // console.log(xhr.readyState); if (xhr.readyState === 4) { console.log(xhr.status); if (xhr.status === 200) { console.log(xhr.responseText); } if (xhr.status === 404) { console.log("服务器端地址未找到"); } } }; xhr.open("post", "https://extheor.github.io/"); /* send()方法 * 如果是GET, send()方法只能传递null值 -> 请求数据添加在请求地址中 * 如果是POST, send()方法传递请求数据 */ xhr.send("user=maxiaoyu&pwd=123456"); }); </script> </body> </html>
我们会看到在请求负载(Request Payload)中有 user=maxiaoyu&pwd=123456
请求数据
POST请求方式
Ajax异步交互中使用POST请求方式的话,需要注意以下几个问题:
-
调用send(方法之前,需要通过XMLHttpRequest对象的setRequestHleader()方法设置请求头信息。
httpRequest.setRequestHeader(header, value);
- header:将要被赋值的请求头名称。
- value:给指定的请求头赋的值。
httpRequest.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
-
通过XMLHttpRequest对象的send()发送请求数据。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
// 实现Ajax的异步交互
// 创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
// console.log(xhr.readyState);
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
if (xhr.status === 404) {
console.log("服务器端地址未找到");
}
}
};
xhr.open("post", "https://extheor.github.io/");
// 设置请求头部信息
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);
/*
send()方法
* 如果是GET, send()方法只能传递null值 -> 请求数据添加在请求地址中
* 如果是POST, send()方法传递请求数据
*/
xhr.send("user=maxiaoyu&pwd=123456");
});
</script>
</body>
</html>
实现效果如下
我们会看到在表单数据(Form Data)中有user: maxiaoyu、pwd: 123456格式的请求数据
Ajax异步交互
用get请求真实的服务器
- 首先需要写一个服务器
// 引入Node.js中的http模块
const http = require("http");
// 定义当前服务的IP地址和端口号
const hostname = "127.0.0.1"; // 表示本机
const port = 3000;
/**
* createServer(callback)方法 - 表示创建一个服务
* * callback - 表示回调函数
* function(request, response){}
* * request - 表示请求(用于接收客户端发送给服务端的请求)
* * response - 表示响应(用于接收服务器端发送给客户端的处理结果)
*/
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
res.end("Hello, World!\n");
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
- 然后再写一个Ajax异步交互代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ajax异步交互</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
// 实现Ajax的异步交互
// 创建XMLHttpRequest对象
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
// console.log(xhr.readyState);
if (xhr.readyState === 4) {
console.log(xhr.status);
if (xhr.status === 200) {
console.log(xhr.responseText);
}
if (xhr.status === 404) {
console.log("服务器端地址未找到");
}
}
};
xhr.open("get", "http://127.0.0.1:3000");
xhr.send(null);
});
</script>
</body>
</html>
实现效果如下
会出现如图之错误,这就是浏览器的跨域限制
那怎么办呢?只需要在Header上加上一行代码即可
res.setHeader("Access-Control-Allow-Origin", "*");