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

转载 2006年06月04日 21:11:00
去年开始看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="/oblog312/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。

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

关会用dwr了 把最一开始的给忘了。。。罪过罪过 原帖地址 首先,演示一下实际运行的效果。点击弹出新页面中的“See Author”链接,你将会看到该页面作...

一个简单的Ajax实例

  • 2007年11月21日 12:34
  • 3KB
  • 下载

一个简单的基于AJAX的二级联动实例

效果: 1.选择省份后,自动加载省份对应的城市。 2.所有省份以及城市的信息保存在xml文件中。 原理: 当页面加载完毕后,XMLHttpRequest对象向一个servlet...

php+jquery+ajax+json的一个最简单实例

php+jquery+ajax+json的一个最简单实例 html页面: http-equiv="content-type" content="text/html;c...

Ajax学习(二)—— 一个简单的Ajax实例

通过上篇博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目。 1.实例功能: 当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已经存在。若存...

实战AJAX-------简单实例解析

前言:在学JQUERY的时候,当时总感觉AJAX很难,也不会用,也不知道用来干嘛的,随着逐渐的深入,水平的不断提高,再回过头来看AJAX,就没那么难了,反而被它强大的功能所吸引。我现在的理解是,以往的...

一个简单的ajax实例:ajax与struts2实例

前言          对于从事技术的人员来说ajax是这好东西,都会使用,而且乐于使用。但对于新手,开发一个ajax实例,还有是难度的,必竟对于他们这是新东西。leo开发一个简单的ajax实例,用...

XML DOM解析(Java)的一个简单实例

JAXP(Java API for XML Parsing) :用于XML解析的Java API。     本文通过一个实际的代码例子来说明如何用Java提供的DOM相关的类和接口解析XM...

【Android 网络数据解析实现一个简单的新闻实例(一)】

一般安卓在学到异步任务AsyncTask之后都会有个安卓小项目的任务。得到(荔枝新闻,茶百科等)新闻网络接口来解析网络图片或文字到ListView组件上显示。其中要使用到的知识大概有:获取网络数据(H...
  • SYIF88
  • SYIF88
  • 2015年11月10日 21:17
  • 3482
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个最简单的AJAX实例及解析
举报原因:
原因补充:

(最多只允许输入30个字)