使用XMLHttpRequest发送网络请求

使用XMLHttpRequest发送get请求
mia无知

步骤mia无知

1. 创建xhr对象mia无知

2. 调用xhr.open()函数mia无知

3. 调用xhr.send函数mia无知

4. 监听onreadystatechange事件
   未携带参数的get请求mia无知

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请求mia无知

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请求mia无知

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请求mia无知

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请求mia无知

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数据格式）mia无知

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

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

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

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

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

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

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

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

响应头常见数据格式

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/jsonmia无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-06-18/1256.html

很赞哦！ () 赏 有话说 ()