如何使用Ajax技术开发Web应用程序
发布网友
发布时间:2022-04-30 18:11
我来回答
共1个回答
热心网友
时间:2022-04-20 09:20
一、简介
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 onload="makeRequest('xml/content.xml'); ">
<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"); }
五、发出请求
现在既然你已经创建了你的请求对象,那么你已经为向服务器发 出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后,该事件处理器 方法将在状态发生变化时作出响应。一旦我们完成请求,我们就开始创建这个方法。打开连接以GET或 POST一个定制的URL-在此是一个content. xml,并且设置一个布尔定义-是否你想要进行异步调用。
现在到了发出请求的时间了。在这个示例中,我使用了null,因为我们使用的是GET; 为了使用 POST,你需要使用下面这个方法发出一个查询串:
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send (null);
六、定制加载和错误处理消息
你为onreadystatechange方法创建的事件处理器 正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的 时候了。在这个实例中,我针对所有的装载状态代码提供反馈,并且也对最经常发生的错误处理状态代 码提供一些基本的反馈。为了显示请求对象的当前状态,readyState属性包括显示在下表中的一些值。
值 描述
0 未初始化,对象没有用数据进行初始化。
1 装载中,对象正在装载它 的数据。
2 装载结束,对象完成了它的数据的装载。
3 可交互,用户能与对象交互了, 尽管它还没有装载结束。
4 完成,对象已经完全被初始化。
W3C中有很长的一串有关HTTP 状态代码的定义。我选择了两个状态代码:
200:请求成功了。
404:服务器没有找到与所 请求的文件相匹配的任何东西。
最后,我检查任何另外的状况代码-它们将生成一个错误并提供 一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意,我在定位我们前面在HTML 文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在 div对象的开始和结束标签之间的HTML:
if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request..."; }
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response..."; }
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready..."; }
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定 向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
当状况代码为200 时,这意味着请求成功。下面开始进行响应了。
七、分析响应
当你准备好分析来自请求 对象的响应时,真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的,在开发期间 ,可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点, 首先使用你创建的请求对象,定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定 位到documentElement-它检索一个到XML响应的根结点的参考。
var response = request.responseXML.documentElement;
现在既然你有了到响应的根结点的参考,那么你可以使 用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个 childNode:
response.getElementsByTagName('header') [0].firstChild.data;
使用firstChild.data可以允许你存取该元素中的文本:
response.getElementsByTagName('header')[0].firstChild.data;
下面是怎样 创建这些代码的完整的例子:
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName ('header')[0].firstChild.data;
document.getElementById ('copy').innerHTML = header;
八、需求分析
现在既然你知道怎样使用 AJAX的基础知识,那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是,在你还没有刷 新页面时你无法使用"Back"按钮。为此,可以先专注于你的工程中的一小部分-它能够从使用 这种类型的交互中受益。例如,你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询 一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时,它能够把数据发送到一个脚本中 并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的; 并且这种使用无论对开发 者还是用户都会带来益处; 这全依赖于具体的条件和执行情况。
还有其它方法可用来解决 "Back"按钮的问题,例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷 新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给 用户带来更大的好处。
九、结论
尽管AJAX允许我们构建新的和改进的方式来与一个WEB页 面进行/交互; 但是作为开发者,我们需要牢记产品是不考虑技术的; 它关心的是用户以及其如何与用户 进行交互。没有了用户群,我们构建的工程毫无用处。基于这个标准,我们就能评估应该使用什么技术 以及何时使用它们来创建对相应用户有用的应用。
ajax怎么使用?
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。Ajax这个术语源自描述从基于Web的应用到基于数据的应用:Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用JavaScript向服务器提出...
Ajax修炼之道——Web2.0入门目录
探索Ajax技术的深度,本文将带你一步步走进Web2.0世界,领略Ajax的强大魅力。首先,我们将从基础出发,了解如何利用Ajax构建丰富互联网应用,这在第1章中会有详细的讲解。第2章,我们将构建实际案例,如著名的Google Maps,展示Ajax在地理位置服务中的实际应用。实战经验是提升技能的关键,第3章将为你提...
...权威指南》如何帮助开发者创建具有桌面程序功能的Web应用程序?
《Ajax权威指南》是一部深度剖析Web开发新趋势的实用手册,它主要讲解如何运用JavaScript、XML、CSS和XHTML等标准技术,结合XMLHttpRequest对象,构建出具备桌面应用般功能的浏览器原生应用程序。全书深入剖析了Ajax在现代Web应用中的融合,包括但不限于:利用Ajax进行高级浏览器搜索、集成Web服务和Mashup等创新应...
ajax是干什么的Ajax是干嘛的
Ajax结合了各种不断变化的技术和强耦合的客户机-服务器环境,提出了一种新的开发方法。Ajax开发人员必须理解传统的MVC架构,它限制了应用程序级别之间的界限。同时,开发人员需要考虑B/S环境的外部,使用Ajax技术重新定义MVC边界。最重要的是,Ajax开发人员一定不能将Web应用程序视为页面的集合,而要将它们...
ajax是什么
4. 应用优势:Ajax技术的应用带来了许多优势。它可以创建更流畅、更快速的Web应用程序,减少服务器负载,降低数据传输量,提供更丰富的用户体验等。如今,许多大型Web应用如社交网络、在线聊天、电子商务网站等都广泛使用了Ajax技术。总之,Ajax作为一种重要的前端技术,已经成为现代Web开发中不可或缺的一...
如何学习AJAX技术?
本文介绍一种方法,Ajax,使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。本文也演示了启用这种方法是多么简单:利用一个Ajax框架(指DWR)构造一个应用程序,它直接从浏览器与后端服务进行通信。如果使用得当,这种强大的力量可以使应用程序更加自...
ajax是干啥的
Ajax开发人员必须理解传统的MVC架构,并在此基础上,使用Ajax技术重新定义MVC边界。同时,他们需要将Web应用程序视为单个页面的集合,而不是页面的简单集合。jQuery库的功能 jQuery是一个轻量级的JavaScript库,它简化了诸如HTML元素选取、操作、CSS操作、事件处理、JavaScript特效和动画等任务。此外,jQuery还...
请问ajax技术 原理分析介绍 详细的教程,谢谢!
3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它。 ajax...
Ajax从入门到精通Ajax应用进阶篇
10.7.3 使用模板 10.7.4 取得数据 10.7.5 使用 for-each 元素代替模板 10.7.6 使用 sort 元素进行排序 10.7.7 流程控制 10.7.8 创建元素和属性 10.7.9 指定输出格式 10.8 在客户端格式化XML 10.9 跨浏览器的XML开发框架:zXML 10.10 应用实例:Ajax文章列表程序(XML)数据的组织...
在ASP.net中用Ajax实现客户端控件调用后台代码,应该怎么实现?
1.Web.config中需要配置好运行ASP.NET AJAX框架相应的配置项,当然,建立一个ASP.NET AJAX Enabled Web Site项目时,Web.config已经配置好了。2.想让某个WebService可以被JS调用,需要做一下几步:I.在这个WebService文件里用“using System.Web.Script.Services;”引入这个命名空间。II.在这个类的...