运用Ajax简单发起API请求

最新推荐文章于 2024-04-30 11:27:22 发布

原创最新推荐文章于 2024-04-30 11:27:22 发布 · 716 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

文章介绍了如何使用原生JavaScript进行Ajax请求，特别是XMLHttpRequest对象的使用。首先，检查浏览器对XMLHttpRequest的支持，然后设置监听事件处理响应，接着通过open方法配置请求参数，最后发送请求。内容涵盖了异步请求的基本流程，适用于Vue等框架之外的API调用场景。

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

之前学习的vue里发送api请求大多数都是直接导入axios库，之前学js的时候没有怎么接触到ajax部分的内容，现在重新回过来复习js，希望可以重新将这一部分学习一下

1.首先需要判断该浏览器是否支持XMLHttpRequest()对象，目前大部分主流的浏览器基本上都已经支持了，但考虑到浏览器兼容性问题最好还是判断一下

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
	// IE6, IE5 浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.需要创建一个监听事件去监听事件的返回结果response

xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)//如果请求完成
	{
		//处理response
	}
}

3.请求的方法，运用事先创建好的实例，xmlhttp.open(a,b,c)，注意，这里的请求由三个参数组成，第一个参数是是请求的方法(GET和POST)，第二个参数是api的请求地址，第三个参数是是否是异步请求

xmlhttp.open("GET或者POST","api",true);//true为异步，false为同步

4.最后是发送请求

xmlhttp.send();

最后，上述内容应该可以简单完成运用ajax请求api，引用了好朋友的文章和菜鸟教程的相关内容，做一个笔记供大家和自己复习