运用Ajax简单发起API请求

文章介绍了如何使用原生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,引用了好朋友的文章和菜鸟教程的相关内容,做一个笔记供大家和自己复习

### 如何使用Ajax发起GET请求JavaScript中,可以通过多种方式实现Ajax的GET请求。以下是几种常见的方法及其示例代码。 #### 1. 使用原生XMLHttpRequest对象发起GET请求 通过创建`XMLHttpRequest`对象,可以手动配置和发送GET请求。以下是一个简单的示例[^4]: ```javascript var request = new XMLHttpRequest(); var name = document.getElementById("name").value; request.open("GET", "xxxx.jsp?name=" + encodeURIComponent(name), true); request.send(); request.onreadystatechange = function () { if (request.readyState === 4) { if (request.status === 200) { document.getElementById("div").innerHTML = request.responseText; } else { alert("请求错误:" + request.status); } } }; ``` #### 2. 使用`fetch`函数发起GET请求 现代浏览器支持`fetch` API,它提供了更简洁的方式发起GET请求。以下是一个示例[^1]: ```javascript fetch('xxxx.jsp?name=' + encodeURIComponent(document.getElementById("name").value)) .then(function (response) { if (!response.ok) { throw new Error('网络响应失败'); } return response.text(); }) .then(function (data) { document.getElementById("div").innerHTML = data; }) .catch(function (error) { console.error('请求失败:', error); }); ``` #### 3. 使用jQuery发起GET请求 如果项目中使用了jQuery库,可以通过`$.ajax`或`$.get`方法发起GET请求。以下是一个示例[^2]: ```javascript $.ajax({ type: "GET", url: "xxxx.jsp", data: { name: $("#name").val() }, success: function (data) { $("#div").html(data); }, error: function () { alert("请求失败"); } }); ``` 或者使用更简化的`$.get`方法: ```javascript $.get("xxxx.jsp", { name: $("#name").val() }, function (data) { $("#div").html(data); }); ``` #### 注意事项 - 在GET请求中,参数通常会附加在URL后面,并用`?`分隔[^5]。 - 参数值需要进行编码处理,以避免特殊字符导致的问题。可以使用`encodeURIComponent`函数对参数值进行编码[^4]。 - 跨域请求时需要注意CORS(跨域资源共享)的限制[^5]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值