无风的港湾

AJAX bandwagon是个好去处。它带给你更快、更高效、更强动态的应用。但它也有自身的缺陷。

初一看，具备一些常识似乎就能避免这些缺陷，在一定程度上，的确如此。但从DHTML起源来看，AJAX应用程序充满了结构性差异。不论你在应用程序开发工作中掌握了多少常识，从别人犯的错误中吸取教训也是有好处的。我们称这些错误为“七宗死罪”，但它们不能代表全部的错误。

事实上，在你犯这些致命过失之前，你可能首先犯了一些较轻的错误。因此我们从这里着手。这是每个人都可能犯的错误。这些错误是多么普遍，通过Google搜索一下，你就可以发现大部分的错误。
(更多…)

标签Tags：ajax, dhtml, google, html, javascript, JavaScript&Ajax, url, 人, 应用程序, 搜索, 新手, 方法, 更新, 浏览器, 程序, 网络编程, 自身, 设计, 诫, 链接, 错误, 页面

Ajax的核心是JavaScript对象 XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

　　在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

* 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
* 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
* 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
* 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。 (更多…)

标签Tags：ajax, html, ie, javascript, JavaScript&Ajax, status, url, web, xml, xmlhttp, 代码, 兼容, 函数, 分页, 容器, 对象, 属性, 常用, 应用程序, 引入, 数据, 方法, 更新, 浏览器, 程序, 系统, 网络编程, 节点, 表格, 诫, 说明, 连接, 页面

Ajax控件和类库现在真的太多了，不知不觉中增加了Ajax的神秘性和复杂性，看到版内很多人为此费解和伤神，决定发此贴谈谈本人对Ajax的观点，希望能让大家对Ajax有一个本质的认识。

　　观点一：Ajax和服务器端技术毫不相关

　　严格的说，与传统web开发相比，Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程，因此很多问题也因通信而起。事实上，不论何种Ajax技术，服务器端都是返回的一个纯文本流，再由客户端来处理这个文本。这段文本可以是xml格式，也可以是一个Html片段，也可以是一段JavaScript脚本，或者仅是一个字符串。服务器端仅仅是作为一个数据接口，客户端使用XMLHttpRequest对象来请求这个页面，服务器端在页面内写入结果文本，这个过程和普通的web开发没有任何区别。所不同的只是，客户端在异步获取结果后，不是直接显示在页面，而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象，Date对象，或者其他的数据类型，都是封装了这个处理过程的结果。

　　观点二：DOM模型是Ajax最本质的技术

　　之所以没有把XMLHttpRequest列为最本质的技术，因为本人觉得它实在是太简单了，它只是可以让浏览器在后台请求一个页面，并将其内容交给JavaScript处理。真正的核心应该是：DOM模型，即文档对象模型。在DOM模型里，Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。而不仅仅是一个innerHTML属性这么简单，虽然这是一个很有用的属性。

　　观点三：在使用Ajax控件前理解它们的实现

　　使用Ajax控件的确可以提高效率，但如果你空中楼阁般使用控件，那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其，况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的，但如果封装了这些底层的东西，事情会变得复杂和难以理解。以Asp.net为例，它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法，相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”，而更多的事情则被封装了。同样记住一条，任何对服务器端的请求仅仅是返回纯文本，我们不一定要依赖于封装好的处理过程，而完全可以自己来实现。

　　观点四：学好JavaScript

　　在大多数人看来，JavaScript总不是那么一种正规的语言，随便copy一段就碰巧能运行，学过c之类的人，一看也能看懂，而且在浏览器中常常有脚本错误提示，所以潜意识觉得总不能付之以大任。事实上，要学好Ajax，这就完全是一种错误的看法。javascript作为一种脚本语言，其语法的确不是很严格，但并不妨碍其完成诸多复杂的任务，没有JavaScript，就没有Ajax。所以本人强烈建议，学Ajax前，一定要好好研究一番JavaScript，一般来讲，如果能顺利看懂prototype框架的代码（如：prototype-1.3.1.js），你的JavaScript水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。

　　观点五：Ajax点缀：CSS

　　用JavaScript控制CSS其实很简单，基本上每个DOM对象都有一个style对象，只要把css属性里的”-”去掉，并让随后的字母变为大写就可以作为属性使用了，例如：element.style.backgroundColor=”#f00″;在css是：选择符 {background-color:#f00}

