一个ajax demo

最新推荐文章于 2025-12-16 16:18:28 发布

转载最新推荐文章于 2025-12-16 16:18:28 发布 · 400 阅读

文章标签：

#ajax #xmlhttprequest #服务器 #internet #safari #function

<html>　　
<body>　　
<script type="text/javascript">　　

   function ajaxFunction()　　{　　

       var xmlHttp;　　
       try{　　
           // Firefox, Opera 8.0+, Safari　　
           xmlHttp=new XMLHttpRequest();　　
       }catch (e){　　
           // Internet Explorer　　
           try{
               xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");　　
           }catch (e){
               try{　　
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
               }catch (e){
                   alert("您的浏览器不支持AJAX！");　　
                   return false;　　
               }　　
           }　　
       }　　
       xmlHttp.onreadystatechange=function(){
           if(xmlHttp.readyState==4)　　
           {　　
               document.myForm.time.value=xmlHttp.responseText;　　
           }　　
       }　　
       xmlHttp.open("GET","time.asp",true);　　
       xmlHttp.send(null);　　
   }　　
</script>　　
<form name="myForm">　　
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>

</html>

例子解释：　　

首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。　　

然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。　　假如这三种方法都不起作用，那么这个用户所使用的浏览器已经太过时了，他或她会看到一个声明此浏览器不支持 AJAX 的提示。　　

注释：上面这些浏览器定制的代码很长，也很复杂。不过，每当您希望创建 XMLHttpRequest 对象时，这些代码就能派上用场，因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的主流浏览器：Internet Explorer、Opera、Firefox 以及 Safari。　　下一节为您展示如何使用 XMLHttpRequest 对象与服务器进行通信。　　AJAX - XMLHttpRequest 对象　　Previous PageNext Page　　AJAX - 更多有关 XMLHttpRequest 对象的知识　　在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

onreadystatechange 属性

　　onreadystatechange 属性存有处理服务器响应的函数。

下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：　　

xmlHttp.onreadystatechange=function()　　{　　// 我们需要在这里写一些代码　　}　　

readyState 属性　　

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。　　这是 readyState 属性可能的值：　　


0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：　　

xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // 从服务器的response获得数据 } }