同步交互与异步交互
同步交互
指发送一个请求,需要等待返回,然后才能够发送下ー个请求。同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44azKsJr-1599406779157)(https://s1.ax1x.com/2020/08/29/d7RsxJ.png)]
异步交互
所谓异步交互,就是指指发送一个请求,不需要等待返回,随时可以再发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ovYho2q-1599406779159)(https://s1.ax1x.com/2020/08/29/d7R6M9.png)]
异步交互的优势
- 用户操作无须像同步交互必须等待结果。
- 异步交互只需与服务器端交換必要的数据内容,而不是将所有数据全部更新。
- 异步交互对带宽造成的压力相比同步交互更小。
- 通过 Aja 实现异步交互不需要任何第三方插件,只要浏览器支持 Javascript 语言即可实现。
异步交互的缺点
- 异步交互破坏了浏览器原有的前进和后退机制。
- 如果后面逻辑的行依靠前面逻辑行的结果的话,异步交互可能会造成问题。
- Aja× 实现异步交互对搜索引擎支持较弱。
- Ajax 实现异步交互会引起一些 Web 安全问题,例如如 SQL 注人攻击、跨站点脚本攻击等问题。
Ajax是什么
Ajax是Asynchronous JavaScript + XML的缩写, Ajax本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的新方法。
使用Ajax模型, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要刷新整个页面。这使得程序能够更快地回应用户的操作。
Ajax 涉及的技术
Ajax 只是为实现异步交互的手段,不是一种技术,而是多种技术的整合。其中包括以下几种技术
- HTML 页面
- CSS
- JavaScript
- DOM
- XML
- XMLHttpRequest 对象 (实现Ajax异步交互的核心)
实现Ajax异步交互
实现Ajax的执行步骤
- 创建核心对象
XMLHttpRequest
- 通过
XMLHttpRequest
对象的open
方法与服务器建立连接 - 构建请求所需的数据内容,并通过
XMLHttpRequest
对象的send()
方法发送出去 - 通过
XMLHttpRequest
对象提供的onreadystatechange
事件监听服务器端的通信状态 - 接收并处理服务器端向客户端响应的数据结果
- 将处理的结构更新到 HTML 页面中
创建Ajax 的核心对象
定义函数
function createXMLHttpRequest() {
var httpRequest;
if (window.XMLHttpRequest) {
// 适用于Chrome等浏览器
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// 适用于IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return httpRequest;
}
window原型上定义
Object.defineProperty(window, "createXMLHttpRequest", function () {
var httpRequest;
if (window.XMLHttpRequest) {
// 适用于非IE浏览器
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// 适用于IE浏览器
try {
// IE 7+
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
// IE 6-
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return httpRequest;
});
匿名函数
(function () {
function createXMLHttpRequest() {
var httpRequest;
if (window.XMLHttpRequest) {
// 适用于非IE浏览器
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// 适用于IE浏览器
try {
// IE 7+
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
// IE 6-
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
return httpRequest;
}
window.createXMLHttpRequest = createXMLHttpRequest;
})();
实现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>
</body>
</html>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
// 实现Ajax的异步交互
// 1.创建XMLHttpRequest对象
let xhr = new XMLHttpRequest()
/*
2.调用XMLHttpRequest的open()方法
* 作用:与服务器建立连接
open(method,url)方法
* method:表示当前的请求方式
* url:表示请求的服务器地址
*/
xhr.open("get",
"http://127.0.0.1:5500/AJAX-%E9%87%91/Ajax%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95/02%E6%B5%8B%E8%AF%95XMLHttpRequest%E5%AF%B9%E8%B1%A1.html"
)
/*
3.调用XMLHttpRequest对象的send()方法
* 作用:将客户端页面的数据发送给服务器
* 不传递数据时,要传入null
*/
xhr.send(null)
/*
4.利用XMLHttpRequest对象的onreadystatechange事件
* 作用:用于监听服务器的通信状态
* 服务器端的通信状态中 存在和处理完毕信号
* 接收服务器端返回的处理结果
*/
xhr.onreadystatechange = function () {
/*
XMLHttpRequest对象的readyState属性
* 作用:表示服务器的通信状态
* 值
* 0:未初始化
* 1:open()方法被调用
* 2:send()方法被调用
* 3:正在响应
* 4:响应完毕
*/
if (xhr.readyState === 4) {
// 作用:接收服务器端的响应结果
console.log(xhr.responseText);
}
}
/*
5.将收到的结果更新到HTML页面中
*/
})
</script>
通过Ajax异步交互
状态码
通过 status
属性判断返回响应的状态码
xhr.onreadystatechange = function () {
/*
XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest
的readyState 属性发生改变时触发 readystatechange 事件的时候被调用
*/
// 通信状态为4 并且状态码为200返回数据
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
console.log(xhr.status)
}
}
send()方法
send()方法:向服务器端发送请求数据
- 参数data:表示要向服务器端发送的请求数据
- 请求方式
- 如果请求方式是GET send()方式只能传null 将参数添加到请求地址中
- 如果是POST方法 那么参数传入请求的参数,并且设置请求头
- 发送数据的两种情况
- 发送数据:格式 -> name=value 如果具有多个请求数据 之间使用&分隔
- 不发送数据:send()方法中必须传递null 不能为空
GET
xhr.open("get", "www.xxx.com?user=abc&pwd=123")
POST
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send("user=abc&pwd=123")
Node搭建基础服务
// 导入http模块
const http = require("http");
const hostname = "127.0.0.1";
// 端口号
const port = 3000;
/*
createServer方法:创建一个服务器
* request:表示请求
* respone:表示响应
*/
const server = http.createServer(function (req, res) {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
res.end("Hello world");
});
server.listen(port, hostname, () => {
console.log(`http://${hostname}:${port}`);
});
* request:表示请求
* respone:表示响应
*/
const server = http.createServer(function (req, res) {
res.statusCode = 200;
res.setHeader(“Content-Type”, “text/plain”);
res.end(“Hello world”);
});
server.listen(port, hostname, () => {
console.log(http://${hostname}:${port}
);
});