赛迪网 > IT技术 Java > Java大图列表
  IT资讯搜索
 
IT产品搜索
[程序开发][网管世界][网络安全][数据库技术]
[操作系统][嘉宾聊天·在线访谈][活动集锦]
[精彩专题][Symantec专区][订阅IT技术周刊]
[开发论坛][网管论坛][安全论坛][数据库论坛]
[操作系统论坛][Sybase专区][IBM dW技术专区]
[病毒求助][病毒与漏洞播报][文档·源码下载]

一个最简单的AJAX实例及解析

发布时间:2008.01.25 09:19     来源:赛迪网    作者:baocl

首先,演示一下实际运行的效果。点击弹出新页面中的“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。

         (责任编辑:包春林)


[ 发表评论 ] 字体[  ] [ 打印 ] [ 进入博客 ] [ 进入论坛 ]  [ 推荐给朋友 ]
  相关文章
· Java入门--接口与抽象类的深层理解 (01-24) · Java语言深入--java调用C/C++的过程 (01-24)
· 数据库相关--一篇关于优化SQL的文章 (01-24) · Java语言深入:新生代JAVA程序员的思想 (01-24)
· 关于Servlet的初始化参数的配置和使用 (01-24) · 初始化引发的"StackOverflowError" 异常 (01-24)
· 开发框架:Spring XML配置十二个最佳实践 (01-24) · 中间件:Tomcat5.0-5.5连接池配置指南 (01-24)
· 第三方类库--I/O包中的 Decorator模式 (01-24) · J2EE综合--选择应用服务器的七个标准 (01-24)
  客户需求反馈表
* 姓  名:
更多资料  了解方案  认识厂商
* 单位名称:
* 联系电话:
* 电子邮件:
  赛迪推荐  
  手机·资费 ·新品·导购·评测·手机资费·宽带
手机搜索  诺基亚 N73 MOTO Z6
  IT产品 ·笔记本·台式机·服务器·打印·投影
IT产品搜索 
  IT技术 ·开发·网管·安全·数据库·操作系统
  信息化 ·热点·专题·访谈·周刊·方案案例
· 网银交易收费 我国银行业如何达国际化标准
· 家庭信息化普及率提高 网上缴费成为新时尚
· 五条黄金准则能够让CIO巧妙加薪 CIO焦虑调查
· 网上书店解决方案 深圳边检指挥中心ITSM项目
  IT博客 ·曾剑秋·项立刚·Java学习·网管
  IT技术论坛 ·开发·网管·安全·数据库·系统