XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然很有必要理解这个对象的详细工作机制。 一、 引言 异步JavaScript与XML(AJAX)是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于，它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合，AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。换句话说，AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序。 Google的Gmail和Outlook Express就是两个使用AJAX技术的我们所熟悉的例子。而且，AJAX可以用于任何客户端脚本语言中，这包括JavaScript，Jscript和VBScript。 AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个＜form＞元素。AJAX中的”A”代表了”异步”，这意味着XMLHttpRequest对象的send()方法可以立即返回，从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的，但是，你可以选择发送同步请求，这将会暂停其它Web页面的处理，直到该页面接收到服务器的响应为止。 微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象，但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今，在认识到实现这一类型的价值及安全性特征之后，微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是，尽管其实现(因而也影响到调用方式)细节不同，但是，所有的浏览器实现都具有类似的功能，并且实质上是相同方法。目前，W3C组织正在努力进行XMLHttpRequest对象的标准化，并且已经发行了有关该W3C规范的一个草案。 本文将对XMLHttpRequest对象API进行详细讨论，并将解释其所有的属性和方法。 二、 XMLHttpRequest对象的属性和事件 XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面，我们将对此展开详细的讨论。 readyState属性 当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。 表格1.XMLHttpRequest对象的ReadyState属性值列表。 ReadyState取值 描述 0  描述一种”未初始化”状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。 1  描述一种”发送”状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 2  描述一种”发送”状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 3  描述一种”正在接收”状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 4  描述一种”已加载”状态；此时，响应已经被完全接收。 onreadystatechange事件 无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。 responseText属性 这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。 responseXML属性 此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。 其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。 status属性 这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。 statusText属性 这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。 三、 XMLHttpRequest对象的方法 XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求，下列将逐个展开详细讨论。 abort()方法 你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。 open()方法 你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，Delete或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。 [...]

这两天又看到了一个很不错的国外的资料，show给读者朋友看一看，也许会对您有所帮助和启发。 下面这段视频是在Youtube上的，内容是一个12岁的小朋友在Google TechTalk上的一次讲座，向听众介绍jQeury，非常有趣，看了这段视频，我想对学习Javascript、编程序有畏惧心理的读者朋友，都可以有信心学好它了。     关于Google TechTalk： Google TechTalk 是由Google邀请和赞助的一系列演讲，每次都是在Google总部加利福尼亚山景城举行。这些演讲者将会涉及不同的领域，包括技术或更为抽象的领域，已经建立起来或者具有前瞻性的理论。 关于这次讲演者（6年级的小学生）： Dmitri Gaskin 是一位 jQuery 和 Drupal （世界最著名的CMS系统之一）方面的专家，兴趣包括Drupal, PHP, JavaScript 和 jQuery。他对jQuery 和 Drupal 两个开源项目都有诸多贡献。在 Drupal 项目中，他在Drupal负责安全的团队中维护着几个模块，以及核心Patch。Dmitri已经多次被邀请讲授关于 Drupal 和 jQuery, 包括 Logitech, Drupalcon 和 广播中的节目。他在不写程序的时候，喜欢演奏现代音乐和作曲。 ====================================== 看了这个小朋友的事迹，加油吧，朋友们！ 另外，听了这个小朋友的讲解，我们才发现，我们总是把jQuery读成“JQ瑞”，其实应该读为“J盔瑞”。不知是不是还有像我们一样，读错了query这个单词的朋友。不过这个词真不好读。

