原生ajax的实现

来源：互联网发布：win10电脑主题软件编辑：程序博客网时间：2024/06/06 19:50

get方式请求

<script type="text/javascript"> 
/* 创建 XMLHttpRequest 对象 */ 
varxmlHttp;  
functionGetXmlHttpObject(){  
　　if(window.XMLHttpRequest){  
　　　　// code for IE7+, Firefox, Chrome, Opera, Safari 
　　　　xmlhttp=newXMLHttpRequest();  
　　}else{// code for IE6, IE5 
　　　　xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); 
　　} 
　　returnxmlhttp;  
} 
// -----------ajax方法-----------// 
functiongetLabelsGet(){  
　　xmlHttp=GetXmlHttpObject(); 
　　if(xmlHttp==null){ 
　　　　alert('您的浏览器不支持AJAX！'); 
　　　　return; 
　　} 
　　varid = document.getElementById('id').value; 
　　varurl="";  
　　xmlHttp.open("GET",url,true);  //Boolean参数代表同步或异步
　　xmlHttp.onreadystatechange=favorOK;//成功回调函数 
　　xmlHttp.send(); //可传参数
}
functiongetOkGet(){  
　　if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){ 
　　　　// 本地提示：加载中 
　　} 
　　if(xmlHttp.readyState==4 && xmlHttp.status==200){  
　　　　vard= xmlHttp.responseText;   //后台返回结果
　　　　// 处理返回结果 
　　} 
} 
</script>


post方式请求

<script type="text/javascript"> 
/* 创建 XMLHttpRequest 对象 */ 
varxmlHttp;  
functionGetXmlHttpObject(){  
if(window.XMLHttpRequest){  
// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=newXMLHttpRequest();  
}else{// code for IE6, IE5 
xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); 
} 
returnxmlhttp;  
} 
// -----------ajax方法-----------// 
functiongetLabelsPost(){  
xmlHttp=GetXmlHttpObject(); 
if(xmlHttp==null){ 
alert('您的浏览器不支持AJAX！'); 
return; 
} 
varurl=""; 
xmlhttp.open("POST",url,true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); post方式设置头  
xmlhttp.send(); 
xmlHttp.onreadystatechange=getLabelsOK;//成功回调函数  
} 
functiongetOkPost(){  
if(xmlHttp.readyState==1||xmlHttp.readyState==2||xmlHttp.readyState==3){ 
// 本地提示：加载中/处理中 
} 
if(xmlHttp.readyState==4 && xmlHttp.status==200){  
vard=xmlHttp.responseText; // 返回值 
// 处理返回值 
} 
} 
</script>

ajax状态值：（AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。使用“ajax.readyState”获得。对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。）

 0 － （未初始化）还没有调用send()方法
 1 － （载入）已调用send()方法，正在发送请求
 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
 3 － （交互）正在解析响应内容
 4 － （完成）响应内容解析完成，可以在客户端调用了

ajax状态码：(AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；)

1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败

阅读全文

0 0