AJAX概况

Jaunt — Wed, 10 Oct 2007 10:04:00 GMT

一、��用Ajax的主要原�?

1、通过适当的Ajax应用辑ֈ�更好的用户体验；
2、把以前的一些服务器负担的工作�{嫁到客户端，利于客户端闲�|�的处理能力来处理，减轻服务器和带宽的负担，从而达到节�U�ISP的空间及带宽�U�用成本的目的�?/strong>

二、引�?/div>
Ajax�q�个概念的最早提��?a target="_blank">Jesse James Garrett认�ؓ�Q?/strong>
Ajax是Asynchronous JavaScript and XML的羃写�?br /> Ajax�q�不是一门新的语�a�或技�?它实际上是几��Ҏ��术按一定的方式�l�合在一在同��q��协作中发挥各自的作用,它包�?br /> 使用XHTML和CSS标准化呈�?
使用DOM实现动态显�C�和交互;
使用XML和XSLT�q�行数据交换与处�?
使用XMLHttpRequest�q�行异步数据��d��;
最后用JavaScript�l�定和处理所有数�?
Ajax的工作原理相当于在用户和服务器之间加了—个中间�?使用��h��作与服务器响应异步化。�ƈ不是所有的用户��h��都提交给服务�?像—些数据验证和数据处理等都交�l�Ajax引擎自己来做,只有��定需要从服务器读取新数据时再由Ajax引擎代�ؓ向服务器提交��h��?br />

�?�Q?

�?�Q?

三、概�q?/div>
虽然Garrent列出�?条Ajax的构成技术，但个��为，所谓的Ajax其核心只有JavaScript、XMLHTTPRequest�? DOM�Q�如果所用数据格式�ؓXML的话�Q�还可以再加上XML�q�一��?Ajax从服务器端返回的数据可以是XML格式�Q�也可以是文本等其他格式)�?br /> 在旧的交互方式中,��q��戯��发一个HTTP��h��到服务器,服务器对其进行处理后再返回一个新的HTHL��到客户�?每当服务器处理客��L��提交的请求时, 客户都只能空闲等�?�q�且哪怕只是一�ơ很��的交互、只需从服务器端得到很��单的一个数�?都要�q�回一个完整的HTML��?而用��h��ơ都要浪�Ҏ��间和带宽�? 重新��d��整个��面�?br /> 而��用Ajax后用户从感觉上几乎所有的操作都会很快响应没有��面重蝲�Q�白屏）的等待�?br /> 1、XMLHTTPRequest
Ajax的一个最大的特点是无需��h��面便可向服务器传输或读写数�?又称无刷新更新页�?,�q�一特点主要得益于XMLHTTP�l��g XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器�q�行数据层面的交�?而不用每�ơ都��h��界面也不用每�ơ将数据处理的工作提交给服务器来�?�q�样卛_��M��服务器的负担又加快了响应速度、羃短了用户�{�候时间�?br /> 最早应用XMLHTTP的是微��Y,IE�Q�IE5以上�Q�通过允许开发�h员在Web��面内部使用XMLHTTP ActiveX�l��g扩展自��n的功�?开发�h员可以不用从当前的Web��面��D��而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因�ؓ它帮助减��了无状态连接的痛苦,它还可以排除下蝲冗余HTML的需�?从而提高进�E�的速度。Mozilla�Q�Mozilla1.0以上及NetScape7�? 上）做出的回应是创徏它自��q��l�承XML代理�c�：XMLHttpRequest�c�R��Konqueror (和Safari v1.2,同样也是��Z��KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持 XMLHttpRequest对象。对于大多数情况�Q�XMLHttpRequest对象和XMLHTTP�l��g很相�?�Ҏ��和属性也�c�M��,只是有一��部分属性不支持�?br /> XMLHttpRequest的应用：

XMLHttpRequest对象在JS中的应用
var xmlhttp = new XMLHttpRequest();
微��Y的XMLHTTP�l��g在JS中的应用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 对象�Ҏ��

/**
* Cross-browser XMLHttpRequest instantiation.
*/

if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
// Attempt to create it "the Mozilla way"
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// Guess not - now the IE way
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};

XMLHttpRequest 对象�Ҏ��

�Ҏ�� 描述

abort() 停止当前��h��

getAllResponseHeaders() 作�ؓ字符串返问完整的headers

getResponseHeader("headerLabel") 作�ؓ字符串返问单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 讄��未决的请求的目标 URL, �Ҏ��, 和其他参�?/td>

send(content) 发送请�?/td>

setRequestHeader("label", "value") 讄��header�q�和��h��一起发�?/td>

XMLHttpRequest 对象属�?

属�?/strong> 描述

onreadystatechange 状态改变的事�g触发�?/td>

readyState 对象状�?integer):
0 = 未初始化
1 = ��d��?br /> 2 = 已读�?br /> 3 = 交互�?br /> 4 = 完成

responseText 服务器进�E�返回数据的文本版本

responseXML 服务器进�E�返回数据的兼容DOM的XML文档对象

status 服务器返回的状态码, 如：404 = "文�g末找�? �?00 ="成功"

statusText 服务器返回的状态文本信�?/td>

