原生js XMLHttpRequest发送 get post 请求 解决跨域 及 注意事项

使用js 原生的 XMLHttpRequest 发送get post 请求

2、使用xhr发起GET请求
四个步骤：

①：创建 xhr对象

//1、创建一个 xhr 的对象let xhr =newXMLHttpRequest()

②：调用 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请求的完整代码

<script>// 携带参数let param =1;let url = http://www.baidu.com
     //1、创建一个 xhr 的对象let xhr =newXMLHttpRequest()//2、调用xhr中的open()函数,创建一个Ajax的请求,拼接请求参数
     xhr.open('GET',url+'?param='+param)//3、调用xhr的send函数，发起请求
     xhr.send()//4、监听 onreadystatechange 事件
     xhr.onreadystatechange=function(){//固定写法if(xhr.readyState ===4&& xhr.status ===200){//数据获取成功，获取服务器响应的数据 
             console.log(xhr.responseText)}}</script>

发送post请求

直接上示例

functionhttpPostLocaltion(key,params){let url ="http://www.baidu.com";// 把参数对象转换为jsonlet param =JSON.stringify(params);let xhr =newXMLHttpRequest();
    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
那就是上面提出的问题，需要把设置请求头的信息放到监听方法下方