Ajax工作原理及实例

Ajax工作原理及实例

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

Ajax基本概念

Ajax(Asynchronous JavaScript And XML),异步 JavaScript 和 XML,用于异步请求数据,在不刷新网页的情况下更新页面数据,提升用户体验

基本工作原理

注意:涉及到 AJAX 操作的页面“不能”使用文件协议访问(文件的方式访问)

  1. 安装用户代理(实例化 XMLHttpRequest()
  2. 打开浏览器,输入网址
  3. 敲回车键,开始请求
1
2
3
4
5
6
7
// 1. 安装浏览器(用户代理)
// xhr 就类似于浏览器的作用(发送请求接收响应)
var xhr = new XMLHttpRequest()
// 2. 打开浏览器 输入网址
xhr.open('GET', 'http://xxx/xxx.php') // 这里的 url 路径写你需要请求的地址
// 3. 敲回车键 开始请求
xhr.send()

对于上述代码,我们在控制台给 XMLHttpRequest 打印出来看看

XMLHttpRequest中有很多属性和方法,内容太多,不上图了,解释里面一部分

readyState

readyState有5个值,代表了Ajax请求状态

0:初始化,请求对象代理

1:open()方法已经调用,建立一个与服务端特定端口的连接

2:已经接收到了响应报文的响应头getAllResponseHeaders(),但是还没有拿到响应体reponseText

3:正在下载响应报文的响应体,有可能为空,也有可能不完整

4:整个响应报文已经下载下来了,请求完成

下面上代码:

这里自己创建一个文件,作为请求用的,我这里创建的是time.php

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>readyState</title>
</head>
<body>
<script>

var xhr = new XMLHttpRequest()
console.log('======readyState = 0======')
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象

xhr.open('GET', 'time.php')
console.log('======readyState = 1======')
console.log(xhr.readyState)
// => 1
// open 方法已经调用,建立一个与服务端特定端口的连接

xhr.send()

xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// 已经接受到了响应报文的响应头

// 可以拿到头
console.log('======readyState = 2======')
console.log(this.getAllResponseHeaders())
// console.log(this.getResponseHeader('server'))
// 但是还没有拿到体
console.log(this.responseText)
break

case 3:
// => 3
// 正在下载响应报文的响应体,有可能响应体为空,也有可能不完整
// 在这里处理响应体不保险(不可靠)
console.log('======readyState = 3======')
console.log(this.responseText)
break

case 4:
// => 4
// 一切 OK (整个响应报文已经完整下载下来了)
console.log('======readyState = 4======')
console.log(this.responseText)
break
}
})

</script>
</body>
</html>

去控制台打印看看

readyState

onreadystatechange

这个事件并不是只在响应时触发,状态改变就触发

上代码

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onreadystatechange</title>
</head>
<body>
<script>

var xhr = new XMLHttpRequest()

// 如果需要捕获第一个状态的变化,需要注意代码执行顺序的问题(不要出现来不及的情况)
xhr.onreadystatechange = function () {
// 这个事件并不是只在响应时触发,状态改变就触发
console.log('======触发了onreadystatechange======')
console.log(this.readyState)
}

xhr.open('GET', './time.php')

xhr.send()

</script>
</body>
</html>

去控制台打印出来看看

onreadystatechange

因为客户端永远不知道服务端何时才能返回我们需要的响应,所以 AJAX API 采用事件的机制(通知的感觉)

上代码

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onreadystatechange</title>
</head>
<body>
<script>

var xhr = new XMLHttpRequest()

// 如果需要捕获第一个状态的变化,需要注意代码执行顺序的问题(不要出现来不及的情况)
// xhr.onreadystatechange = function () {
// // 这个事件并不是只在响应时触发,状态改变就触发
// console.log('======触发了onreadystatechange======')
// console.log(this.readyState)
// }

xhr.open('GET', './time.php')

xhr.send()

// 因为客户端永远不知道服务端何时才能返回我们需要的响应
// 所以 AJAX API 采用事件的机制(通知的感觉)
xhr.onreadystatechange = function () {
// 这个事件并不是只在响应时触发,XHR 状态改变就触发
// console.log(1)
if (this.readyState !== 4) return
// 获取响应的内容(响应体)
console.log(this.responseText)
}

