介绍
- 本文主要记录在学习尚硅谷的 AJAX 课程时的一些笔记
- 尚硅谷前端学科全套课程请点击这里进行下载，提取码：afyt
一、基础内容
1.AJAX
AJAX 是异步的 JS 和 XML，通过 AJAX 可以在浏览器中向服务器中发送异步请求优点：
可以无需刷新页面与服务器进行通信
允许根据用户时间来更新部分页面内容
缺点：
没有浏览历史，不能回退
存在跨域问题（同源）
SEO 不太好
2.XML
XML 被设计用来传输和存储数据
xml 与 html 的区别：
3.HTTP
(1).请求报文
(2).响应报文
4.Express
1
| const express = require("express");
|
1
2
3
4
5
6
7
8
9
10
11
12
| // get请求
app.get('/server', (request,response) => {
// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', "*")
// 设置响应
response.send("你好");
});
// post请求
app.post("/server", (request, response) => {
response.setHeader("Access-Control-Allow-Origin", "*");
response.send("你好");
})
|
1
2
3
| app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中");
})
|
5.nodemon
二、AJAX操作
1.GET请求
1
| const xhr = new XMLHttpRequest();
|
1
| xhr.open('GET', 'http://127.0.0.1:8000/server');
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| xhr.onreadystatechange = function (){
// readystate 是xhr对象中的属性，表示状态，共有0,1,2,3,4 五种状态
// 0表示未初始化、1表示open已经调用完毕，2表示send已经调用完毕，3表示服务器返回了一部分的机结果，4表示服务器返回了所有的结果
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// 响应行中的状态码
console.log(xhr.status)
// 响应行中的状态字符串
console.log(xhr.statusText)
// 所有的响应头
console.log(xhr.getAllResponseHeaders())
// 响应体
console.log(xhr.response)
}else {
}
}
}
|
(1).xhr的属性
(2).AJAX请求参数
只需要在url后面跟上需要传的参数即可
使用 ?a=100&b=200 的方式来传递
2.POST请求
1
2
3
4
5
6
7
8
9
10
| const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
xhr.send();
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
if(xhr.status >= 200 & xhr.status < 300){
result.innerHTML = xhr.response;
}
}
}
|
1
2
3
| xhr.send("a=100&b=222");
xhr.send("a:100&b:200");
xhr.send("12332112345");
|
1
| xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
3.响应JSON数据
(1).手动响应
1
2
3
4
5
6
7
8
9
10
11
| const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/json-server");
xhr.send();
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
let data = JSON.parse(xhr.response);
result.innerHTML = data.name;
}
}
}
|
(2).自动响应
1
2
3
4
5
6
7
8
9
10
11
12
13
| const xhr = new XMLHttpRequest();
// 设置响应体数据类型
xhr.responseType = "json";
xhr.open("GET", "http://127.0.0.1:8000/json-server");
xhr.send();
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// 自动转化
result.innerHTML = xhr.response.name;
}
}
}
|
4.IE缓存问题解决
1
| xhr.open("GET", "http://127.0.0.1:8000/ie?t=" + Date.now());
|
5.请求超时与网络异常
1
2
3
4
5
6
| // 超时设置 2s
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function (){
alert("请求超时");
}
|
1
2
3
4
| // 异常回调
xhr.onerror = function (){
alert("网络异常");
}
|
6.手动取消请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <button>点击发送</button>
<button>点击取消</button>
<script>
const btns = document.querySelectorAll("button");
let xhr = null;
btns[0].onclick = function (){
xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/dely");
xhr.send();
}
btns[1].onclick = function (){
xhr.abort();
}
</script>
|
7.重复发送请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <button>点击发送</button>
<script>
const btns = document.querySelectorAll("button");
// 判断是否正在发送请求
let isSending = false;
let xhr = null;
btns[0].onclick = function (){
// 如果标识为true表示正在发送请求，关闭上次请求
if (isSending) xhr.abort();
xhr = new XMLHttpRequest();
// 正在发送请求，更改标识
isSending = true;
xhr.open("GET", "http://127.0.0.1:8000/dely");
xhr.send();
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
// 请求发送完毕，更改标识
isSending = false;
}
}
}
</script>
|
三、JQuery操作
1.发送AJAX请求
发送请求时总共有四个参数：
- url：请求的url地址
- data：请求携带的参数（为对象）
- callback：回调函数
- type：设置返回内容的格式（xml、html、script、json、text、_default）
GET 请求如下：
1
2
3
4
5
6
| $("button").eq(0).click(function (){
$.get("http://127.0.0.1:8000/jquery-server", {a:100,b:200}, function (data){
// data参数为响应体
console.log(data)
}, "json")
})
|
1
2
3
4
5
6
| $("button").eq(1).click(function (){
$.post("http://127.0.0.1:8000/jquery-server", {a:100,b:200}, function (data){
// data参数为响应体
console.log(data)
})
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| $.ajax({
// url
url: "http://127.0.0.1:8000/json-server",
// 参数
data: {a:100, b:200},
// 请求类型
type: "GET",
// 响应体结果
dataType: "json",
// 成功的回调
success: function (data){
console.log(data)
},
// 超时时间
timeout: 2000,
// 失败的回调
error: function (){
console.log("出错了");
},
// 头信息
header: {
c: 300,
d: 400
}
})
|
四、Axios操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| axios.get("http://127.0.0.1:8000/axios-server", {
// url参数信息
params: {
id: 100,
vip: 7
},
// 请求头信息
headers: {
name: "Wrysmile",
age: 25
},
// 请求体
data: {
username: "wrysmile",
password: "123456789"
}
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| axios.post("http://127.0.0.1:8000/axios-server", {
username: "wrysmile",
password: "123456789"
},{
// url参数信息
params: {
id: 100,
vip: 7
},
// 请求头信息
headers: {
name: "Wrysmile",
age: 25
}
})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| axios({
// 请求方法
method: "POST",
// url
url: "http://127.0.0.1:8000/axios-server",
// url参数
params: {
id: 300,
vip: 10
},
// 头信息
headers: {
a: 100,
b:200
},
// 请求体参数
data: {
username: "wrysmile",
password: "123456789"
}
})
|
五、fetch操作
1
2
3
4
5
6
7
8
9
10
11
12
| fetch("http://localhost:8000/fetch-server", {
// 请求方法
method: "POST",
// 请求头
headers: {
name: "Wrysmile"
},
// 请求体
body: "username=admin"
}).then(response => {
console.log(response);
})
|
六、跨域
1.同源策略
2.解决方案
(1).JSONP
原生Demo：检测用户名是否存在
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <input type="text" />
<p></p>
<script>
const input = document.querySelector("input");
const p = document.querySelector("p");
// 声明 handle 函数
function handle(data){
// 修改输入框的边框
input.style.border = "1px solid #f00"
// 给p元素设置文字
p.innerHTML = data.msg;
}
input.onblur = function (){
// 获取用户的输入
let username = this.value;
// 向服务器发送请求，检测用户是否存在
// 1.创建 script 标签
const script = document.createElement("script");
// 2.设置 script 的src属性
script.src = "http://127.0.0.1:8000/jsonp-username";
// 3.将 script 标签添加到文档中
document.body.append(script);
}
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // 引入express
const express = require("express");
// 创建应用对象
const app = express();
// 创建路由规则
app.all("/jsonp-username", (request,response) => {
const data = {
exist: 1,
msg: "该用户名已存在"
};
// 将数据转换为字符串
let str = JSON.stringify(data);
response.end(`handle(${str})`);
})
// 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中");
})
|
JQuery使用方法：
- 调用 JQuery 的
getJSON() 方法即可 - 注意该方法的url中需要传
?callback=? 参数，然后在服务端直接获取到该参数的值作为函数即可使用
JQuery Demo：获取用户数据
1
2
3
4
5
6
7
8
9
10
11
12
| <button>点击发送 jsonp 请求</button>
<div id="result"></div>
<script>
$("button").eq(0).click(function (){
$.getJSON("http://127.0.0.1:8000/jsonp-jquery?callback=?", function (data){
$("#result").html(`
名称: ${data.name}<br>
城市: ${data.city}
`)
});
});
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // 引入express
const express = require("express");
// 创建应用对象
const app = express();
// 创建路由规则
app.all("/jsonp-jquery", (request,response) => {
const data = {
name: "Wrysmile",
city: ["上海","北京","广东"]
};
// 将数据转换为字符串
let str = JSON.stringify(data);
// 接收callback参数
let cb = request.query.callback;
response.end(`${cb}(${str})`);
})
// 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中");
})
|
(2).CORS
介绍：CORS（Cross-Origin Resource Sharing）是一个官方的跨域解决方案，支持 get 和 post 请求
特点：不需要在客户端做任何特殊的操作，完全在服务器中进行处理
方法：服务器端设置一个响应头来告诉浏览器请求允许跨域
1
2
3
4
5
6
7
8
9
10
| app.get('/jsonp-cors', (request,response) => {
// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', "*")
// 允许自定义头信息
response.setHeader("Access-Control-Allow-Headers", "*");
// 允许设置请求方法
response.setHeader("Access-Control-Allow-Method", "*");
// 设置响应
response.send("你好");
});
|
