Ajax（三）XMLHttpRequest的基本使用Ajax（三）XMLHttpRequest的基本使用

200 阅读 0 评论 132 点赞

我是靠谱客的博主坚强小兔子，这篇文章主要介绍Ajax（三）XMLHttpRequest的基本使用Ajax（三）XMLHttpRequest的基本使用，现在分享给大家，希望可以做个参考。

Ajax（三）XMLHttpRequest的基本使用

一、`XMLHttpRequest`的基本使用

1、定义

浏览器为我们提供的一个内置对象(构造函数), 通过它我们可以向服务器发送请求, 并接受响应

$.ajax() 请求方法底层就是 jQuery 封装这个对象的一系列方法来实现的

2、使用`xhr`发起GET请求

步骤：
- 创建 xhr 对象
- 调用 xhr.open() 函数
- 调用 xhr.send() 函数
- 监听 xhr.onreadystatechange 事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 1. 构建 xhr 实例对象
var xhr = new XMLHttpRequest();
// 2. 初始化请求 open(请求方式，url地址)
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
// 3. 发送请求
send()
xhr.send();
// 4. 监听请求状态, 获取响应的数据
xhr.onreadystatechange = function() {
// 判断请求是否完成，HTTP请求状态码是否成功
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取响应数据

console.log(xhr.responseText);
}
};
// onload表示请求已经完成，和上面if判断作用相同
xhr.onload = function() {
// 获取响应数据
console.log(xhr.responseText);
}

**注意：**if判断代码中xhr.status不是返回数据中的status

3、了解`xhr`对象的`readyState`属性

xhr 请求的所有状态码
- 0 (未初始化) ==> 请求还未初始化
- 1 (正在加载) ==> 已建立服务器链接
- 2 (加载成功) ==> 请求已接受
- 3 (交互) ==> 正在处理请求
- 4 (完成) ==> 请求已完成, 响应数据已传输

4、查询参数

定义：在 url 末尾添加的以 ? 开头的参数，叫做查询参数

比如： http://www.youxi.cn?hero=tank&money=99&skin=pink
参数特征

格式符合键值对的格式，多个键值对之间使用 & 符号进行连接
作用

多个页面之间传递数据(从首页跳转到首页，显示登录名（location.search）);
给服务器发送 get 请求的数据

5、get请求带参数的写法

把参数按键值对字符串的形式拼接到 url 后面

复制代码

1
2
3
4
5
6
7
8
9
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.liulongbin.top:3006/api/get?name=ZhangSan&&age=12&&sex=man');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
};
};

6、URL编码

浏览器中的 URL 中只允许出现字母, 符号和数字, 不允许出现汉字, 如果出现需要对其进行编码

编码的规则：

使用字母，数字和特殊符号对其他字符(如汉字)进行编码

浏览器内置的 URL 编码和解码方法

encodeURI(参数) 对参数进行 URI 编码

decodeURI(参数) 对参数进行 URI 解码

复制代码

1
2
3
4
5
6
7

var str = '2月6号放假'
var str2 = encodeURI(str);
console.log(str2);
var str3 = decodeURI('%E6%94%BE%E5%81%87');
console.log(str3);//反编译为 放假

7、post请求原生写法

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
// 设置post请求参数的编码方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 设置post请求时，要传递键值对字符串
xhr.send('bookname=熟虾&author=之颂&publisher=125');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}

二、数据交换格式

1、数据交换格式

复制代码

1
2
客户端和服务端之间进行数据传输时, 需要使用公共的数据格式.。

JSON 是前后端开发中最常用的一种轻量级数据交换格式,除此之外还有 XML 这种带有语义化的数据格式。

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。
XML和HTML的区别：
- HTML 被设计用来描述网页上的内容，是网页内容的载体
- XML 被设计用来传输和存储数据，是数据的载体
- 客户端向服务器发送数据利用的是XML，服务器向客户端发送数据利用的是HTML
XML的缺点
- XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
- 在 Javascript 中解析 XML 比较麻烦

2、JSON（JavaScript Object Notation ）

JSON 可以理解为 js 中对象的字符串表示法, 本质上还是一个字符串。

概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。
作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但

是 JSON 比 XML 更小、更快、更易解析。

3、JSON 数据格式的注意

普通对象最外层使用 { } 包裹, 数组的最外层使用 [ ] 包裹
属性名和字符串必须是双引号括起来的字符串, 最后一个属性后不能有逗号（必须严格遵守）
属性值或数组元素可以是 number, string, boolean, array, null, object 6种

但不能是 undefined 和 function
不能在 json 中填写注释

**JSON 的作用：**在计算机与网络之间存储和传输数据。

**JSON 的本质：**用字符串来表示 Javascript 对象数据或数组数据

4、`JSON`和`JS`对象的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

5、`JSON`和`JS`对象的互转

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：