2、JavaScript
JavaScript是一在浏览器中大量��用的�~�程语言�Q�，他以前一直被贬低��Z��门糟�p�的语言�Q�他��实在��用上比较枯燥�Q�，以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的�~�程语言�Q�有着自已的标准�ƈ在各�U�浏览器中被�q�泛支持�?br /> 3、DOM
Document Object Model�?br /> DOM是给 HTML �?XML 文�g使用的一�l?API。它提供了文件的�l�构表述�Q�让你可以改变其中的內容及可见物。其本质是徏立网��与 Script 或程序语�a�沟通的桥梁�?br /> 所有WEB开发�h员可操作及徏立文件的属性、方法及事�g都以对象来展玎ͼ�例如�Q�document ��׃��?#8220;文�g本��n“�q�个对像�Q�table 对象则代�?HTML 的表格对象等�{�）。这些对象可以由当今大多数的��览器以 Script 来取用�?br /> 一个用HTML或XHTML构徏的网��也可以看作是一�l�结构化的数据，�q�些数据被封在DOM�Q�Document Object Model�Q�中�Q�DOM提供了网��中各个对象的读写的支持�?br /> 4、XML
可扩展的标记语言�Q�Extensible Markup Language�Q�具有一�U�开攄��、可扩展的、可自描�q�的语言�l�构�Q�它已经成�ؓ�|�上数据和文档传输的标准。它是用来描�q�数据结构的一�U�语�a��Q�就正如他的�? 字一栗��他使对某些�l�构化数据的定义更加�Ҏ��Q��ƈ且可以通过他和其他应用�E�序交换数据�?br /> 5、综�?/strong>
Jesse James Garrett提到的Ajax引擎�Q�实际上是一个比较复杂的JavaScript应用�E�序�Q�用来处理用戯��求，��d��服务器和更改DOM内容�?br /> JavaScript的Ajax引擎��d��信息�Q��ƈ且互动地重写DOM�Q�这使网��能无缝化重构，也就是在��面已经下蝲完毕后改变页面内容，�q�是我们一直在通过JavaScript和DOM在广泛��用的�Ҏ��Q�但要�ɾ|�页真正动态�v来，不仅要内部的互动�Q�还需要从外部获取数据�Q�在以前�Q�我们是让用��h��输入数据 �q��过DOM来改变网��内容的�Q�但现在�Q�XMLHTTPRequest�Q�可以让我们在不重蝲��面的情况下��d��服务器上的数据，使用��L��输入辑ֈ�最��?br /> ��Z��XML的网�l�通讯也�ƈ不是��C��物，实际上FLASH和JAVA Applet都有不错的表玎ͼ�现在�q�种富交互在�|�页上也可用了，��Z��标准化的�q�被�q�泛支持和技术，�q�且不需要插件或下蝲��程序�?br /> Ajax是传�l�WEB应用�E�序的一个�{变。以前是服务器每�ơ生成HTML��面�q�返回给客户端（��览器）。在大多数网站中�Q�很多页面中臛_��90%都是一�? 的，比如�Q�结构、格式、页头、页��、广告等�Q�所不同的只是一��部分的内容�Q�但每次服务器都会生成所有的��面再返回给客户端，�q�无形之中是一�U�浪费，不管�? 对于用户的时间、带宽、CPU耗用�Q�还是对于ISP的高��L��用的带宽和空间来说。如果按一��|��，只能几K或是几十K可能�q�不��L��Q�但像SINA每天要生成几百万个页面的大ISP来说�Q�可以说是损失巨大的。�?a href="javascript:void(0);" class="lore_glossary_term_link" onmouseover="return overlib('Ajax�Q�是一�U�无��h��技�?异步交互�Q�给用户的感觉是响应速度快、连�l�不断、体验丰富WEB应用。Ajax是Asynchronous JavaScript and XML的羃写�?, CAPTION, 'AJAX', OFFSETX, 16, OFFSETY, 16, BGCLASS, 'lore_glossary_term_popup', FGCLASS, 'lore_glossary_term_popup_definition', TEXTFONTCLASS, 'lore_glossary_term_popup_definition', CAPTIONFONTCLASS, 'lore_glossary_term_popup_caption');" onmouseout="nd();">AJAX�? 以所为客��L��和服务器的中间层�Q�来处理客户端的��h��Q��ƈ�Ҏ��需要向服务器端发送请求，用什么就取什么、用多少��取多少�Q�就不会有数据的冗余和浪费，减少�? 数据下蝲总量�Q�而且更新��面时不用重载全部内容，只更新需要更新的那部分即可，相对于纯后台处理�q��载的方式�~�短了用��L��待时��_��也把对资源的��费降到最低，��Z��标准化的�q�被�q�泛支持和技术，�q�且不需要插件或下蝲��程序，所以Ajax对于用户和ISP来说是双盈的�?br /> Ajax使WEB中的界面�? 应用分离�Q�也可以说是数据与呈现分��）�Q�而在以前两者是没有清晰的界限的�Q�数据与呈现分离的分��，有利于分工合作、减��非技术�h员对��面的修攚w��成�? WEB应用�E�序错误、提高效率、也更加适用于现在的发布�pȝ��。也可以把以前的一些服务器负担的工作�{嫁到客户端，利于客户端闲�|�的处理能力来处理�?br />

四、应�?/div>
　　Ajax理念的出玎ͼ�揭开了无��h��更新��面时代的序�q�，�q�有代替传统web开发中采用form(表单)递交方式更新web��面的趋势，可以��是一个里�E�碑。但Ajax都不是适用于所有地方的�Q�它的适用范围是由它的�Ҏ��所军_��的�?br /> 举个应用的例子，是关于��联菜单方面的Ajax应用�?br /> 我们以前的对�U�联菜单的处理是�q�样的：
��Z��避免每次对菜单的操作引�v的重载页面，不采用每�ơ调用后台的方式�Q�而是一�ơ性将�U�联菜单的所有数据全部读取出来�ƈ写入数组�Q�然后根据用��L��操作�? JavaScript来控制它的子集项目的呈现�Q�这栯��然解决了操作响应速度、不重蝲��面以及避免向服务器频繁发送请求的问题�Q�但是如果用户不对菜单进�? 操作或只对菜单中的一部分�q�行操作的话�Q�那��d��的数据中的一部分��׃��成�ؓ冗余数据而浪费用��L��资源�Q�特别是在菜单结构复杂、数据量大的情况下（比如菜单�? 很多�U�、每一�U�菜又有上百个项目）�Q�这�U�弊端就更�ؓ�H�出�?br /> 如果在此案中应用Ajax后，�l�果��׃��有所改观�Q?br /> 在初始化��面时我们只 ��d��它的�W�一�U�的所有数据�ƈ昄��Q�在用户操作一�U�菜单其中一��Ҏ��Q�会通过Ajax向后台请求当前一�U�项目所属的二��子菜单的所有数据，如果再��l�请求已�l? 呈现的二�U�菜单中的一��Ҏ��Q�再向后面请求所操作二��菜单��对应的所有三�U�菜单的所有数据，以此�c�L��……�q�样�Q�用什么就取什么、用多少��取多少�Q�就不会有数据的冗余和浪费，减少了数据下载总量�Q�而且更新��面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理�ƈ重蝲的方式羃短了用户�{�待旉��Q�也把对资源的浪贚w��到最低�?br /> 此外�Q�Ajax�׃��可以调用外部数据�Q�也可以实现数据聚合的功能（当然要有相应授权�Q�，比如微��Y刚刚�?�?5日发布的在线RSS阅读器BETA版；�q�可以利于一些开攄��数据�Q�开发自已的一些应用程序，比如用Amazon的数据作的一些新颖的图书搜烦应用�?br /> ��M��Q�Ajax适用于交互较多，频繁��L��据，数据分类良好的WEB应用�?br />

五、Ajax的优�?/div>
　　1、减��L��务器的负担。因为Ajax的根本理忉|��“按需取数�?#8221;�Q�所以最大可能在减少了冗余请求和响媄�Ҏ��务器造成的负担；
2、无��h��更新��面�Q�减��用户实际和心理�{�待旉��Q?/strong>
首先�Q?#8220;按需取数�?#8221;的模式减��了数据的实际读取量�Q�打个很形象的比方，如果说重载的方式是从一个终点回到原点再到另一个终点的话，那么Ajax��是以一个终点�ؓ基点到达另一个终点；

�?�Q?

�?�Q?
其次�Q�即使要��d��比较大的数据�Q�也不用像RELOAD一样出现白屏的情况�Q�由于Ajax是用XMLHTTP发送请求得到服务端应答数据�Q�在不重新蝲入整个页面的情况下用Javascript操作DOM最�l�更新页面的�Q�所以在��d��数据的过�E�中�Q�用��h��面对的也不是白屏�Q�而是原来的页面状态（或者可以加一�? LOADING的提�C�框让用户了解数据读取的状态）�Q�只有当接收到全部数据后才更新相应部分的内容�Q�而这�U�更��C��是瞬间的�Q�用户几乎感觉不到。��M��用户�? 很敏感的�Q�他们能感觉��C��对他们的体脓�Q�虽然不太可能立竿见��q��效果�Q�但会在用户的心中一点一滴的�U�篏他们对网站的依赖�?br /> 3、更好的用户体验�Q?/strong>
4、也可以把以前的一些服务器负担的工作�{嫁到客户端，利于客户端闲�|�的处理能力来处理，减轻服务器和带宽的负担，节约�I�间和带宽租用成本；
5、Ajax�׃��可以调用外部数据�Q?/strong>
6、基于标准化的�ƈ被广泛支持和技术，�q�且不需要插件或下蝲��程序；
7、Ajax使WEB中的界面与应用分��（也可以说是数据与呈现分离�Q�；
8、对于用户和ISP来说是双盈的�?/strong>

六、Ajax的问�?/div>
　　1、一些手持设备（如手机、PDA�{�）现在�q�不能很好的支持Ajax�Q?br /> 2、用JavaScript作的Ajax引擎�Q�JavaScript的兼�Ҏ��和DeBug都是让�h头痛的事�Q?br /> 3、Ajax的无��h��重蝲�Q�由于页面的变化没有��h��重蝲那么明显�Q�所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已�l�更新过的；现有的解��x��Q�在相关位置提示、数据更新的区域设计得比较明显、数据更新后�l�用��h��C�等�Q?br /> 4、对��媒体的支持没有FLASH、Java Applet好；

七、结束语

　　更好的Ajax应用�Q�需要更多的客户端的开发，和对当前的WEB应用理念的思考，而且良好的用户体验，来源于�ؓ处处用户考虑的理念，而不单纯是某�U�技术�?br />
url:http://100000.myabc.cn/home/Blog/view/148.htm

Jaunt 2007-10-10 18:04 发表评论

prototype 源码中文说明�?prototype.js(�?

Jaunt — Wed, 10 Oct 2007 09:18:00 GMT

/**
* 定义一个全局对象, 属�?Version 在发布的时候会替换为当前版本号
*/
var Prototype = {
Version: '@@VERSION@@'
}

/**
* 创徏一�U�类型，注意其属�?create 是一个方法，�q�回一个构造函数�?
* 一般��用如�?
* var X = Class.create(); �q�回一个类型，�c�M��?java 的一个Class实例�?
* 要��?X �c�d��Q�需�l�箋�?new X()来获取一个实例，如同 java �?Class.newInstance()�Ҏ��?
*
* �q�回的构造函��C��执行名�ؓ initialize 的方法， initialize �?Ruby 对象的构造器�Ҏ��名字�?
* 此时initialize�Ҏ��q�没有定义，其后的代码中创徏新类型时会徏立相应的同名�Ҏ��?
*
* 如果一定要从java上去理解。你可以理解为用Class.create()创徏一个��承java.lang.Class�cȝ��c�R��当然java不允许这样做�Q�因为Class�c�L��final�?
*
*/
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

/**
* 创徏一个对象，从变量名来思考，本意也许是定义一个抽象类�Q�以后创建新对象�?extend 它�?
* 但从其后代码的应用来看， Abstract 更多是�ؓ了保持命名空间清晰的考虑�?
* 也就是说�Q�我们可以给 Abstract �q�个对象实例��d��新的对象定义�?
*
* 从java�ȝ��解，��是动态给一个对象创建内部类�?
*/
var Abstract = new Object();

/**
* 获取参数对象的所有属性和�Ҏ��Q�有点象多重�l�承。但是这�U��承是动态获得的�?
* 如：
* var a = new ObjectA(), b = new ObjectB();
* var c = a.extend(b);
* 此时 c 对象同时拥有 a �?b 对象的属性和�Ҏ��。但是与多重�l�承不同的是�Q�c instanceof ObjectB ��返回false�?
*/
Object.prototype.extend = function(object) {
for (property in object) {
this[property] = object[property];
}
return this;
}

/**
* �q�个�Ҏ��很有��，它封装一个javascript函数对象�Q�返回一个新函数对象�Q�新函数对象的主体和原对象相同，但是bind()�Ҏ��参数��被用作当前对象的对象�?
* 也就是说新函��C��?this 引用被改变�ؓ参数提供的对象�?
* 比如�Q?
*
*
* .................
*
* 那么�Q�调用aaa.showValue ��返�?aaa", 但调用aaa.showValue2 ��返�?bbb"�?
*
* apply 是ie5.5后才出现的新�Ҏ��(Netscape好像很早��支持了)�?
* 该方法更多的资料参考MSDN http://msdn.microsoft.com/library/en-us/script56/html/js56jsmthApply.asp
* �q�有一�?call �Ҏ��Q�应用�v来和 apply �c�M��。可以一��L��I�下�?
*/
Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}

/**
* 和bind一��P��不过�q�个�Ҏ��一般用做html控�g对象的事件处理。所以要传递event对象
* 注意�q�时候，用到�?Function.call。它�?Function.apply 的不同好像仅仅是对参数�Ş式的定义�?
* 如同 java 两个�q�蝲的方法�?
*/
Function.prototype.bindAsEventListener = function(object) {
var method = this;
return function(event) {
method.call(object, event || window.event);
}
}

/**
* ��整数�Ş式RGB颜色��D�{换�ؓHEX形式
*/
Number.prototype.toColorPart = function() {
var digits = this.toString(16);
if (this < 16) return '0' + digits;
return digits;
}

/**
* 典型 Ruby 风格的函敎ͼ��参��C��的方法逐个调用�Q�返回第一个成功执行的�Ҏ��的返回�?
*/
var Try = {
these: function() {
var returnValue;

for (var i = 0; i < arguments.length; i++) {
var lambda = arguments[i];
try {
returnValue = lambda();
break;
} catch (e) {}
}

return returnValue;
}
}

/*--------------------------------------------------------------------------*/

/**
* 一个设计精巧的定时执行�?
* 首先�?Class.create() 创徏一�?PeriodicalExecuter �c�d��Q?
* 然后用对象直接量的语法�Ş式设�|�原型�?
*
* 需要特别说明的�?rgisterCallback �Ҏ��Q�它调用上面定义的函数原型方法bind, �q�传递自�׃ؓ参数�?
* 之所以这样做�Q�是因�ؓ setTimeout 默认��M�� window 对象为当前对象，也就是说�Q�如�?registerCallback �Ҏ��定义如下的话�Q?
* registerCallback: function() {
* setTimeout(this.onTimerEvent, this.frequency * 1000);
* }
* 那么�Q�this.onTimeoutEvent �Ҏ��执行��p�|�Q�因为它无法讉K�� this.currentlyExecuting 属性�?
* 而��用了bind以后�Q�该�Ҏ��才能正确的找到this�Q�也��是PeriodicalExecuter的当前实例�?
*/
var PeriodicalExecuter = Class.create();
PeriodicalExecuter.prototype = {
initialize: function(callback, frequency) {
this.callback = callback;
this.frequency = frequency;
this.currentlyExecuting = false;

this.registerCallback();
},

registerCallback: function() {
setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000);
},

onTimerEvent: function() {
if (!this.currentlyExecuting) {
try {
this.currentlyExecuting = true;
this.callback();
} finally {
this.currentlyExecuting = false;
}
}

this.registerCallback();
}
}

/*--------------------------------------------------------------------------*/

/**
* �q�个函数��?Ruby 了。我觉得它的作用主要有两�?
* 1. 大概�?document.getElementById(id) 的最��化调用�?
* 比如�Q?("aaa") ��返回上 aaa 对象
* 2. 得到对象数组
* 比如: $("aaa","bbb") �q�回一个包括id�?aaa"�?bbb"两个input控�g对象的数�l��?
*/
function $() {
var elements = new Array();

for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);

if (arguments.length == 1)
return element;

elements.push(element);
}

return elements;
}
/**
* 定义 Ajax 对象, 静态方�?getTransport �Ҏ��q�回一�?XMLHttp 对象
*/
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new ActiveXObject('Msxml2.XMLHTTP')},
function() {return new ActiveXObject('Microsoft.XMLHTTP')},
function() {return new XMLHttpRequest()}
) || false;
},

