Ajax全名为Asynchronous JavaScript And XML,Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分,而不需要重新加载整个页面.
归纳一下发送HTTP请求的技术方法大全
本章内容:

1.Ajax工作原理
2.jQuery的$.post(),$.get()
3.vue的axios

1.原生Ajax

Ajax原理图

整个执行过程:
网页中发生一个事件(页面加载、按钮点击)
👇👇👇
由 JavaScript 创建 XMLHttpRequest 对象
👇👇👇
XMLHttpRequest 对象向 web 服务器发送请求
👇👇👇
服务器处理该请求
👇👇👇
服务器将响应发送回网页
👇👇👇
由 JavaScript 读取响应
👇👇👇
由 JavaScript 执行正确的动作(比如更新页面)

1.XMLHttpRequest对象

Ajax的核心就是XMLHttpRequest对象,几乎所有的现代浏览器都支持,用于同幕后服务器交换数据,意味着可以更新网页部分内容,而不需要重新加载整个页面。

1
2
3
4
5
6
7
8
let http;
if (window.XMLHttpRequest){
// 用于现代浏览器的代码
http = new XMLHttpRequest();
}else{
// 应对老版本的IE浏览器
http = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest对象方法与属性:

方法与属性 描述
XMLHttpRequest 对象方法
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回头部信息
getAllResponseHeaders() 返回特定的头部信息
open(method, url, async) 规定请求:
method:请求类型 GET 或 POST
url:文件位置
async:true(异步)或 false(同步)
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” …

2.onreadystatechange 属性

1
2
3
4
5
6
7
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

3.setRequestHeader请求头设置

如需像 HTML 表单那样 POST 数据,请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据:
计算机传送的始终都是字符

  1. urlencoded数据格式
1
2
3
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");
  1. 传输json数据格式
1
2
3
4
5
6
7
8
9
const body = JSON.stringify({
a: '111',
b: '222'
});

const xhr = new XMLHttpRequest();
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.open('POST', 'url',true);
xhr.send(body); // http请求一般来说就是发送字符串,所以必须先将json转换为json字符串

4.完整案例

可以完善一下,封装成一个类似于jQuery的$.post方法

1
2
3
4
5
6
7
8
9
10
11
function loadDoc() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "/demo/demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");
}

2. jQuery的$.post(),$.get()

jQuery使用很简单,也封装的很好,这里就不再重复造轮子了,参考网址:https://www.cnblogs.com/sexintercourse/p/7017195.html

3.vue的axios

因为vue.js中没有内置任何ajax请求方法。所以需要借助第三方资源库在发送ajax请求。比如vue-resource资源库和axios。详情请参考axios官方文档

安装

使用npm:npm install axios
使用bower: bower install axios
使用cdn: <script src=”https://unpkg.com/axios/dist/axios.min.js"></script>

执行get请求案例

1
2
3
4
5
6
7
8
9
10
11
12
13
// 为给定 ID 的 user 创建请求
axios.get('/user', {
params: {
ID: "123456",
PWD:"9527"
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行post请求的案例

1
2
3
4
5
6
7
8
9
10
11
12
13
// 携带参数的post请求
axios.post('/user',data={
firstName: 'Fred',
lastName: 'FlintStone'
})
// 获取响应结果
.then(function (response) {
console.log(response);
})
// 异常捕获
.catch(function (error) {
console.log(error);
});

执行多个并发请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getUserAccount() {
return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
// response1,2 分别代表并发请求的各响应函数
.then(axios.spread(function (response1, response2) {
// 两个请求现在都执行完成(业务代码模块)
console.log(response1);
console.log(response2);
}));

PS:上述发送Ajax请求的时,格式不统一,这里以后都统一一下,统一采用axios(config)传递配置参数来创建请求,如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios({
method:"post",
url:"https://AhriLove.top",
data:{
model: 23,
condition: condition,
field: "overdue_type as overdue_type,"
+ "round(sum(overdue_money)/10000,2) as overdue_money",
group: "overdue_type",
having: "not ( round(sum(overdue_money)/10000,2)=0)",
showTotal: 0,
sortname: "overdue_money",
sortorder: "desc"
}
})

axios(config)配置参数大全

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
axios({
// `url` 是用于请求的服务器 URL
url: '/user',

// `method` 是创建请求时使用的方法
method: 'get', // default

// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',

// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],

// `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],

// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},

// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},

// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},

// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时,必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data: {
firstName: 'Fred'
},

// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout: 1000,

// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // default

// `adapter` 允许自定义处理请求,以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},

// `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},

// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default

// `responseEncoding` indicates encoding to use for decoding responses
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default

// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default

// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},

// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},

// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,

// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},

// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0,将不会 follow 任何重定向
maxRedirects: 5, // default

// `socketPath` defines a UNIX Socket to be used in node.js.
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// Only either `socketPath` or `proxy` can be specified.
// If both are specified, `socketPath` is used.
socketPath: null, // default

// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
// `keepAlive` 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),

// 'proxy' 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},

// `cancelToken` 指定用于取消请求的 cancel token
// (查看后面的 Cancellation 这节了解更多)
cancelToken: new CancelToken(function (cancel) {
})

})


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议