利用AJAX技术开发应用程序实战

ajax|程序

  AJAX,一个异步JavaScript和XML的缩略词,是当今快速发展的Web开发界十分热门的技术。在这项新技术提供巨大能力的同时,它也燃发了在"Back"按钮问题上的不容置疑的争论。本文作者将向你解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。

在你读完本文后,你就会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。

  一、 简介

  AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着,例如,你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据,把数据发送到存储在一个数据库的服务器脚本,或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而,在这项新技术提供巨大能力的同时,它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。

  首先,我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件,但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后,你将会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术。你将要学习,在保持给用户提供直观体验的同时怎样创建对象,发出请求以及定制响应。

  我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。

  二、 常规属性和方法

  表1和2提供了一个属性和方法的概述-它们为Windows Internet Explorer 5,Mozilla,Netscape 7,Safari 1.2,和Opera等浏览器所支持。

  表1属性

属性 描述
onreadystatechange 当请求对象变化时该事件处理器激活。
readyState 返回指示对象的当前状态的值。
responseText 来自服务器的响应串的版本。
responseXML 来自服务器的响应的DOM兼容的文档对象。
status 来自服务器的响应的状态码。
statusText 以一个字符串形式返回的状态消息。

  表2方法

方法 描述
Abort() 取消当前HTTP请求。
getAllResponseHeaders() 检索所有的HTTP头值。
getResponseHeader("headerLabel") 从响应体中检索一个HTTP头部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 初始化一个MSXML2.XMLHTTP请求,并从该请求指定方法,URL和认证信息。
send(content) 发送一个HTTP请求到服务器并接收响应。
setRequestHeader("label", "value") 指定一个HTTP头的名字。

  三、 从哪里开始

  首先,你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与目标工程驻留在相同的服务器上。

  下一步,创建发出请求的HTML文件。当页面通过使用页面主体中的onload方法进行加载时,该请求发生。接着,该文件需要一个有ID的div标签,这样当我们准备好要显示内容时就可以对之进行定位。当你做完所有这些,你的页面的主体看上去如下:

<body >
<div id="copy"></div>
</body>

  四、 创建请求对象

  为了创建请求对象,你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象;而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式:Opera,Mozilla,Netscape和Safari允许你简单地调用该对象的构造器,但是Windows IE需要把对象的名字传递到ActiveX构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例:

if(window.XMLHttpRequest)
{ request = new XMLHttpRequest();}
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP");}

[1] [2]  下一页

时间: 2024-09-10 23:26:38

利用AJAX技术开发应用程序实战的相关文章

利用AJAX技术开发应用程序实战发

ajax|程序 AJAX,一个异步JavaScript和XML的缩略词,是当今快速发展的Web开发界十分热门的技术.在这项新技术提供巨大能力的同时,它也燃发了在"Back"按钮问题上的不容置疑的争论.本文作者将向你解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值. 在你读完本文后,你就会明白什么是AJAX,在什么情况下,为什么以及怎样使用这项技术. 一. 简介 AJAX,一个异步JavaScript和XML的缩略词,是最近出来的技术词语.异步意味着你可以经由超文本传输协

探讨:利用AJAX技术提高搜索引擎排名

描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能.本文作者想同你一起探讨如何使用AJAX技术来解决这两个问题. 许多设计良好的web站点都包含大量的与实际内容相联系的可导航信息.用于导航的HTML标记能影响你的搜索引擎评价,而且能够改进访问者的页面下载体验感.在本文中,你会看到如何使用AJAX来创建更为集中的更快速加载的web页面. 一. 分离导航与内容 让我们使用一个例子作为开始.请考虑你现在阅读的文章,它有下列一些内容: · 一个其上有一些预定义的

利用AJAX技术提高搜索引擎排名

描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能.本文作者想同你一起探讨如何使用AJAX技术来解决这两个问题. 许多设计良好的web站点都包含大量的与实际内容相联系的可导航信息.用于导航的HTML标记能影响你的搜索引擎评价,而且能够改进访问者的页面下载体验感.在本文中,你会看到如何使用AJAX来创建更为集中的更快速加载的web页面. 一. 分离导航与内容 让我们使用一个例子作为开始.请考虑你现在阅读的文章,它有下列一些内容: · 一个其上有一些预定义的

WordPress中利用AJAX技术进行评论提交的实现示例_javascript技巧

一直对 WordPress 的 Ajax 交互研究感兴趣,也一直很关注于这方面的技术,谈到 WordPress Ajax 就不得不谈到评论 Ajax提交,作为一个博客.论坛评论的 Ajax 提交不仅可以改善用户体验,还可以大幅缩减服务器开支,毕竟输出单条评论内容比重新组织输出一个页面要简单的多. 虽说现在访问量一直比较低,不存在服务器压力的问题,但一向注重用户体验的我,当然不能放弃这么一个提升用户体验的机会.今天抽了一下午的空,把这个主题的 Ajax 评论提交初步完成了. 直接开门见山,直接上代

利用Ajax技术写一个迷你留言板WEB控件

ajax|web|控件 初学Ajax不久,自己写个小东西,以作学习日记留言板图片如下: 样例地址:http://www.8dao.net/miniguest/ 首先,这里用的是Access数据库,便于移动.数据库很简单,表Guest,字段有ID,Name,Content 要实现Ajax,利用asp.net ajax 1.0 bate是很方便的,在http://ajax.asp.net可以下载到.安装好后打开VS2005,新建一个ASP.net AJAX Enabled Web Site项目在里面

创建基于AJAX技术的Scribble应用程序

简介 ASP.NET Atlas是一套丰富的类库,用于ASP.NET开发AJAX风格的应用程序.本文试图解说Atlas框架的一般性特征,由于Atlas是一个庞大的库,故本文集中探讨Atlas的两个最重要的特征: 1. 能够从客户端脚本中调用服务器端web服务 2. 使得开发跨浏览器兼容的JavaScript代码相当容易 通过对这两个特征的介绍,读者朋友可以熟悉Atlas类库的使用方法. 背景 MFC Scribble应用程序是学习MFC编程的著名例子之一.Scribble应用程序允许用户使用鼠标

用ajax技术制作在线歌词搜索功能

最新制作完成的在线歌词搜索功能,利用ajax技术,无刷新显示歌词,只需要输入你要查找的歌曲名或歌词.界面还不是很好看,完善中......  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.

ajax技术制作得在线歌词搜索功能

ajax|在线 最新制作完成的在线歌词搜索功能,利用ajax技术,无刷新显示歌词,只需要输入你要查找的歌曲名或歌词.界面还不是很好看,完善中...... 源码下载http://www.efish.cn/ajaxss.rar  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

ajax技术实现在线歌词搜索功能

最新制作完成的在线歌词搜索功能,利用ajax技术,无刷新显示歌词,只需要输入你要查找的歌曲名或歌词.界面还不是很好看,完善中...... 源码下载http://www.efish.cn/ajaxss.rar 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2&l