emptyFunction: function() {}
}

/**
* 我以为此时的Ajax对象起到命名�I�间的作用�?
* Ajax.Base 声明��Z��个基��对象�c�d��
* 注意 Ajax.Base �q�没有��?Class.create() 的方式来创徏�Q�我��x��因�ؓ作者�ƈ不希�?Ajax.Base 被库使用者实例化�?
* 作者在其他对象�c�d��的声明中�Q�将会��承于它�?
* ��好�?java 中的�U�有抽象�c?
*/
Ajax.Base = function() {};
Ajax.Base.prototype = {
/**
* extend (见prototype.js中的定义) 的用法真是让��目一�?
* options 首先讄��默认属性，然后�?extend 参数对象�Q�那么参数对象中也有同名的属性，那么��p��盖默认属性倹{�?
* ��x��如果我写�q�样的实玎ͼ�应该�c�M��如下�Q?
setOptions: function(options) {
this.options.methed = options.methed? options.methed : 'post';
..........
}
我想很多时候，java 限制�?js 的创意�?
*/
setOptions: function(options) {
this.options = {
method: 'post',
asynchronous: true,
parameters: ''
}.extend(options || {});
}
}

/**
* Ajax.Request ��装 XmlHttp
*/
Ajax.Request = Class.create();

/**
* 定义四种事�g(状�?�Q?参考http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp
*/
Ajax.Request.Events =
['Uninitialized', 'Loading', 'Loaded', 'Interactive', 'Complete'];

