什么叫Ajax
- AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
- ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。
Ajax的优点
- 最大的一点是页面无刷新,用户的体验非常好。
- 使用异步方式与服务器通信,具有更加迅速的响应能力。
- 可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
- ajax可使因特网应用程序更小、更快,更友好
Ajax的缺点
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- ajax不支持浏览器back按钮
如何实现Jquery中的Ajax请求
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//Ajax的配置
function myAjax(option) {
/*1.判断有没有传递参数,同时参数是否是一个对象*/
option = option || {}
/*2.获取请求类型,如果没有传递请求方式,那么默认为get*/
option.type = option.type.toUpperCase() || 'GET'
option.url = option.url || ""
option.async = option.async || true;
/*3.获取请求传递的参数*/
option.data = option.data || ""
option.success = option.success || function () {}
sendRequest(option).then((data) => {
option.success(data)
}, (error) => {
console.log(error)
})
}
//利用XMLHttpRequest发送请求
function sendRequest(option) {
return new Promise((res, rej) => {
let xhr = new XMLHttpRequest()
if (option.type == 'get') {
option.url = url + "?" + .option.data;
}
xhr.open(option.url, option.type, option.async)
/*设置请求头:判断请求方式,如果是post则进行设置*/
if (option.type == "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
/*处理响应*/
xhr.onreadystatechange = function () {
let result=null;
if (xhr.readyState == 4) {
if (xhr.status == 200) {
try {
// data = xhr.responseText;
res(xhr.responseText);
} catch (error) {
rej(error);
error = '错误'
}
} else {
rej(new Error(xhr.statusText));
}
}
}
xhr.send(JSON.stringify(option.data))
})
}
//执行myAjax
myAjax(option)
- 本文作者: Littleki
- 本文链接: https:/littleki.gitee.io/2018/07/22/JavaScript/Ajax/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!