javascript原生网络请求对象XMLHttpRequest的使用

最新推荐文章于 2024-09-18 10:53:24 发布

程序员刀哥

最新推荐文章于 2024-09-18 10:53:24 发布

阅读量730

点赞数 8

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/qq_41765777/article/details/134710953

版权

本文介绍了如何使用XMLHttpRequest发送GET和POST请求，包括设置请求头、指定Content-Type（如application/x-www-form-urlencoded、application/json等），并通过监听readyState和status来处理响应数据。

摘要由CSDN通过智能技术生成

1. 使用XMLHttpRequest发送GET请求

// 创建XMLHttpRequest请求对象，
let xmlhttp = new XMLHttpRequest();
// 开启链接,参数一：请求方式get或post；参数二：请求地址；参数三：是否是异步请求；
xmlhttp.open("get","http://127.0.0.1:9001/api/FireManagement/GetPointByAPP",true);
// 发送请求
xmlhttp.send();
// 通过监听xmlhttp的状态来处理请求结果
xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        // 打印接口返回数据
        console.log("相应数据",JSON.parse(xmlhttp.responseText));
    }
}

2. 使用XMLHttpRequest发送POST请求

默认的POST请求通常为Form表单格式，则设置请求头的Content-Type为application/x-www-form-urlencoded

常用的Content-Type：

1、是默认的表单类型：application/x-www-form-urlencoded

2、JSON格式类型： application/json

3、文件类型：multipart/form-data

// 发送POST请求
xmlhttp.open('POST', 'url', true);
// 设置请求头，发送表单数据
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 发送数据
xmlhttp.send("key1=value1&key2=value2")
// 通过监听xmlhttp的状态来处理请求结果
xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        // 打印接口返回数据
        console.log("相应数据",JSON.parse(xmlhttp.responseText));
    }
}