本文提供原生 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 请求实例代码。希望这些示例能对您有所帮助。如有疑问，欢迎留言交流，我们将及时回复。感谢大家的支持！