原生js XMLHttpRequest发送 get post 请求解决跨域及注意事项-Toy模板网

这篇具有很好参考价值的文章主要介绍了原生js XMLHttpRequest发送 get post 请求解决跨域及注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

 <script>
     // 携带参数
     let param = 1;
     let url = http://www.baidu.com
     //1、创建一个 xhr 的对象
     let xhr = new XMLHttpRequest()
     //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请求

直接上示例

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
那就是上面提出的问题，需要把设置请求头的信息放到监听方法下方文章来源地址https://www.toymoban.com/news/detail-586973.html

到了这里，关于原生js XMLHttpRequest发送 get post 请求解决跨域及注意事项的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！