您的位置：首页 > 理论基础 > 计算机网络

XMLHttpRequest实现Ajax效果实例

2014-03-26 20:26 393 查看


一、XMLHttpRequest 对象的方法与属性

    




二、使用XMLHttpRequest 实现ajax效果
     这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！

    客户端myAjax.html代码：

     

[xhtml]
view plaincopyprint?

<html xmlns="http://www.w3.org/1999/xhtml" >  
<head>  
    <title>AJAXDEMO</title>  
 </head>  
<mce:script language="javascript" type="text/javascript"><!--  
function btn_onclick()   
{     
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于  
            if (!xmlhttp) {  
                alert("创建xmlhttp对象异常！");  
                return false;  
            }  
          xmlhttp .open("POST","GetDate1.ashx?&ts" +new Date(),false);//准备向服务器的GetDate1.ashx发出Post请求  
          xmlhttp.onreadystatechange = function() //需要监听onreadyStatechange事件  
          {  
             if(xmlhttp.readyState == 4) //服务器完成  
             {   
               if(xmlhttp.status == 200)   //如果状态码为200则是成功  
               {    
                   document.getElementById ("Text1").value=xmlhttp.responseText; //responseText属性为服务器返回的文本  
               }  
               else  
               {  
                    alert("AJAX服务器返回错误！");  
               }  
            }  
          }  
          xmlhttp.send(); //才开始发送请求     
}  
// --></mce:script>  
<body>  
 <input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="显示系统时间"  onclick="btn_onclick()" />   
</body>  
</html>   

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>AJAXDEMO</title>
</head>
<mce:script language="javascript" type="text/javascript"><!--
function btn_onclick()
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于
if (!xmlhttp) {
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp .open("POST","GetDate1.ashx?&ts" +new Date(),false);//准备向服务器的GetDate1.ashx发出Post请求
xmlhttp.onreadystatechange = function() //需要监听onreadyStatechange事件
{
if(xmlhttp.readyState == 4) //服务器完成
{
if(xmlhttp.status == 200) //如果状态码为200则是成功
{
document.getElementById ("Text1").value=xmlhttp.responseText; //responseText属性为服务器返回的文本
}
else
{
alert("AJAX服务器返回错误！");
}
}
}
xmlhttp.send(); //才开始发送请求
}
// --></mce:script>
<body>
<input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="显示系统时间" onclick="btn_onclick()" /> 
</body>
</html> 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航