　　一口气说这么多，希望对大家有点用处。

标签Tags：ajax, ASP, asp.net, css, div, html, javascript, JavaScript&Ajax, js, web, xml, xmlhttp, 人, 代码, 区别, 对象, 属性, 接口, 数据, 方法, 浏览器, 类, 网络编程, 节点, 获取, 错误, 页面

上个月我发现许多Web2.0网站大量运用了ajax，但是其中有些很奇怪，因为他们的速度比起前慢了，并且有时候不起作用（在移动设备上），我总结了十条用Ajax的错误（平台无关）

1、 不要通过把整个页面都放在UpdatePanel中更新整个页面。在你运行网页时需要节省时间，不要更新那些可以用javascript and DHTML (DOM)的部分。

2、 要始终记得有这么几种访问者，他们不能用JavaScript或者用的版本比较老的浏览器或者他们对JavaScript支持不好，比如说移动设备。如果这些都不支持，你的访问者能看到什么？

3、 在客户端浏览器缓存相同的请求或者在we服务器端执行缓存。最好的例子是自动完成个下拉菜单，他们的填充在任何时刻都是相同的，一个有错误写法的自动完成的写法可以减慢你的Web服务器（数据库服务器），因为那样会有比起以前用IsPostBack更多地请求。想一下不停的按F5刷新你的网页的情形。如果你有层叠的下拉菜单你就会结算更多地请求。

4、 在你运用CSS或JavaScript时，不要运行，并发的或者运行很长时间的Ajax请求，一般的浏览器只能有两个并发的http连接（我知道可以给变这个，但是默认的还是设为两个）。如果在读取图片的时候由很多Ajax请求的话，速度会变得很慢。

5、 什么时候都用异步调用的方法发送XMLHttpRequest.。如果你要用同步的方法也是没有请问题的，你的浏览器不会因为网络问题或是连接速度慢而冻结的

6、 试着让你的web应用使用一个很慢的网络连接，再尝试用快的TCP/IP连接

7、 你的web应用是作为桌面程序的替代品？你注意观察过一般浏览器在运行你的Web应用一小时，两小时或者几天时内存的使用。不是所有人都有你那样好的机器。

8、 检查在你返回XMLHttpRequest时你的http请求状态代码（status code），那会有一些常见的网络错误像是不可获得的DNS，Http Server error 500 ，你曾经检查过状态代码（status code），它可以告诉你浏览器在一个为连接的模式

9、 试着禁止XMLHttpRequest object！用IE7你能用native object代替ActiveX object，但是你也可以禁止native object。

10、检查你AJAX requests的安全性！你简单的打开了你的数据访问层吗？充分运用FormsAuthentication和PrincipalPermissions。是不是任何人都可以建立一个请求（不只是点击一个链接）？

标签Tags：ajax, code, css, dhtml, html, http请求状态, ie, javascript, JavaScript&Ajax, server, status, web, web2.0, xml, xmlhttp, 人, 代码, 图片, 数据, 数据库, 方法, 更新, 浏览器, 版本, 程序, 网站, 网络编程, 连接, 链接, 错误, 页面

做一个项目用到Ajax,开始觉得挺好，后来发现一个问题，例如删除一项，恢复之后就不能再接着删除，必须要等一段时间，后来知道是IE缓存的问题。

　　AJAX缓存页面是一个刚接触AJAX的人一定会遇到的问题，造成这个问题的关键性人物又是IE…

　　在网上找了好多资料后，总结一下

　　1:在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数

　　在javascript发送的URL后加上t=Math.random() ，当然，不是直接把t=Math.random()拷贝到URL后面,应该像这样:URL+”&”+”t=”+Math.random();

　　2:在XMLHttpRequest发送请求之前加上XMLHttpRequest.setRequestHeader(“If-Modified-Since”,”0″)

　　一般情况下,这里的XMLHttpRequest不会直接使用，你应该可以找到这样的代码

XXXXX.send(YYYYYY);

　　那么,就把它变成

XXXXX.setRequestHeader(“If-Modified-Since”,”0″);
XXXXX.send(YYYYYY);

　　第二种方法感觉挺好。

标签Tags：ajax, ie, javascript, JavaScript&Ajax, mod, url, xml, xmlhttp, 人, 代码, 函数, 方法, 网络编程, 页面

