JS原生Ajax实现:GET与POST请求详解
作者:异步漫步时间:2026-10-30 08:33:09浏览:270
本文详细介绍如何使用JavaScript原生XMLHttpRequest对象发起GET和POST请求。重点解析跨浏览器兼容性问题,包括IE6-8的ActiveXObject处理,以及请求状态监听与数据获取。文章强调代码需置于同一脚本标签内以确保功能正常,并提供完整的请求示例供参考。
JS原生Ajax GET请求实现
在JavaScript中实现Ajax的GET请求,核心在于使用XMLHttpRequest对象。该对象是发起异步通信的基础组件,负责与服务器进行数据交换。
<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsGet(){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert('您的浏览器不支持AJAX!');
return;
}
var id = document.getElementById('id').value;
var url="http://www.Leefrom.com?id="+id+"&t/"+Math.random();
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=favorOK;//发送事件后,收到信息了调用函数
xmlHttp.send();
}
function getOkGet(){
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
// 本地提示:加载中
}
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var d= xmlHttp.responseText;
// 处理返回结果
}
}
</script>
JS原生Ajax POST请求实现
对于POST请求,同样依赖XMLHttpRequest对象,但需在发送数据前正确设置请求头,并通过send方法传递参数。POST通常用于提交表单数据或较大负载的信息。
<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp;
function GetXmlHttpObject(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// -----------ajax方法-----------//
function getLabelsPost(){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert('您的浏览器不支持AJAX!');
return;
}
var url="http://www.lifefrom.com/t/"+Math.random();
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
xmlHttp.onreadystatechange=getLabelsOK;//发送事件后,收到信息了调用函数
}
function getOkPost(){
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){
// 本地提示:加载中/处理中
}
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var d=xmlHttp.responseText; // 返回值
// 处理返回值
}
}
</script>
XMLHttpRequest使用注意事项
关键注意事项:XMLHttpRequest对象必须在调用Ajax方法的同一个<script>标签内创建。若跨标签或异步加载导致作用域分离,请求将失败且无法返回数据。无论是GET还是POST,均需确保对象实例化与调用逻辑在同一脚本块中。
以上关于JS原生Ajax GET和POST的实现方法即为全部内容,旨在为开发者提供清晰的技术参考。欢迎收藏与分享,获取更多前端技术资源。
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
相关标签:
