使用js 原生的 XMLHttpRequest 发送get post 请求
2、使用xhr发起GET请求 四个步骤：
①：创建 xhr对象
//1、创建一个 xhr 的对象
let xhr = new XMLHttpRequest()
②：调用 xhr的open()函数（open中传递两个参数，参数一是GET/POST请求方式，参数二是请求的URL地址）
//2、调用xhr中的open()函数,创建一个Ajax的请求
xhr.open('GET', 'http://www.baidu.com')
③：调用 xhr.send()函数
//3、调用xhr的send函数，发起请求
xhr.send()
④：监听 xhr.onreadystatechange事件
//4、监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
//固定写法
if (xhr.readyState === 4 && xhr.status === 200) {
//数据获取成功，获取服务器响应的数据
// xhr.response 是返回一个请求对象，responseText是把返回体以string方式输出
console.log(xhr.responseText)
}
}
xhr发起GET请求的完整代码
发送post请求
直接上示例
function httpPostLocaltion(key,params){
let url = "http://www.baidu.com";
// 把参数对象转换为json
let param = JSON.stringify(params);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status === 200) {
console.log("后端返回的结果："+this.responseText);
/** 你的逻辑代码 **/
this.response
console.log(this.response)
}
};
xhr.open(
"post",
url,
true
);
// 注意，设置请求头的信息必须写在下面，否则会报错
// 设置以json传参
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// 解决跨域问题
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
// 设置请求体携带的参数
xhr.send(param);
}
报错内容是这个 Failed to execute ‘setRequestHeader’ on ‘XMLHttpRequest’: The object’s state 那就是上面提出的问题，需要把设置请求头的信息放到监听方法下方
推荐文章
发表评论