使用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 那就是上面提出的问题,需要把设置请求头的信息放到监听方法下方

推荐文章

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。