遵循Web标准的思想，网页要表现出一种亲和力。那么，针对残障用户来说，其“阅读”器可不能读取图像上传递的信息的。 所以我们会采用一种Using Background-Image to Replace Text的方法，也就是将图像以背景图像的方式“插入”网页显示，同时为了让残障人士能了解该部分信息，显示该图像的区域用文本加以说明；但又为了让正常人不为既看到背景图像又看到图像上的文本而混淆，所以我们又将这些文本隐藏。 或许我们也会说我们可以给图像加alt、加title，这样正常用户能看得见，残障用户也“阅读”到。不过，我们再想想，Web标准还推荐使用合理的XHTML文档结构，对于插入图像这样一个“实体”，插入到网页是什么图像就是什么图像了，当我们需要替换图像时，我们修改HTML文件，若有很多页面呢（我批量改_-!）。所以这部分图像的插入就“亲和力”和“扩展性”而言，都建议使用“背景图像”+“隐藏文本”的方法。当然对于图像热区链接我们另做讨论。 说的都不大理解，还是举例子。 有这样的一张图像，我们要插入到网页显示，那么正常情况下我是使用“”标签的 HTML代码 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] function runEx(cod1) { cod=document.getElementById(cod1); var code=cod.value; if (code!=”"){ var newwin=window.open(”,”,”); newwin.opener = null ; newwin.document.write(code); newwin.document.close(); }}function doCopy(ID) { if (document.all){ textRange = document.getElementById(ID).createTextRange(); textRange.execCommand(“Copy”); } else{ alert(“此功能只能在IE上有效”); }} 其中，因为浏览器可能显示不了图像中文本的字体样式，所以我们做成图像显示在网页中。在当我们需要为这种图像中的文本新做另外一种字体的图像，那么现在来解决新图像的显示，我们就必须要修改HTML文档。而一旦我采用了CSS定义背景图像之后，这些问题都迎刃而解。 <style type="text/css"> h1 { height:35px; background-image:url("attachments/month_0809/j2008915193617.gif"); background-repeat:no-repeat; } h1 span {display:none;} </style> [...]

开发Web应用程序的技术已经变得更成熟、更复杂了。现在，构建一个Web应用程序不仅仅需要简单的HTML技术了。数据库访问、脚本语言和管理都是一个Web程序员需要具备的技术。让我们来看看要成为一个市场上受欢迎的Web开发人员都需要些什么技能吧。 自从CERN（欧洲粒子物理研究所），日内瓦附近的高能物理研究中心，在1991年发布了Web以来，Web技术已经从静态的内容和Common Gateway Interface（CGI）发展成servlet技术和JavaServer Pages了。然而，在这个竞争更激烈的社会中，一个Web程序员需要更多的知识。例如，如果在面试中，你提到你熟悉XML并在JNDI方面有些经验（这两种技术初看似乎同Web编程没有很紧密的关系），那么你就会给你未来的老板留下更深的印象。设想你已经了解了Java编程语言和面向对象的编程，下面还有两组技术是一个Web开发人员日常工作中所需要的。第一组包括每个Web程序员必须具备的技术。第二组包含要想成为一个高级程序员所应该掌握的技术。 基本技能 如果想称自己是个Web开发人员，下面就是必须具备的技术。 HTML（HyperText Markup Language） HTML几乎是显示在浏览器上所有内容的语言。难怪HTML就好像是一个Web程序员的生存本能一样。如果你仍需要在你的HTML中查找 或，那么你真的需要提高你的HTML技术了。HTML的当前版本是4.01，你可以从http://www.w3.org/TR/1999/REC-html401-19991224/了解更多关于它的内容。 Servlets和JSP Java servlet技术是开发Java Web应用程序的主要技术。它是由Sun Microsystems在1996年开发的，当前的版本是2.3，但人们正在为版本2.4做准备。 JSP是servlet技术的扩展，现在的版本是1.2（2.0版将很快定下来）。有人认为JSP是servlets的替代，但实际并不是这样的。Servlets和JSP是一起用于复杂的Web应用程序的。 用Java进行Web编程的一个好的开端就是学习servlet技术。即使你打算在你的Web应用程序中只运用JSP页面，你仍需要学习servlet技术。在更复杂的Web应用程序中，JSP页面只用于显示，而JavaBeans和自定义标签库用来嵌入商业逻辑。即：你也必须精通JavaBeans和自定义标签库。 JavaScript JavaScript是运行于所有的主要的浏览器中的脚本语言。你用JavaScript来进行客户端的编程。客户端编程中最重要的工作就是确认用户输入。运用客户端输入验证的好处是减少服务器的工作量并提高响应时间。另外，JavaScript可以用于重新定向（redirection）、cookie处理、控制applets、创建导航树、打开一个浏览器的一个新的实例、等等。 SQL（Strutured Query Language）和JDBC（Java Database Connectivity） 如今，大多数Web应用程序都包括访问关系数据库中的数据。作为一个Web程序员，你需要知道如何存储、得到并操作数据库中的数据。有时侯，你也需要设计数据库，构建数据库中的表和其它结构。SQL就是用来操作数据库中数据的语言。你通常需要编写SQL语句（常常是动态的），把它们传递到数据库服务器，并得到返回的数据（如果有的话）。 运用Java语言，你需要用JDBC来帮助Web应用程序和数据库服务器进行通讯。JDBC有两部分：JDBC Core API（Application Programming Interface)和JDBC Optional Package API。第一组用来执行基本的数据操作，如创建一个连接或读取、更新并删除一个表中的记录。第二组提供更高级的数据库连接功能，如连接池、事务和RowSet。JDBC的当前版本是3.0，API包含在J2SE v. 1.4中。 Web Container管理和应用程序部署 你的servlets和JSP页面在一个叫做servlet/JSP container或Web container的引擎中运行。你至少需要知道如何为测试以及生产运行部署你的Web资源。例如，如果你运用Tomcat，你需要了解的一件事就是如何映射配置文件（server.xml）中的应用程序，使Tomcat知道如何调用你的JSP页面。另外，你需要知道在哪里保存你的库以及如何创建应用程序部署描述符。 XML（eXtensible Markup Language） XML是计算机领域中一个成功的后起之秀。由World Wide Web Consortium在1996年开发，XML现在已经是用于数据交换和可扩展数据结构的一个广泛的、公认的标准了。XML在Java Web开发中扮演着一个重要的角色。例如，每个应用程序的部署描述符都是XML格式的。而且，如果你在开发Web servies，你就会用到SOAP（Simple Object Access Protocol），它主要是基于HTTP和XML的。 另外，在Web应用程序中，XML也可能用于存储分等级的数据。 [...]

(一)常用的CSS命名规则 　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right center 　　登录条：loginbar 　　标志：logo 　　广告：banner 　　页面主体：main 　　热点：hot 　　新闻：news 　　下载：download 　　子导航：subnav 　　菜单：menu 　 子菜单：submenu 　　搜索：search 　　友情链接：friendlink 　　页脚：footer 　　版权：copyright 　　滚动：scroll 　　内容：content 　　标签页：tab 　　文章列表：list 　　提示信息：msg 　　小技巧：tips 　　栏目标题：title 　　加入：joinus 　　指南：guild 　　服务：service 　　注册：regsiter 　　状态：status 　　投票：vote 　　合作伙伴：partner (二)注释的写法: 　　/* Footer */ 　　内容区 　　/* End Footer */ (三)id的命名: 　　(1)页面结构 　　容器: container 　　页头：header 　　内容：content/container [...]

万维网联盟(W3C)发布了HTML 5规格说明书的草稿 ,这是自HTML 4在十多年前发布以来的第一个主要的修订版.在这期间,随着开发者逐渐将自己的应用程序移植到Web之上,它已经从一个主要的静态媒体发展为互动的应用程 序,具有丰富的媒体内容.HTML 5的目的就是要反映出这样的变化. 新增的特性充分地考虑了应用程序开发人员,因此,HTML 5引入了大量的新的Javascript API.可以利用这些内容与对应的HTML元素相关联,它们包括: 1/二维绘图API,可以用在一个新的画布(Canvas)元素上以便呈现图像、游戏图形或者其他运行中的可视图形. 2/一个允许web应用程序将自身注册为某个协议或MIME类型的API. 3/一个引入新的缓存机制以支持脱机web应用程序的API. 4/一个能够播放视频和音频的API,可以使用新的video和audio元素. 5/一个历史纪录API,它可以公开正在浏览的历史纪录,允许页面在加上它之后更好的在AJAX应用程序中实现对后退按钮的支持. 6/跨文档的消息传递,它提供了一种方式,使得文档可以互相通信而不用考虑它们的源域,7/在某种程度上,这样的设计是为了防止跨站点的脚本攻击. 8/一个支持拖放操作的API,用它可以与draggable特性相关联. 9/一个支持编辑操作的API,用它可以与一个新的全局contenteditable特性相关联. 10/一个新的网络API,它支持web应用程序在本地网络上互相通信,并在它们的源服务器上维持双向的通信. 使用JavaScript API的键/值对实现客户端的持久化存储,同时支持嵌入的SQL数据库. 服务器发送的事件,通过它可以与新的事件源(event-source)元素关联,新的事件源元素有利于与远程数据源的持久性连接,而且极大地消除了在Web应用程序中对轮询的需求. 同时,HTML 5还引入了许多新的表示元素以支持普通的页面组件,例如headers(页眉),footers(页脚),figures(插图),dialog(对话,用于标记会话)以及navigation(导航).此外,还有一个新的datagrid元素支持交互式的表与树,一个为组合框提供的datalist元素,以及一个progress特性,它能够展现一个运行时间长的任务的完成情况.同时,还增加了支持RSS种子的页面标签. 针对表单,input元素的type类型包含了对日期、时间、email和URLs的全新支持,这样一来,浏览器就能够提供用户界面元素,例如一个日历的日期选择器或者与用户地址薄的集成,同时还能够将数据按照一个定义好的格式提交给服务器. HTML 5还放弃了对一些众所周知的特性的支持.其中最引人注目的就是放弃了对框架(frames)的支持,因为长期以来框架均被认为破坏了网页的可访问性与可用性.值得注意的是,即使浏览器完全支持HTML 5标准,它仍然会继续支持这些被放弃的特性,因为对HTML旧版本的支持会持续多年. HTML 5在W3C的HTML工作组的指导下进行开发,该工作组成立于2007年3月.工作组的运营是完全公开的,在近500名参与者中包括了来自Apple、 Google、IBM、Microsoft、Mozilla Foundation、Nokia与Opera的成员. “毫无疑问,HTML是一个非常重要的标准”,第一个HTML版本的作者,W3C理事Tim Berners-Lee说道.“我很高兴地看到开发者社区,包括浏览器提供商一起致力于创建Web的最佳发展轨迹.要整合这么多人的想法是一个艰巨的任务,我们面临的挑战就是要找到创新与守成、理想与务实之间的平衡.” HTML 5将逐渐替代HTML 4,但是HTML 5规格说明书的最终确定依然任重而道远.目前的计划是在2009年期间初步将其作为候选以推荐使用,然后在2010年9月作为最终的正式版本而被推行.

/* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide – http://mozilla.org/contribute/writing/markup) */ /* Suggested order: //显示属性 * display * list-style * position * float * clear //自身属性 * width * height * margin * padding * border * background //文本属性 * color * font * text-decoration * text-align * [...]

要打造一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 通过许多实际项目，个人认为一个完备的前端产品开发团队，必须拥有如下的人才配备： 团队全体成员达到所有技能中的a级标准 团队全体成员必须掌握两项技能中的b级标准，并保证所有的b级标准在该团队中有50%以上成员能达到 团队全体成员必须掌握一项技能中的c级标准，并保证所有的c级标准在该团队中有25%以上成员能达到 具体技能描述： UserInterface PhotoShop/Fireworks Design a – 配合美工将草图形成具体的符合WebPage的设计 b – 有快速制作分层高品质PSD、PNG的能力 c – 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码 Flash Design a – 基本动画效果 b – 复杂的交互体系设计，了解第三方swf辅助设计软件 c – 复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等） Browser-side (Web Application) XHTML/CSS a – 基本的layout实现 b – 严格跨平台的layout实现以 c – 优雅的HTML code，尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为”一切都已经准备就绪了”，而不是”捉襟见肘”。 JavaScript/Ajax/DOM a – 基本的DOM操作，了解AJAX，可以实现数据通信 b – 基本的DOM操作，能写高效率的OOP代码，以降低维护成本 c – 基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码 Flash Developement [...]