</script>
</body>
</html>

此时已经能够接收完整的报文

reponseText

onload

onloadHTML5 中提供的XMLHttpRequest v2.0 定义的,当页面完全加载完成后执行

上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>online</title>
</head>
<body>
<script>

var xhr = new XMLHttpRequest()

xhr.open('GET', 'time.php')

xhr.send(null)

xhr.onload = function () {
console.log(this.readyState)
console.log(this.responseText)
}

</script>
</body>
</html>

onload

setRequestHeader

设置一个请求头

1
2
3
4
5
6
7
8
9
var xhr = new XMLHttpRequest()

xhr.open('POST', '/add.php') // 设置请求行

xhr.setRequestHeader('Foo', 'Bar') // 设置一个请求头
// 一旦你的请求体是 urlencoded 格式的内容,一定要设置请求头中 Content-Type 'application/x-www-form-urlencoded'
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.send('key1=value1&key2=value2') // 以 urlencoded 格式设置请求体

Ajax优缺点

优点

  1. Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
  2. 使用异步的方式与服务器通信,不打断用户的操作
  3. 可将一些后端的工作移到前端,减少服务器与带宽的负担
  4. Ajax使得界面与应用分离,也就是数据与呈现分离

缺点

  1. Ajax干掉了Back与History功能,即对浏览器机制的破坏,在动态更新页面的情况下,用户无法回到前一页的页面状态,因为浏览器仅能记忆历史纪录中的静态页面
  2. AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
  3. 对搜索引擎支持较弱

JQuery中的Ajax

$.ajax()方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
contentType: "application/x-www-form-urlencoded"
async: true,
cache: true,
timeout: 5000,
success: function (data) {},
error: function () {},
complete: function () {}
});
});
});

url

String类型,请求的地址

type

String类型,请求方式,一般为get或者post请求,但是http的其他请求当然也可以

timeout

Number类型,超时时间,单位为毫秒

async

Boolean类型,是否异步,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,设置为false

cache

Boolean类型,是否从浏览器缓存中加载请求信息,默认为true,表示会从浏览器缓存中加载请求信息

data

Object或者String类型,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式

dataType

String类型,希望服务器返回的数据类型,如果不是,就转化为指定的数据类型,如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:

  1. xml:返回XML文档,可用JQuery处理
  2. html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行
  3. script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求
  4. json:返回JSON数据
  5. jsonp:JSONP格式
  6. text:返回纯文本字符串

beforeSend

Function类型,表示发送数据之前,进行的操作,例如想在发送数据之前设置请求头

1
2
3
beforeSend: function(request) {
request.setRequestHeader("Header", "x-www-***");
},

contentType

String类型,发送信息至服务器时,内容编码类型默认为”application/x-www-form-urlencoded”

dataFilter

Function类型,过滤数据(预处理数据),例如时间格式的预处理等,2个参数,参数一:Ajax返回的原始数据,参数二:dataType参数

1
2
3
dataFilter: function (data, type) {
return data
}

global

Boolean类型,默认为true,表示触发全局ajax事件,改为false则不会触发ajax全局事件

success

Function类型,请求数据成功回调,2个参数,参数一:必需,服务器返回后经过dataType参数处理后的数据,参数二:可选,描述状态的字符串

1
success: function (data, dataStatus) {}

error

Function类型,请求数据成功回调,3个参数,参数一:必需,XMLHttpRequest对象,参数二:必需,错误信息,参数三:可选,捕获的错误对象

1
error: function (XMLHttpRequest, status, error) {}

complete

Function类型,只要请求数据完成就回调,不管成功不成功,2个参数,参数一:必需,XMLHttpRequest对象,参数二:可选,描述请求类型的字符串

1
complete: function (XMLHttpRequest, status) {}

jsonp

String类型,在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分

username

String类型,用于响应HTTP访问认证请求的用户名

password

String类型,响应HTTP访问认证请求的密码

本文标题:Ajax工作原理及实例

文章作者:王工头

发布时间:2019年01月26日 - 20:33:21

最后更新:2019年01月26日 - 22:16:56

原始链接:https://qqqww.com/Ajax工作原理及实例/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢大佬们的阅读-------------