复制代码

1
2
3
var obj=JSON.parse('{"a":"Hello","b":"World"}');
//结果是：{a:'Hello',b:'World'}

要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

复制代码

1
2
3
var json=JSON.stringify({a:'Hello',b:'World'});
//结果是：'{"a":"Hello","b":"World"}'

总结：JSON.stringify() JSON.parse()
1. todolist 本地存储，只能存储字符串格式的数据， JSON.stringify()
2. JS高级深拷贝： JSON.parse(JSON.stringify(obj)) //生成的是一个新对象
3. 把服务器返回的json字符串解析成js对象格式 JSON.parse()

6、序列化和反序列化

把数据对象 转换为 字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。

把字符串 转换为 数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

三、`XMLHttpRequest Level2`的新特性

1、老版本 `XMLHttpRequest` 问题

只支持文本数据的传送，无法用来读取和上传二进制文件
传送和接收数据时，没有进度信息，只能提示有没有完成

2、新版本 XMLHttpRequest 特性

可以设置 HTTP 请求的超时时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获取数据请求的进度信息

3、为 ajax 请求设置超时限制

设置超时时间（默认为毫秒）

xhr.timeout = 超时时间
xhr 实例的超时事件

xhr.ontimeout = fn

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

var xhr = new XMLHttpRequest();
xhr.timeout = 10;
xhr.addEventListener('timeout',function() {
return alert('请求超时')});
xhr.open('get', 'http://www.liulongbin.top:3006/api/get');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}

四、`FormData`对象管理表单数据

1、什么是FormData？

浏览器提供的一个内置对象(构造函数), 可以轻松管理表单数据的键值对 (key/value)

2、FormData 相关方法

添加一条数据 append()
查询一条数据 get()
设置一条数据 set()
遍历数据 forEach()

3、在 Ajax 中的使用

可以直接使用 send 方法发送 formData 格式的数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 1. 新建一个 FormData 对象
var fd = new FormData();
// 2. 添加一条数据: append()
fd.append('bookname', '儒林外史');
fd.append('author', '费瓦罗纳');
fd.append('publisher', '圣埃蒂安');
console.log(fd.get('author'));
// 3. 设置一条数据: set()
fd.set('publisher', '埃尔法');
fd.forEach(item => {
console.log(item);
});
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}

4、formData快速获取表单数据

使用 new FormData(原生form元素) 可以一次性获取表单中所有的数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

$('form').submit(function(e) {
e.preventDefault();
var fd = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
xhr.onload = function() {
return console.log(JSON.parse(xhr.responseText));
}
});

五、formData上传文件

1、案例：formData上传文件并显示文件上传进度(原生方法)

复制代码

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
 $('#upload-btn').click(function() {
// (原生文本选择框.files)
var files = $('#file')[0].files;
// 判断文件列表长度
if (files.length <= 0) {
return alert('请选择文件上传');
};
var fd = new FormData();
// 向fd中添加一个数据
fd.append('avatar', files[0]);
var xhr = new XMLHttpRequest();
// 绑定上传进度事件
xhr.upload.onprogress = function(e) {
// console.log(e.lengthComputable);
// 判断当前文件是否可计算
if (e.lengthComputable) {
console.log(parseInt(e.loaded / e.total * 100));
// 获取文件上传进度e.total表示总数据量， e.loaded表示已经上传的数据量
var percentage = parseInt(e.loaded / e.total * 100) + '%';
// 给进度条设置width样式属性和内容
$('#bar').css('width', percentage).text(percentage);
};
};
// 为xhr绑定文件获取成功事件
xhr.upload.onload = function() {
$('#bar').removeClass().addClass('progress-bar progress-bar-success')
}
xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onload = function() {
var res = JSON.parse(xhr.responseText)
console.log(res);
// 将地址给img标签
$('img').prop('src', 'http://www.liulongbin.top:3006' + res.url);
}
})

2、jq版本文件上传

ajaxStart(callback)

Ajax 请求开始时，执行 ajaxStart 函数。
- 注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。
ajaxStop(callback)

Ajax 请求结束时，执行 ajaxStop 函数。

复制代码

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
 $(document).ajaxStart(function() {
$('#loading').show()
});
$('#upload-btn').click(function() {
// (原生文本选择框.files)
var files = $('#file')[0].files;
// 判断文件列表长度
if (files.length <= 0) {
return alert('请选择文件上传');
};
var fd = new FormData();
// 向fd中添加一个数据
fd.append('avatar', files[0]);
$.ajax({
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
method: 'post',
data: fd,
// 使用formdata 默认参数编码 multipart/form-data
contentType: false,
// 不需要对请求体中内容进行额外处理
processData: false,
// 发送ajax请求前调用
beforeSend: function() {
// console.log(123);
$('#loading').show()
},
success: function(res) {
console.log(res);
$('#loading').prop('src', 'http://www.liulongbin.top:3006' + res.url);
}
})
})