/**
*
*/
Ajax.Request.prototype = (new Ajax.Base()).extend({
initialize: function(url, options) {
this.transport = Ajax.getTransport();
this.setOptions(options);

try {
if (this.options.method == 'get')
url += '?' + this.options.parameters + '&_=';

/**
* 此处好像强制使用了异步方式，而不是依�?this.options.asynchronous 的�?
*/
this.transport.open(this.options.method, url, true);

/**
* �q�里提供�?XmlHttp 传输�q�程中每个步骤的回调函数
*/
if (this.options.asynchronous) {
this.transport.onreadystatechange = this.onStateChange.bind(this);
setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10);
}

this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
this.transport.setRequestHeader('X-Prototype-Version', Prototype.Version);

if (this.options.method == 'post') {
this.transport.setRequestHeader('Connection', 'close');
this.transport.setRequestHeader('Content-type',
'application/x-www-form-urlencoded');
}

this.transport.send(this.options.method == 'post' ?
this.options.parameters + '&_=' : null);

} catch (e) {
}
},

onStateChange: function() {
var readyState = this.transport.readyState;
/**
* 如果不是 Loading 状态，��p��用回调函�?
*/
if (readyState != 1)
this.respondToReadyState(this.transport.readyState);
},

/**
* 回调函数定义�?this.options 属性中�Q�比�?
var option = {
onLoaded : function(req) {...};
......
}
new Ajax.Request(url, option);
*/
respondToReadyState: function(readyState) {
var event = Ajax.Request.Events[readyState];
(this.options['on' + event] || Ajax.emptyFunction)(this.transport);
}
});

