一个简单的Ajax实例

来源:互联网 发布:设计班服要用什么软件 编辑:程序博客网 时间:2024/05/01 09:33

点击弹出新页面中的“See Author”链接,你将会看到该页面作者。从页面提交到显示从服务器获得的结果,这段过程你将不会发现页面的重刷新。

<script type="text/javascript">
  function findAuthor(file){ 
     var xmlObj = null; 
     if(window.XMLHttpRequest){ 
        xmlObj = new XMLHttpRequest(); 
     } else if(window.ActiveXObject){ 
         xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); 
     } else { 
      return; 
    } 
    xmlObj.onreadystatechange = function(){ 
       if(xmlObj.readyState == 4){      <!-- 描述一个已加载的状态 -->
           updateObj('author',  
        xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data); 
       } 
     } 
    xmlObj.open ('GET', file, true);   
    xmlObj.send ('');              <!-- 向服务器发出请求 -->
  } 
  function updateObj(obj, data){ 
   var textNode = document.createTextNode(data);            <!-- 文本内容data转换成Dom对象 -->
   document.getElementById(obj).appendChild(textNode); 
  } 
</script> 

创建好XMLHttpRequest对象xmlObj之后,会调用函数监听该对象状态的变化,onreadystatechange 是一个事件句柄。它的值是一个函数function(){...},当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码。

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。


原创粉丝点击