前端开发您现在的位置是:首页 > 博客日志 > 前端开发

使用XMLHttpRequest发送网络请求

<a href='mailto:'>微wx笑</a>的头像微wx笑 2022-06-18前端开发 0 0关键字: ajax  

使用XMLHttpRequest发送get请求步骤创建xhr对象调用xhr.open()函数调用xhr.send函数监听onreadystatechange事件 未携带参数的get请求var xhr = new XMLHttpRequest();xhr.o

使用XMLHttpRequest发送get请求
1ak无知人生

步骤1ak无知人生

  1. 创建xhr对象1ak无知人生

  2. 调用xhr.open()函数1ak无知人生

  3. 调用xhr.send函数1ak无知人生

  4. 监听onreadystatechange事件
    未携带参数的get请求1ak无知人生

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请求1ak无知人生

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请求1ak无知人生

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请求1ak无知人生

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请求1ak无知人生

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数据格式)1ak无知人生

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

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

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

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

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

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

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

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

响应头常见数据格式

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
1ak无知人生

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

很赞哦! () 有话说 ()