/**
* Ajax.Updater 用于�l�定一个html元素�?XmlHttp调用的返回倹{��类��g�� buffalo �?bind�?
* 如果 options 中有 insertion(from dom.js) 对象的话, insertion 能提供更多的插入控制�?
*/
Ajax.Updater = Class.create();
Ajax.Updater.prototype = (new Ajax.Base()).extend({
initialize: function(container, url, options) {
this.container = $(container);
this.setOptions(options);

if (this.options.asynchronous) {
this.onComplete = this.options.onComplete;
this.options.onComplete = this.updateContent.bind(this);
}

this.request = new Ajax.Request(url, this.options);

if (!this.options.asynchronous)
this.updateContent();
},

updateContent: function() {
if (this.options.insertion) {
new this.options.insertion(this.container,
this.request.transport.responseText);
} else {
this.container.innerHTML = this.request.transport.responseText;
}

if (this.onComplete) {
setTimeout((function() {this.onComplete(this.request)}).bind(this), 10);
}
}
});
/**
* 针对 ��面元素对象的工��L��Q�提供一些简单静态方�?
*/
var Field = {
/**
* 清除参数引用对象的�?
*/
clear: function() {
for (var i = 0; i < arguments.length; i++)
$(arguments[i]).value = '';
},

/**
* 使参数引用对象获取焦�?
*/
focus: function(element) {
$(element).focus();
},

/**
* 判断参数引用对象值是否�ؓ�I�，如�ؓ�I�，�q�回false, 反之true
*/
present: function() {
for (var i = 0; i < arguments.length; i++)
if ($(arguments[i]).value == '') return false;
return true;
},

/**
* 佉K��中参数引用对象
*/
select: function(element) {
$(element).select();
},

/**
* 使参数引用对象处于可�~�辑状�?
*/
activate: function(element) {
$(element).focus();
$(element).select();
}
}

/*--------------------------------------------------------------------------*/

/**
* 表单工具�c?
*/
var Form = {
/**
* ��表单元素序列化后的值组合成 QueryString 的�Ş�?
*/
serialize: function(form) {
var elements = Form.getElements($(form));
var queryComponents = new Array();

for (var i = 0; i < elements.length; i++) {
var queryComponent = Form.Element.serialize(elements[i]);
if (queryComponent)
queryComponents.push(queryComponent);
}

return queryComponents.join('&');
},

/**
* 得到表单的所有元素对�?
*/
getElements: function(form) {
form = $(form);
var elements = new Array();

for (tagName in Form.Element.Serializers) {
var tagElements = form.getElementsByTagName(tagName);
for (var j = 0; j < tagElements.length; j++)
elements.push(tagElements[j]);
}
return elements;
},

/**
* ��指定表单的元素�|�于不可用状�?
*/
disable: function(form) {
var elements = Form.getElements(form);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.blur();
element.disable = 'true';
}
},

/**
* 使表单的�W�一个非 hidden �c�d��而且处于可用状态的元素获得焦点
*/
focusFirstElement: function(form) {
form = $(form);
var elements = Form.getElements(form);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.type != 'hidden' && !element.disabled) {
Field.activate(element);
break;
}
}
},

/*
* 重置表单
*/
reset: function(form) {
$(form).reset();
}
}

/**
* 表单元素工具�c?
*/
Form.Element = {
/**
* �q�回表单元素的值先序列化再�q�行 URL �~�码后的�?
*/
serialize: function(element) {
element = $(element);
var method = element.tagName.toLowerCase();
var parameter = Form.Element.Serializers[method](element);

if (parameter)
return encodeURIComponent(parameter[0]) + '=' +
encodeURIComponent(parameter[1]);
},

/**
* �q�回表单元素序列化后的�?
*/
getValue: function(element) {
element = $(element);
var method = element.tagName.toLowerCase();
var parameter = Form.Element.Serializers[method](element);

if (parameter)
return parameter[1];
}
}