Get方式:

作用:可传送简单数据
大小:url最大长度是2083 bytes,可以用于GET传递数据的长度是2048 bytes
包含体:数据追加到url中发送,也就是http的header传送

Post方式:

作用:可传送简单复杂数据
大小:web.config里限制
包含体:数据在http请求的实体内容里传送
(更多…)

标签Tags：ajax, ASP, asp.net, code, javascript, JavaScript&Ajax, status, url, web, xml, xmlhttp, 对象, 数据, 方法, 网络编程

Ajax技术的实现主要依赖于xmlhttprequest，但我们在调用其来进行异步数据的传输时，由于xmlhttp是个短线过程（处理事件完成后就销毁）如果不对该对象进行包装处理的话，就不得不在需要调用的地方重新构建xmlhttprequest，每次调用都要写一大段的代码，实在不是个好办法。好在现在很多开源的ajax框架都提供了对xmlhttp封装的方案。这里以ajaxtags自带的prototype-1.4.0.js为母版，来看看如何将xmlhttp对象封装成一个可复用的方法。

在prototype.js中，首先定义了一个变量：Ajax
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new ActiveXObject(‘Msxml2.XMLHTTP’)},
function() {return new ActiveXObject(‘Microsoft.XMLHTTP’)},
function() {return new XMLHttpRequest()}
) || false;
},

activeRequestCount: 0
}

变量返回了一个xmlhttprequest，可以看到，如果我们调用了Ajax.getTransport()，每次都会返回一个新的xmlhttprequest对象。
(更多…)

标签Tags：ajax, code, div, html, JavaScript&Ajax, js, url, xml, xmlhttp, 中文, 人, 代码, 初始值, 区别, 对象, 属性, 数据, 方法, 网络编程, 获取, 表单, 诫, 错误, 页面

onactivate 当对象设置为活动元素时触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfocusin 当元素将要被设置为焦点之前触发。
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onselectionchange 当文档的选中状态改变时触发。
onstop 当用户单击停止按钮或离开 Web 页面时触发。

标签Tags：ajax, JavaScript&Ajax, js, menu, seo, web, 大全, 容器, 对象, 属性, 数据, 浏览器, 系统, 网络编程, 页面, 鼠标

下面是我对一部分缺陷的看法：

为Ajax而Ajax(Using Ajax for the sake of Ajax.)

很同意这点，当一个技术本身的生存意义由于它自身的亮点而被抹杀，不知道是这个技术的幸运还是不幸。

干掉了back按钮(Breaking the back button)

back按钮是一个标准的web站点UI的重要功能。然后，后退按钮没法和js很好的合作……
gmail似乎作的很好？不过没去仔细看过gmail如何实现后退和js相容的，被这个mistake一提醒，也许这也是ue的一个切口哦。

点击的时候没有提供一个可视化的提示(Not giving immediate visual cues for clicking widgets)

……也许是我没看懂，觉得写这段的人自相矛盾。。他说没提供可视化提示，不过是拿gmail右上角的红色提示作为例子。 (更多…)

标签Tags：ajax, code, google, html, ie, javascript, js, PHP, web, 人, 代码, 兼容, 可用性, 应用程序, 收藏, 数据, 方法, 浏览器, 版本, 程序, 系统, 网络编程, 自身, 解决, 诫, 链接, 错误, 页面

一、 引言

　　毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将详细讨论如何创建一组对象(在其它语言中经常被当作一个包)，如何把这些对象串行化为JSON以发送到服务器端，以及如何把服务器端JSON反串行化为客户端JavaScript对象。

　　提示：你可以在Douglas Crockford的网站上找到本文中使用的JSON分析器。

　　在继续阅读前，本文假定你已经掌握了JavaScript技术并且了解如何创建一个基本的AJAX引擎，并经由AJAX技术向服务器端发出请求和从服务器端接收响应。为了更好地理解本文中示例，你需要下载本文相应的源码文件。 (更多…)

标签Tags：ajax, div, html, javascript, js, mod, PHP, url, web, xml, 人, 代码, 分离, 对象, 属性, 应用程序, 数据, 数据库, 方法, 浏览器, 程序, 类, 网站, 网络编程, 自身, 诫, 链接, 面向对象