使用原生JS对象XMLHttpRequest，进行异步请求

最新推荐文章于 2024-01-16 22:49:22 发布

原创

最新推荐文章于 2024-01-16 22:49:22 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用原生JavaScript中的XMLHttpRequest对象进行异步请求，通过实例代码展示其基本用法，包括前端代码和后台交互，同时提到了与jQuery AJAX接口的差异，并提供了相关学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果还只会JQ中的AJAX接口，而不知道底层，感觉有点辣鸡，所以自己用底层XMLHttpRequest对象去访问服务器。

那么直奔主题吧

前端代码：（这里唯一的缺点是，发送的数据格式跟JQ的不太一样，估计JQ做了处理）

var xmlHttpRequest;
function myAjax(){
	var url = "<%=basePath%>/hmcp/hightvalue/purchase/hmcpPurchaseApply/batchPurchase.spring";
	xmlHttpRequest = new XMLHttpRequest();
	xmlHttpRequest.onreadystatechange = myCallBack;
	//相应数据格式
	xmlHttpRequest.responseType = "json";
	//请求方式和地址，是否异步
	xmlHttpRequest.open("post",url,true);
	//注意：setRequestHeader方法，只能在open方法后面调用
	xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttpRequest.send("followIds[]=1&followIds[]=2");
}
//回调函数
function myCallBack(){
//XMLHttpRequest.DONE=4
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
		//成功后的逻辑
	}
}

后台：