/**
* prototype 的所谓序列化其实��是��表单的名字和值组合成一个数�l?
*/
Form.Element.Serializers = {
input: function(element) {
switch (element.type.toLowerCase()) {
case 'hidden':
case 'password':
case 'text':
return Form.Element.Serializers.textarea(element);
case 'checkbox':
case 'radio':
return Form.Element.Serializers.inputSelector(element);
}
return false;
},

inputSelector: function(element) {
if (element.checked)
return [element.name, element.value];
},

textarea: function(element) {
return [element.name, element.value];
},

/**
* 看样子，也不支持多选框(select-multiple)
*/
select: function(element) {
var index = element.selectedIndex;
var value = element.options[index].value || element.options[index].text;
return [element.name, (index >= 0) ? value : ''];
}
}

/*--------------------------------------------------------------------------*/

/**
* Form.Element.getValue 也许会经常用刎ͼ�所以做了一个快捷引�?
*/
var $F = Form.Element.getValue;

/*--------------------------------------------------------------------------*/

/**
* Abstract.TimedObserver 也没有用 Class.create() 来创建，和Ajax.Base 意图应该一�?
* Abstract.TimedObserver ��֐�思义�Q�是套用Observer设计模式来跟�t�指定表单元素，
* 当表单元素的值发生变化的时候，��执行回调函�?
*
* 我想　Observer 与注册onchange事�g�怼��Q�不同点在于 onchange 事�g是在元素失去焦点的时候才�Ȁ发�?
* 同样的与 onpropertychange 事�g也相��|��不过它只��x��表单元素的值的变化�Q�而且提供timeout的控制�?
*
* 除此之外�Q�Observer 的好处大概就在与更面向对象，另外可以动态的更换回调函数�Q�这��比注册事�g要灵�z�M��些�?
* Observer 应该可以胜�Q动态数据校验，或者多个关联下拉选项列表的连动等�{?
*
*/
Abstract.TimedObserver = function() {}

/**
* �q�个设计�?PeriodicalExecuter 一��P��bind �Ҏ��是实现的核心
*/
Abstract.TimedObserver.prototype = {
initialize: function(element, frequency, callback) {
this.frequency = frequency;
this.element = $(element);
this.callback = callback;

this.lastValue = this.getValue();
this.registerCallback();
},

registerCallback: function() {
setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000);
},

onTimerEvent: function() {
var value = this.getValue();
if (this.lastValue != value) {
this.callback(this.element, value);
this.lastValue = value;
}

this.registerCallback();
}
}

/**
* Form.Element.Observer �?Form.Observer 其实是一��L��
* 注意 Form.Observer �q�不是用来跟�t�整个表单的�Q�我惛_��概只是�ؓ了减��书�?�q�是Ruby的一个设计原�?
*/
Form.Element.Observer = Class.create();
Form.Element.Observer.prototype = (new Abstract.TimedObserver()).extend({
getValue: function() {
return Form.Element.getValue(this.element);
}
});

Form.Observer = Class.create();
Form.Observer.prototype = (new Abstract.TimedObserver()).extend({
getValue: function() {
return Form.serialize(this.element);
}
});

/**
* �Ҏ�� class attribute 的名字得到对象数�l�，支持 multiple class
*
*/
document.getElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = new Array();

for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}

return elements;
}

/*--------------------------------------------------------------------------*/

/**
* Element ��p��一�?java 的工��L��Q�主要用�?隐藏/昄��/销�?对象�Q�以及获取对象的��单属性�?
*
*/
var Element = {
toggle: function() {
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display =
(element.style.display == 'none' ? '' : 'none');
}
},

hide: function() {
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = 'none';
}
},

show: function() {
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = '';
}
},

remove: function(element) {
element = $(element);
element.parentNode.removeChild(element);
},

getHeight: function(element) {
element = $(element);
return element.offsetHeight;
}
}

/**
* �?Element.toggle 做了一个符可��接，大概是兼�Ҏ��的考虑
*/
var Toggle = new Object();
Toggle.display = Element.toggle;

/*--------------------------------------------------------------------------*/

/**
* 动态插入内容的实现�Q�MS的Jscript实现中对象有一�?insertAdjacentHTML �Ҏ��(http: //msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp)
* �q�里��是一个对象�Ş式的��装�?
*/
Abstract.Insertion = function(adjacency) {
this.adjacency = adjacency;
}

Abstract.Insertion.prototype = {
initialize: function(element, content) {
this.element = $(element);
this.content = content;

if (this.adjacency && this.element.insertAdjacentHTML) {
this.element.insertAdjacentHTML(this.adjacency, this.content);
} else {
/**
* gecko 不支�?insertAdjacentHTML �Ҏ��Q�但可以用如下代码代�?
*/
this.range = this.element.ownerDocument.createRange();
/**
* 如果定义�?initializeRange �Ҏ��Q�则实行�Q�这里相当与定义了一个抽象的 initializeRange �Ҏ��
*/
if (this.initializeRange) this.initializeRange();
this.fragment = this.range.createContextualFragment(this.content);

/**
* insertContent 也是一个抽象方法，子类必须实现
*/
this.insertContent();
}
}
}

/**
* prototype 加深了我的体会，��是写js 如何去遵循　Don’t Repeat Yourself (DRY) 原则
* 上文�?Abstract.Insertion ��是一个抽象类�Q�定义了名�ؓ　initializeRange 的一个抽象方�?
* var Insertion = new Object()　建立一个命名空�?
* Insertion.Before|Top|Bottom|After ��p��是四个java中的四个静态内部类�Q�而它们分别��承于Abstract.Insertion�Q��ƈ实现了initializeRange�Ҏ��?
*/
var Insertion = new Object();

