原生 JavaScript 实现 Ajax 的 GET 与 POST 请求完整示例

作者:代码拾荒时间:2026-10-30 08:32:47浏览:484

本文提供原生 JavaScript 实现 Ajax 的 GET 和 POST 请求完整代码示例。重点解析 XMLHttpRequest 对象的创建与兼容性处理,并强调 Ajax 方法必须与脚本定义在同一 script 标签内,否则会导致请求失败。

原生 JavaScript Ajax GET 请求示例

以下是使用原生 JavaScript 发起 GET 请求的代码实现:


<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>

原生 JavaScript Ajax POST 请求示例

以下是使用原生 JavaScript 发起 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 的核心基础。在创建 XMLHttpRequest 对象时,必须确保调用 Ajax 方法的代码与对象定义位于同一个 <script></script> 标签块中。如果跨标签调用,Ajax 请求将会出错且无法返回数据。

以上内容介绍了原生 JavaScript 中 Ajax 的 GET 和 POST 请求实例代码。希望这些示例能对您有所帮助。如有疑问,欢迎留言交流,我们将及时回复。感谢大家的支持!

作者最新文章