posts - 6,  comments - 10,  trackbacks - 0
原文http://www.jsfchina.org/pages/ViewArticles.jsf
去年开始看AJAX时候所写的第一个小程序,整理了下。应该算AJAX最简单的应用了。
 
首先,演示一下实际运行的效果。点击弹出新页面中的“See Author”链接,你将会看到该页面作者。从页面提交到显示从服务器获得的结果,这段过程你将不会发现页面的重刷新。
下面给出该示例的代码:
1. ajax.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple AJAX example</title>
<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);
   document.getElementById(obj).appendChild(textNode);
  }
  //--></script>
</head>
<body>
<h1>A simple AJAX program</h1>
<p id="obj">This page is powered by <a id='link' href="data.xml"
 title="View the author."
 onclick="findAuthor('data.xml'); this.style.display='none'; return false">See
Author.</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
</body>
</html>

 

2.data.xml

<?xml version="1.0" encoding="UTF-8"?>
<author>
 <name>www.jsfchina.org</name>
</author>

 

解析下。

该例应该算是最简单的ajax应用了。为了尽求简单性,这里没有使用到任何服务器端技术,诸如servlet,cgi等等。这里并没有使用到任何业务方法,而是直接从服务器的一个xml文档(data.xml)中读取数据。为了简洁性,本例将JavaScript文件也集成到了ajax.html中,实际应用中完全可以独立出去使用。

该例通过点击链接,激发了一个javascript的方法然后进行交互处理。

AJAX的核心是XMLHttpRequest,本例通过下列代码创建这个对象

  var xmlObj = null;
  if(window.XMLHttpRequest){
      xmlObj = new XMLHttpRequest();
  } else if(window.ActiveXObject){
      xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
      return;
  }

if(window.XMLHttpRequest)处理了浏览器是mozilla的情况,而if(window.ActiveXObject)则处理了浏览器为IE的情况,目的都是一个:创建了一个XMLHttpRequest对象。创建这个对象的目的就是让XMLHttpRequest对象与服务器交互,而不影响用户正在浏览的页面。这也是AJAX称谓的由来,异步javascript交互xml处理。

创建好XMLHttpRequest对象之后,调用的函数将会监听该对象状态的变化,即onreadystatechange属性。XMLHttpRequest对象有5个状态,从0-4的整数,也就是说onreadystatechange调用的函数(示例中function(){...})将会执行4次。示例中我们在该对象处于完成状态(readyState=4)时进行处理(此时服务器已经传回所有信息),为id为“author”的span对象添加了一个textNode节点,该textNode是data.xml文档中name节点的第一个子元素的值。

好了,这就是完成一次异步交互所需要的步骤。

以下是一些注意点。

第一,本例中使用的http的GET方法,你也可以使用POST,但是要设定Content-Type值,即xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),这个方法用来设置了MIME类型。还有一点要注意,这些方法最好都大写,否则在firefox下将没有作用。

第二,xmlObj.open ('GET', file, true)。该方法会建立与服务器的链接,‘GET’指明了http调用方法;file指明了调用的url;true指明了该调用是异步处理,可以省略,默认为'true'。

第三,xmlObj.send(para)向服务器发出请求。是以POST向服务器发出request,其参数格式为:name=namevalue&so=on。(参考注意点一)

 

转贴注明出处www.jsfchina.org
posted on 2006-04-07 11:33 Nelson Lee 阅读(285) 评论(5)  编辑  收藏

FeedBack:
# re: 一个简单的ajax实例(转)
2006-04-08 12:18 | lin5061
又是AJAX,太爽了!可能过一阵子我也得看这玩意儿了。虽然还不知道什么是AJAX,但是听说163和GMAIL的邮箱就是用这种技术在做的,看来应该会很看好。还记得以前我们谈过不刷新页面得到数据没?我想可能会跟这方面有点关系吧。
(呵呵,这篇文章不错,我也来个收藏吧)  回复  更多评论
  
# re: 一个简单的ajax实例(转)
2006-04-08 12:19 | lin5061
哇,不会吧?难道你这个BLOG也是用的AJAX技术?怎么页面没有刷新啊?太强悍了!再提交一次  回复  更多评论
  
# re: 一个简单的ajax实例(转)
2006-04-08 12:20 | lin5061
不行,还是有刷新页面的,呵呵  回复  更多评论
  
# re: 一个简单的ajax实例(转)
2006-04-10 11:40 | Nelson
一个AJAX小试牛刀的地方,看得我吓一大跳
http://cluster1.gbaopan.com/gbaopan.web/Register.aspx
不用AJAX也不行啊  回复  更多评论
  
# re: 一个简单的ajax实例(转)
2006-04-17 16:23 | lin5061
"一个AJAX小试牛刀的地方,看得我吓一大跳
http://cluster1.gbaopan.com/gbaopan.web/Register.aspx
不用AJAX也不行啊"
这是什么??  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2006年4月>
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

常用链接

留言簿(1)

随笔档案

好友的BLOG

搜索

  •  

最新评论

阅读排行榜

评论排行榜