Insertion.Before = Class.create();
Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({
initializeRange: function() {
this.range.setStartBefore(this.element);
},

/**
* ��内�Ҏ��入到指定节点的前�? 与指定节点同�U?
*/
insertContent: function() {
this.element.parentNode.insertBefore(this.fragment, this.element);
}
});

Insertion.Top = Class.create();
Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({
initializeRange: function() {
this.range.selectNodeContents(this.element);
this.range.collapse(true);
},

/**
* ��内�Ҏ��入到指定节点的第一个子节点前，于是内容变�ؓ该节点的�W�一个子节点
*/
insertContent: function() {
this.element.insertBefore(this.fragment, this.element.firstChild);
}
});

Insertion.Bottom = Class.create();
Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({
initializeRange: function() {
this.range.selectNodeContents(this.element);
this.range.collapse(this.element);
},

/**
* ��内�Ҏ��入到指定节点的最后，于是内容变�ؓ该节点的最后一个子节点
*/
insertContent: function() {
this.element.appendChild(this.fragment);
}
});

Insertion.After = Class.create();
Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({
initializeRange: function() {
this.range.setStartAfter(this.element);
},

/**
* ��内�Ҏ��入到指定节点的后�? 与指定节点同�U?
*/
insertContent: function() {
this.element.parentNode.insertBefore(this.fragment,
this.element.nextSibling);
}
});

/* �q�是包含错误的原版本
if (!Function.prototype.apply) {
// Based on code from http://www.youngpup.net/
Function.prototype.apply = function(object, parameters) {
var parameterStrings = new Array();
if (!object) object = window;
if (!parameters) parameters = new Array();

for (var i = 0; i < parameters.length; i++)
parameterStrings[i] = 'x[' + i + ']'; //Error 1

object.__apply__ = this;
var result = eval('obj.__apply__(' + //Error 2
parameterStrings[i].join(', ') + ')');
object.__apply__ = null;

return result;
}
}
*/

if (!Function.prototype.apply) {
Function.prototype.apply = function(object, parameters) {
var parameterStrings = new Array();
if (!object) object = window;
if (!parameters) parameters = new Array();

for (var i = 0; i < parameters.length; i++)
parameterStrings[i] = 'parameters[' + i + ']';

object.__apply__ = this;
var result = eval('object.__apply__(' + parameterStrings.join(', ') + ')');
object.__apply__ = null;

return result;
}
}

Effect 的一个子�c?br />

Effect.Blink = Class.create();
Effect.Blink.prototype = {
initialize: function(element, frequency) {
this.element = $(element);
this.frequency = frequency?frequency:1000;
this.element.effect_blink = this;
this.blink();
},

blink: function() {
if (this.timer) clearTimeout(this.timer);
try {
this.element.style.visibility = this.element.style.visibility == 'hidden'?'visible':'hidden';
} catch (e) {}
this.timer = setTimeout(this.blink.bind(this), this.frequency);
}
};

Jaunt 2007-10-10 17:18 发表评论

IE下的开发工具包(好东�?

Jaunt — Mon, 02 Apr 2007 11:00:00 GMT

没想到IE下面也有�q�等好东�?

Internet Explorer Developer Toolbar Beta 3

Jaunt 2007-04-02 19:00 发表评论

prototype.js　1.4版开发者手�?强烈推荐)

Jaunt — Fri, 23 Mar 2007 00:56:00 GMT

prototype.js　1.4版开发者手�?强烈推荐)

Jaunt 2007-03-23 08:56 发表评论