六、什么是`axios`

1、定义：

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

2、`axios`发起GET请求

axios.get()

复制代码

1
2
3
4
5
6
7
8
9
10
11
axios.get('http://www.liulongbin.top:3006/api/get', {
params: {
id: 10,
age: 20
}
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})

3、`axios`发起`POST`请求

axios.post()

复制代码

1
2
3
4
5
6
7
8
9
10
axios.post('http://www.liulongbin.top:3006/api/post', {
name: '张三',
age: 10,
height: 170
}).then(function(res) {
console.log(res);
}).catch(function(err) {
console.log(err);
})

4、直接使用`axios`发起请求

复制代码

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
//发起get请求
axios({
url: 'http://www.liulongbin.top:3006/api/getbooks',
method: 'get',
params: {
id: 1,
bookname: '西游记'
}
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})
//发起post请求
axios({
url: 'http://www.liulongbin.top:3006/api/addbook',
method: 'post',
data: {
bookname: '儒林外史',
author: '年份酒偶发',
publisher: '阿萨德刚'
}
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})

最后

以上就是坚强小兔子最近收集整理的关于Ajax（三）XMLHttpRequest的基本使用Ajax（三）XMLHttpRequest的基本使用的全部内容，更多相关Ajax（三）XMLHttpRequest内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Ajax
浏览次数：200 次浏览
发布日期：2023-10-19 13:51:37
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_26_f4_13__7__14_y.html

Ajax（三）XMLHttpRequest的基本使用Ajax（三）XMLHttpRequest的基本使用

Ajax（三）XMLHttpRequest的基本使用

一、`XMLHttpRequest`的基本使用

1、定义

2、使用`xhr`发起GET请求

3、了解`xhr`对象的`readyState`属性

4、查询参数

5、get请求带参数的写法

6、URL编码

7、post请求原生写法

二、数据交换格式

1、数据交换格式

2、JSON（JavaScript Object Notation ）

3、JSON 数据格式的注意

4、`JSON`和`JS`对象的关系

5、`JSON`和`JS`对象的互转

6、序列化和反序列化

三、`XMLHttpRequest Level2`的新特性

1、老版本 `XMLHttpRequest` 问题

2、新版本 XMLHttpRequest 特性

3、为 ajax 请求设置超时限制

四、`FormData`对象管理表单数据

1、什么是FormData？

2、FormData 相关方法

3、在 Ajax 中的使用

4、formData快速获取表单数据

五、formData上传文件

1、案例：formData上传文件并显示文件上传进度(原生方法)

2、jq版本文件上传

`ajaxStart(callback)`

`ajaxStop(callback)`

六、什么是`axios`

1、定义：

2、`axios`发起GET请求

3、`axios`发起`POST`请求

4、直接使用`axios`发起请求

最后

评论列表共有 0 条评论

发表评论取消回复

Ajax（三）XMLHttpRequest的基本使用Ajax（三）XMLHttpRequest的基本使用

Ajax（三）XMLHttpRequest的基本使用

一、XMLHttpRequest的基本使用

1、定义

2、使用xhr发起GET请求

3、了解xhr对象的readyState属性

4、查询参数

5、get请求带参数的写法

6、URL编码

7、post请求原生写法

二、数据交换格式

1、数据交换格式

2、JSON（JavaScript Object Notation ）

3、JSON 数据格式的注意

4、JSON和JS对象的关系

5、JSON和JS对象的互转

6、序列化和反序列化

三、XMLHttpRequest Level2的新特性

1、老版本 XMLHttpRequest 问题

2、新版本 XMLHttpRequest 特性

3、为 ajax 请求设置超时限制

四、FormData对象管理表单数据

1、什么是FormData？

2、FormData 相关方法

3、在 Ajax 中的使用

4、formData快速获取表单数据

五、formData上传文件

1、案例：formData上传文件并显示文件上传进度(原生方法)

2、jq版本文件上传

ajaxStart(callback)

ajaxStop(callback)

六、什么是axios

1、定义：

2、axios发起GET请求

3、axios发起POST请求

4、直接使用axios发起请求

最后

微信扫一扫：分享

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

一、`XMLHttpRequest`的基本使用

2、使用`xhr`发起GET请求

3、了解`xhr`对象的`readyState`属性

4、`JSON`和`JS`对象的关系

5、`JSON`和`JS`对象的互转

三、`XMLHttpRequest Level2`的新特性

1、老版本 `XMLHttpRequest` 问题

四、`FormData`对象管理表单数据

`ajaxStart(callback)`

`ajaxStop(callback)`

六、什么是`axios`

2、`axios`发起GET请求

3、`axios`发起`POST`请求

4、直接使用`axios`发起请求

发表评论取消回复