AJAX--XMLHttpRequest的方法

234 阅读 0 评论 155 点赞

我是靠谱客的博主难过小鸭子，这篇文章主要介绍AJAX--XMLHttpRequest的方法，现在分享给大家，希望可以做个参考。

AJAX–XMLHttpRequest

XMLHttpRequest是浏览器内置的一个构造函数，作用是：基于new出来的XMLsHttpRequest实例对象，可以发起Ajax的请求。
axios中的axios.get()、axios.post()等方法，都是基于XMLHttpRequest封装的。

使用XMLHTTPRequest进行ajax的操作的四个步骤为：

1.创建对象 (使用new进行创建)

复制代码

1
2
const xhr = new XMLHttpRequest();

或：

在js中，windows是最顶级对象，代表了一个窗体。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
var xhr;
if (window.XMLHttpRequest)
{
//
IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

调用xhr.open()函数进行初始化

复制代码

1
2
3
//2.初始化 设置请求方法和 url
xhr.open('请求方式','请求路径');

如： xhr.open(‘GET’, ‘http://127.0.0.1:8000/server’);

调用xhr.send()函数进行发送

复制代码

1
2
xhr.send();

进行事件绑定

复制代码

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
 //4.事件绑定
作用:处理服务端返回的结果(所有的结果)
//on <==> when 当....时候
//readystate 是xhr对象中的属性,表示状态 有0 1 2 3 4这四个值
//默认值为0 0表示未初始化
1表示open方法调用完毕 2表示send方法调用完毕
3表示服务端返回了部分结果
4表示服务端返回了所有的结果
//change
改变时触发 (如: 下拉框中使用onchange)
xhr.onreadystatechange = function() {
// 判断 (服务端返回了所有的结果)
=== 表示完全等于
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status < 300) {
// //处理结果
行 头 空行 体
// //1.响应行
// console.log(xhr.status); //响应码
// console.log(xhr.statusText); //响应字符串
// //2.所有响应头
// console.log(xhr.getAllResponseHeaders());
// //4.响应体
// console.log(xhr.response);
//设置result的文本
result.innerHTML = xhr.response;
} else {
}
}
}

完整代码

复制代码

<body>
<button>点击发送请求</button>
<div id="result"></div>

<script>
//1.获取button元素
//getElementsByTagName 获取多个
是数组 需要遍历一下
里面只有一个时需要加下标 [0]
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
//2.绑定一个事件
btn.onclick = function() {
//进行ajax的操作的4个步骤:
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3.发送
xhr.send();
//4.事件绑定
作用:处理服务端返回的结果(所有的结果)
//on <==> when 当....时候
//readystate 是xhr对象中的属性,表示状态 有0 1 2 3 4这四个值
//默认值为0 0表示未初始化
1表示open方法调用完毕 2表示send方法调用完毕
3表示服务端返回了部分结果
4表示服务端返回了所有的结果
//change
改变时触发 (如: 下拉框中使用onchange)
xhr.onreadystatechange = function() {
// 判断 (服务端返回了所有的结果)
=== 表示完全等于
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status < 300) {
// //处理结果
行 头 空行 体
// //1.响应行
// console.log(xhr.status); //响应码
// console.log(xhr.statusText); //响应字符串
// //2.所有响应头
// console.log(xhr.getAllResponseHeaders());
// //4.响应体
// console.log(xhr.response);
//设置result的文本
result.innerHTML = xhr.response;
} else {
}
}
}
}
</script>
</body>

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
<body>
<button>点击发送请求</button>
<div id="result"></div>
<!--
点击按钮发送请求
-->
<script>
//1.获取button元素
//getElementsByTagName 获取多个
是数组 需要遍历一下
里面只有一个时需要加下标 [0]
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
//2.绑定一个事件
btn.onclick = function() {
//进行ajax的操作的4个步骤:
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3.发送
xhr.send();
//4.事件绑定
作用:处理服务端返回的结果(所有的结果)
//on <==> when 当....时候
//readystate 是xhr对象中的属性,表示状态 有0 1 2 3 4这四个值
//默认值为0 0表示未初始化
1表示open方法调用完毕 2表示send方法调用完毕
3表示服务端返回了部分结果
4表示服务端返回了所有的结果
//change
改变时触发 (如: 下拉框中使用onchange)
xhr.onreadystatechange = function() {
// 判断 (服务端返回了所有的结果)
=== 表示完全等于
if (xhr.readyState === 4) {
//判断响应状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status < 300) {
// //处理结果
行 头 空行 体
// //1.响应行
// console.log(xhr.status); //响应码
// console.log(xhr.statusText); //响应字符串
// //2.所有响应头
// console.log(xhr.getAllResponseHeaders());
// //4.响应体
// console.log(xhr.response);
//设置result的文本
result.innerHTML = xhr.response;
} else {
}
}
}
}
</script>
</body>