Jaunt — Wed, 29 Nov 2006 11:24:00 GMT
status存储服务器端�q�回的HTTP��h��响应代码�Q�它表示��h��的处理结果，响应代码的含义如下表�Q?br />
Http状态码      |                 含义
      200          |       ��h��成功
      204          |       ��h��被接�Ӟ��但处理未完成
      400          |       错误的请�?br />      404          |       ��h��资源未找�?br />      500          |       内部服务器错误，如是JSP,ASP代码错误�{?img src ="http://m.tkk7.com/jaunt/aggbug/84413.html" width = "1" height = "1" />

Jaunt 2006-11-29 19:24 发表评论

readyState属性判断请求状态与及值的含义

Jaunt — Wed, 29 Nov 2006 11:16:00 GMT

onreadystatechange事�g是在readyState属性发生改变时触发的，readyState的��D��C�Z��当前��h��状�?在事件处理程序中可以�Ҏ��q�个��D��行不同的处理�Q�各个值的含义好下表：

readyState值�?|                                 含义
      0              |    �q�也是readyState开始具有的��|��表示对象已经建立�Q?br />                      |    但还未初始化,�q�时��未调用open�Ҏ��
      1              |    表示open�Ҏ��已经调用�Q�但��未调用send�Ҏ��
      2              |    表示send�Ҏ��已经调用�Q�其他数据未�?br />      3              |    表示��h��已经发送成功，正在接收数据通信
      4              |    表示数据已接收成功，此时相当于直接�ɋ��览器打开�|�页�Q?br />                     |    状态栏昄��"完成"字样

Jaunt 2006-11-29 19:16 发表评论

Jaunt — Tue, 28 Nov 2006 11:12:00 GMT

以内容�ؓ中心的交�?
服务器返回的是HTML格式的内�?
客户端直接��用获得的内容为某个元素的innerHTML属性赋�?
优点
不需要在客户端徏立领域模型，客户端的代码非常��?
与动态创建DOM元素相比�Q��ؓinnerHTML赋值的方式性能非常�?
�~�点
修改的内定w��于屏�q�上某些固定的矩形区域，不够灉|��

以脚本�ؓ中心的交�?
服务器返回的是一�D�JavaScript脚本
客户端调用eval()函数执行�q�段脚本�Q�完成特定的��d��
优点
修改的内容不限于屏幕上某些固定的矩�Ş区域
�~�点
生成的JavaScript��专门�ؓ�q�个客户端设计，客户端与服务器端耦合的太�?

以数据�ؓ中心的交�?
服务器返回的是XML或其他格式的数据
在客��L��对获得的数据�q�行解析�Q��用DOM API创徏新的元素
优点
客户端与服务器端松散耦合�Q�可以应用于多种�c�d��的客��L��
�~�点
客户端的代码最为复杂，需要在客户端划分MVC

书摘�Q�Ajax In Action

Jaunt 2006-11-28 19:12 发表评论

Jaunt — Tue, 28 Nov 2006 11:09:00 GMT

Model�Q�业务领域对象，用JavaScript对象表示

View�Q�整个可�~�程处理的页�?

Controller�Q�将UI和领域对象相�q�接的代码中的所有事件处理函数的�l�合

书摘�Q�Ajax In Action

Jaunt 2006-11-28 19:09 发表评论

Jaunt — Tue, 28 Nov 2006 11:03:00 GMT

Ajax所��Z��的核心技�?/p>
XHTML

CSS

DOM

JavaScript

XML

XMLHttpRequest
--------------------------------------------------------------------------------------------

XHTML代表��面中的�l�构

CSS代表��面中的表现

DOM代表��面中的行�ؓ
--------------------------------------------------------------------------------------------

��面中的�l�构/表现/行�ؓ三部分的分离是实现页面开发组件化和重用的关键
使用XHTML 1.0的strict DTD�Q�在html文�g中不包含��M��有表现含义的标签
完全使用CSS来做布局�Q�尽力探索CSS的潜�?
JavaScript应尽量多地通过讄��元素的id或class的方式来调用CSS�Q�而不是直接设�|�元素的style属�?

忽视��面中这三部分的分离�Q�是造成大多数Ajax开发的混�ؕ之源
��这三部分�؜杂在一��P��开发、维护的成本非常�?
不将�q�三部分分离开�Q�就无法对Ajax应用�q�行自动化的单元��试

是否熟练掌握�q�三个规范，是区分Ajax高手和低手的标准
�q�三个规范�ƈ非像某些人想象的那样�Q�一周之内就可以掌握
忠告�Q?font color="#ff1493">在还没有学会走�\之前�Q�不要指望自��p��跑的像刘��一样快

书摘�Q�Ajax In Action

Jaunt 2006-11-28 19:03 发表评论

Jaunt — Tue, 28 Nov 2006 10:59:00 GMT

Firefox家族
Firefox
FireBug
Venkman
Web Developer
DOM Inspector
Tamper Data
LiveHTTPHeader

IE家族
IE
MSE�Q�Microsoft Script Editor�Q?/font>
Visual InterDev
IE Developer Toolbar
Fiddler

----------------------------------------------------------------------

选择Firefox作�ؓ首选Ajax开发��^台的理由
Firefox的Web开发插件极其丰富和强大
Firefox对Web标准��h��很好的支�?
Firefox支持JavaScript的最新版�?
Firefox支持Canvas、SVG、E4X�{�新的技�?

��Q?font color="#008000">在Firefox上做开发，在IE上做��试

书摘�Q�Ajax In Action

Jaunt 2006-11-28 18:59 发表评论

真正的JavaScript而非JScript

Jaunt — Sat, 25 Nov 2006 18:39:00 GMT

Now�|�上有大量关于所谓JavaScript的参考手册或参考资料的�Q�其实大部分都是真对于微软所推出的JScript的，而不是现在我们��用Ajax使用到的JavaScript哦…�?br />今天在网上看到阿江对真正JavaScript而非Jscript的整理，如下�Q?/p>

        1、javascript 参考 V1.5�Q�英文）
　　http://www.ajiang.net/tools/CoreReferenceJS15.chm
　　2、javascript 指南 V1.5�Q�英文）
　　http://www.ajiang.net/tools/CoreGuideJS15.chm
　　以上来自
　　http://devedge.netscape.com/central/javascript/
　　
　　3、javascript 参考  来自 www.devguru.com�Q�英文）�l�构很清�?br />　　http://www.ajiang.net/tools/javascript_devguru.chm
　　4、中文的参�?br />　　http://www.ajiang.net/tools/JavaScriptHelp_cn.chm
　　
　　�|�上很多地方把微软JSscript的中文参考当作javascript的参考提供下载，那是不能用的�?/p>

Jaunt 2006-11-26 02:39 发表评论

�Ҏ��	描述
abort()	停止当前��h��
getAllResponseHeaders()	作�ؓ字符串返问完整的headers
getResponseHeader("headerLabel")	作�ؓ字符串返问单个的header标签
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	讄��未决的请求的目标 URL, �Ҏ��, 和其他参�?/td>
send(content)	发送请�?/td>
setRequestHeader("label", "value")	讄��header�q�和��h��一起发�?/td>

属�?/strong>	描述
onreadystatechange	状态改变的事�g触发�?/td>
readyState	对象状�?integer): 0 = 未初始化 1 = ��d��?br /> 2 = 已读�?br /> 3 = 交互�?br /> 4 = 完成
responseText	服务器进�E�返回数据的文本版本
responseXML	服务器进�E�返回数据的兼容DOM的XML文档对象
status	服务器返回的状态码, 如：404 = "文�g末找�? �?00 ="成功"
statusText	服务器返回的状态文本信�?/td>

最新国产精品亚洲,亚洲精品无码专区2,亚洲精品亚洲人成在线

AJAX概况

prototype 源码中文说明�?prototype.js(�?

IE下的开发工具包(好东�?

没想到IE下面也有�q�等好东�?

Internet Explorer Developer Toolbar Beta 3

prototype.js 1.4版开发者手�?强烈推荐)

prototype.js 1.4版开发者手�?强烈推荐)

readyState属性判断请求状态与及值的含义

真正的JavaScript而非JScript

prototype.js　1.4版开发者手�?强烈推荐)

prototype.js　1.4版开发者手�?强烈推荐)