Submitted by aming on 2008, May 4, 11:03 AM
程序员(使用后端应用程序)和 Web 程序员(编写 HTML、CSS 和 JavaScript)之间的分水岭是长久存在的。但是,Document Object Model (DOM) 弥补了这个裂缝,使得在后端使用 XML 同时在前端使用 HTML 切实可行,并成为极其有效的工具。在本文中,Brett McLaughlin 介绍了 Document Object Model,解释它在 Web 页面中的应用,并开始挖掘其在 JavaScript 中的用途。
与许多 Web 程序员一样,您可能使用过 HTML。HTML 是程序员开始与 Web 页面打交道的方式;HTML 通常是他们完成应用程序或站点前的最后一步——调整一些布局、颜色或样式。不过,虽然经常使用 HTML,但对于 HTML 转到浏览器呈现在屏幕上时到底发生了什么,人们普遍存在误解。在我分析您认为可能发生的事情及其可能错误的原因之前,我希望您对设计和服务 Web 页面时涉及的过程一清二楚:
1、一些人(通常是您!)在文本编辑器或 IDE 中创建 HTML。
2、然后您将 HTML 上载到 Web 服务器,例如 Apache HTTPD,并将其公开在 Internet 或 intranet 上。
3、用户用 Firefox 或 SafariA 等浏览器请求您的 Web 页面。
4、用户的浏览器向您的服务器请求 HTML。
5、浏览器将从服务器接收到的页面以图形和文本方式呈现;用户看到并激活 Web 页面。
这看起来非常基础,但事情很快会变得有趣起来。事实上,步骤 4 和步骤 5 之间发生的巨大数量的 “填充物(stuff)” 就是本文的焦点。术语 “填充物” 也十分适用,因为多数程序员从来没有真正考虑过当用户浏览器请求显示标记时到底在标记身上发生了什么。
» 阅读全文
Tags: dom, web, 响应
AJAX | 评论:0
| Trackbacks:0
| 阅读:298
Submitted by aming on 2008, May 4, 10:52 AM
对于很多 Web 开发人员来说,只需要生成简单的请求并接收简单的响应即可;但是对于希望掌握 Ajax 的开发人员来说,必须要全面理解 HTTP 状态代码、就绪状态和 XMLHttpRequest 对象。在本文中,Brett McLaughlin 将向您介绍各种状态代码,并展示浏览器如何对其进行处理,本文还给出了在 Ajax 中使用的比较少见的 HTTP 请求。
在本系列的 上篇文章 中,我们将详细介绍 XMLHttpRequest 对象,它是 Ajax 应用程序的中心,负责处理服务器端应用程序和脚本的请求,并处理从服务器端组件返回的数据。由于所有的 Ajax 应用程序都要使用 XMLHttpRequest 对象,因此您可能会希望熟悉这个对象,从而能够让 Ajax 执行得更好。
在本文中,我将在上一篇文章的基础上重点介绍这个请求对象的 3 个关键部分的内容:
·HTTP 就绪状态
·HTTP 状态代码
·可以生成的请求类型
这三部分内容都是在构造一个请求时所要考虑的因素;但是介绍这些主题的内容太少了。然而,如果您不仅仅是想了解 Ajax 编程的常识,而是希望了解更多内容,就需要熟悉就绪状态、状态代码和请求本身的内容。当应用程序出现问题时 —— 这种问题总是存在 —— 那么如果能够正确理解就绪状态、如何生成一个 HEAD 请求或者 400 的状态代码的确切含义,就可以在 5 分钟内调试出问题,而不是在各种挫折和困惑中度过 5 个小时。
下面让我们首先来看一下 HTTP 就绪状态。
深入了解 HTTP 就绪状态
您应该还记得在上一篇文章中 XMLHttpRequest 对象有一个名为 readyState 的属性。这个属性确保服务器已经完成了一个请求,通常会使用一个回调函数从服务器中读出数据来更新 Web 表单或页面的内容。清单 1 给出了一个简单的例子(这也是本系列的上一篇文章中的一个例子 —— 请参见 参考资料)。
XMLHttpRequest 或 XMLHttp:换名玫瑰
Microsoft™ 和 Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者。为了简单性起见,我将这两个对象都简单地称为 XMLHttpRequest。这既符合我们在 Web 上看到的情况,又符合 Microsoft 在 Internet Explorer 7.0 中使用 XMLHttpRequest 作为请求对象的意图。(有关这个问题的更多内容,请参见 第 2 部分。)
» 阅读全文
Tags: ajax, 高级请求, 响应
AJAX | 评论:0
| Trackbacks:0
| 阅读:244
Submitted by aming on 2008, May 4, 10:46 AM
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中,Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例,建立和发送请求,并响应服务器。
本系列的上一期文章(请参阅 参考资料 中的链接),我们介绍了 Ajax 应用程序,考察了推动 Ajax 应用程序的基本概念。其中的核心是很多您可能已经了解的技术:JavaScript、HTML 和 XHTML、一点动态 HTML 以及 DOM(文档对象模型)。本文将放大其中的一点,把目光放到具体的 Ajax 细节上。
本文中,您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法:XMLHttpRequest 对象。该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。事实上,有时您会发现,要正确地使用 XMLHttpRequest,显然不能 使用 XMLHttpRequest。这到底是怎么回事呢?
» 阅读全文
Tags: javascript, ajax, 异步请求
AJAX | 评论:0
| Trackbacks:0
| 阅读:310
Submitted by aming on 2008, May 4, 10:38 AM
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。
五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。
但是,Ajax 不仅仅 是一种时尚,它是一种构建网站的强大方法,而且不像学习一种全新的语言那样困难。
但在详细探讨 Ajax 是什么之前,先让我们花几分钟了解 Ajax 做 什么。目前,编写应用程序时有两种基本的选择:
·桌面应用程序
·Web 应用程序
两者是类似的,桌面应用程序通常以 CD 为介质(有时候可从网站下载)并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新,但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 —— 毫不奇怪,要通过 Web 浏览器访问这种应用程序。
不过,比这些应用程序的运行代码放在何处更重要的是,应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在您的计算机上运行,不用等待互联网连接),具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游,基本上不需要等待。
» 阅读全文
Tags: ajax
AJAX | 评论:0
| Trackbacks:0
| 阅读:401
Submitted by aming on 2008, April 2, 5:15 PM
xajax是一个开源的、针对PHP的Ajax代码库。它的使用不算太难,从官方的说明来看,只需要七步就可以了:
首先,在php文件头包含xajax类
require_once("xajax.inc.php");
接下来,创建xajax对象
$xajax = new xajax();
注册你的函数。这个函数用于在服务器端处理相应的客户端请求,并返回指定内容。
$xajax->registerFunction("myFunction");
编写上述函数的代码。根据你要执行的功能
» 阅读全文
Tags: ajax
AJAX | 评论:0
| Trackbacks:0
| 阅读:250
Submitted by aming on 2008, April 2, 5:12 PM
函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。javascrīpt中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法:
function func1(…){…}
var func2=function(…){…};
var func3=function func4(…){…};
var func5=new Function();
这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在Javascrīpt中为什么能这么写?它所遵循的语法是什么呢?下面将介绍这些内容。
认识函数对象(Function Object)
可以用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。在Javascrīpt解释执行时,函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。
» 阅读全文
Tags: ajax
AJAX | 评论:0
| Trackbacks:0
| 阅读:240
Submitted by aming on 2008, April 2, 5:11 PM
Ajax控件和类库现在真的太多了,不知不觉中增加了Ajax的神秘性和复杂性,看到版内很多人为此费解和伤神,决定发此贴谈谈本人对Ajax的观点,希望能让大家对Ajax有一个本质的认识。
观点一:Ajax和服务器端技术毫不相关
严格的说,与传统web开发相比,Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程,因此很多问题也因通信而起。事实上,不论何种Ajax技术,服务器端都是返回的一个纯文本流,再由客户端来处理这个文本。这段文本可以是xml格式,也可以是一个Html片段,也可以是一段JavaScript脚本,或者仅是一个字符串。服务器端仅仅是作为一个数据接口,客户端使用XMLHttpRequest对象来请求这个页面,服务器端在页面内写入结果文本,这个过程和普通的web开发没有任何区别。所不同的只是,客户端在异步获取结果后,不是直接显示在页面,而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象,Date对象,或者其他的数据类型,都是封装了这个处理过程的结果。
» 阅读全文
Tags: ajax
AJAX | 评论:0
| Trackbacks:0
| 阅读:360
Submitted by aming on 2008, April 2, 5:10 PM
一、使用Ajax的主要原因
1、通过适当的Ajax应用达到更好的用户体验;
2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
二、引用
Ajax这个概念的最早提出者Jesse James Garrett认为:Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:
·使用XHTML和CSS标准化呈现;
·使用DOM实现动态显示和交互;
·使用XML和XSLT进行数据交换与处理;
·使用XMLHttpRequest进行异步数据读取;
·最后用JavaScript绑定和处理所有数据;
» 阅读全文
Tags: ajax
AJAX | 评论:0
| Trackbacks:0
| 阅读:332