使用XMLHttpRequest发送网络请求

122 阅读 0 评论 81 点赞

我是靠谱客的博主单薄睫毛，这篇文章主要介绍使用XMLHttpRequest发送网络请求，现在分享给大家，希望可以做个参考。

使用XMLHttpRequest发送get请求

步骤

创建xhr对象
调用xhr.open()函数
调用xhr.send函数
监听onreadystatechange事件
未携带参数的get请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
var xhr = new XMLHttpRequest();
xhr.open("get","http://127.0.0.1:8000");
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.onerror = function (error) {
console.log(error)
};

携带参数的get请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
var xhr = new XMLHttpRequest();
xhr.open("get","http://127.0.0.1:8000?name=js&age=18");
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.onerror = function (error) {
console.log(error)
}
输出：{"name":"js","age":"18"}

使用XMLHttpRequest发送get请求

未携带参数的post请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:8000/post");
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.onerror = function (error) {
console.log(error)
}

携带参数(application/x-www-form-urlencoded)的post请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:8000/post");
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
xhr.send("name=js&age=18");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.onerror = function (error) {
console.log(error)
}
输出：{"name":"js","age":"18"}

携带参数(application/json)的post请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:8000/post");
xhr.setRequestHeader("content-Type","application/json");
xhr.send(JSON.stringify({name:"js",age: 18}));
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status ===200){
console.log(xhr.responseText);
}
}
xhr.onerror = function (error) {
console.log(error)
}
输出：{"name":"js","age":"18"}

post请求头的常见数据格式

1、application/json（JSON数据格式）

复制代码

1
2
xhr.setRequestHeader("Content-type","application/json; charset=utf-8");

这种类型是我们现在最常用的，越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
2、application/x-www-form-urlencoded

复制代码

1
2
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据
**3、multipart/form-data **

复制代码

1
2
xhr.setRequestHeader("Content-type", "multipart/form-data; charset=utf-8");

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值
4、text/xml

复制代码

1
2
xhr.setRequestHeader("Content-type", "text/xml; charset=utf-8");

它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范，这种方式现在不常用

响应头常见数据格式

1）、text/html ： HTML格式
2）、text/plain ：纯文本格式
3）、application/json：json格式
4）、text/xml ： XML格式
5）、image/gif ：gif图片格式
6）、image/jpeg ：jpg图片格式
7）、image/png：png图片格式
8）、application/pdf：pdf格式
9）、application/msword ： Word文档格式
10）、application/octet-stream ：二进制流数据（如常见的文件下载）
5、前后端交互时，常用的content-type
application/json