虽然网络上已经有大量的相关资源,但是为了打好基础,认真读上几本书还是很有必要的。
好在 Ajax 并不是什么全新的技术,它仅仅是传统技术的发展和增值,是对于这些基于 Web 标准的传统技术的重新包装,使其更加适合于企业应用,并且和服务器端结合地更加紧密。因此学习 Ajax,首先就要从深入学习这些传统的技术开始。
我由浅入深地列出一些我读过的书籍,提供给大家做参考:
1、XHTML 教程(XHTML) 作者:Chelsea Valentine, Chris Minnick New Riders 原版,人民邮电出版社中文版
是的,今天你最应该学习的是 XHTML,而不是 HTML。HTML 4.x 已经是一个被废弃了的标准,今天的标准是 XHTML 1.0。XHTML 1.0 也不是 XHTML 最新的版本,但是它是目前唯一得到浏览器广泛支持和唯一实用的 XHTML 版本。
2、JavaScript 权威指南第四版(JavaScript: The Definitive Guide) 作者 avid Flanagan O'Reilly 原版,中国电力出版社中文版
JavaScript 爱好者亲切地称之为“犀牛书”,因为 O'Reilly 以犀牛作为这本书的封面。这是目前 JavaScript 领域最深入和最权威的入门书。与其它 JavaScript 相关书籍的区别是这本书一半以上的篇幅着重于深入介绍 JavaScript 语言本身的基础知识,而不是象其它的书一样把基础知识和与 HTML 相结合做 Web 开发的内容(这些内容往往偏重于细节,使得其篇幅很容易就超出了 1000 页,例如《JavaScript Bible》)混杂在一起。对于刚刚开始学习 JavaScript 的初学者,这本书毫无疑问是最佳的入门书。
3、XML 高级编程(Professional XML) Didier Martin等著 Wrox 原版,机械工业出版社中文版
这本书是关于 XML 开发技术非常详尽的著作。虽然因为作者众多(第一版 12 个人,第二版好像又多了几个),无法摆脱 Wrox 红皮书系列大杂烩的印记,但是这本书可以说是红皮书系列中少有的精品。
这本书可以作为 XML 技术参考书,虽然很厚,但是没有必要从头到尾全部读完。其中与 Ajax 相关的内容包括 XML DOM、XSLT 等等。
4、网站重构(Designing with Web Standards) 作者:Jeffrey Zeldman New Riders 原版,电子工业出版社中文版
这本书详细地介绍了如何摒弃远古时代(按照我的理解,3 年以前吧)不符合标准,专门针对某种浏览器(90%以上的情况下是 IE)做开发的恶习,真正采用符合标准的方式来做开发,最终走上向后兼容(注意:不是与浏览器以前不能完整支持 Web 标准的版本相兼容,而是与浏览器以后的版本相兼容)的平坦大路上来。这本书虽然不是 CSS 的专著,但是其中充分展示了使用 CSS 的一些高级技巧。尤其是最后一章展示了完全基于 CSS 做布局,摒弃使用 table 做布局的老方法的具体做法。
非常遗憾的是这本书的中文版翻译的非常烂,如果不对照原文,很容易误入歧途。读这本书有任何疑问的朋友都可以直接和我联系。 上面列出的是与 Ajax 涉及到的技术相关的书籍。我没有列出 CSS 的书,是因为我并没有专门读过一本 CSS 方面的专著。附件是网上流传很广的 CSS 2.0 中文手册,可以作为这方面的参考。
读了以上这些书,你已经在技术方面打下了极为坚实的基础,你还需要有一个经常的讨论场所,JavaEye 毫无疑问是你最值得来的地方。
下面我再列出几本与技术没有直接关系的书籍。
5、面向使用的软件设计(Software for Use) 作者 arry Contantine, Lucy Lockwood ACM Press 原版,机械工业出版社中文版
大部分的软件都是给人使用的。我在 BEA User Group上的演讲中说到,Ajax 为什么会越来越流行,主要的原因就是它能比传统的基于 HTML FORM 的交互模式带给用户更好的交互体验,也就是 Ajax 可以实现更好的 Web 可用性(Web Usability,这是目前国外的一个专门的研究领域),这才是 Ajax 最大的价值。软件的可用性永远都是一个大的话题,《面向使用的软件设计》正是这方面最权威的专著。我们只要在做最终用户直接使用(有一个可视的界面)的软件开发,提高可用性就是我们需要孜孜不倦追求的目标。
6、软件创新之路(Inmates Are Running the Asylum) 作者:Alan Cooper Sams Publishing 原版,电子工业出版社中文版
7、About Face 2.0 作者:Alan Cooper John Wiley & Sons 原版,中文版即将出版
上面两本书都是交互设计大师 Alan Cooper 的名著,相信很多朋友都知道 Alan Cooper 的大名,这两本书是交互设计爱好者必读的著作。
看了Dflying Chen 介绍的一篇Ajax的文章就像练练英语自己翻译一下,由于自己的水平有限,请大家批评指正
本文的作者是知名.NET Ajax框架Ajax.NET Professional(AjaxPro)的作者Michael Schwarz
上个月我发现许多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。是不是任何人都可以建立一个请求(不只是点击一个链接)?
Ajax程序设计入门
一、使用Ajax的主要原因
1、通过适当的Ajax应用达到更好的用户体验;
2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
二、引用
Ajax这个概念的最早提出者Jesse James Garrett认为:Ajax是Asynchronous JavaScript and XML的缩写。Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:
•使用XHTML和CSS标准化呈现;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
图2-1
图2-2
三、概述
虽然Garrent列出了7条Ajax的构成技术,但个人认为,所谓的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式,也可以是文本等其他格式)。
在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
1、XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
最早应用XMLHTTP的是微软,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类:XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。
XMLHttpRequest的应用:
•XMLHttpRequest对象在JS中的应用
var xmlhttp = new XMLHttpRequest();
•微软的XMLHTTP组件在JS中的应用
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
if (typeof XMLHttpRequest == ’undefined’) {
AJAX入门之深入理解javascript中的函数
函数是进行模块化程序设计的基础,编写复杂的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)。
函数对象与其他用户所定义的对象有着本质的区别,这一类对象被称之为内部对象,例如日期对象(Date)、数组对象(Array)、字符串对象(String)都属于内部对象。这些内置对象的构造器是由Javascrīpt本身所定义的:通过执行new Array()这样的语句返回一个对象,Javascrīpt内部有一套机制来初始化返回的对象,而不是由用户来指定对象的构造方式。
在Javascrīpt中,函数对象对应的类型是Function,正如数组对象对应的类型是Array,日期对象对应的类型是Date一样,可以通过new Function()来创建一个函数对象,也可以通过function关键字来创建一个对象。为了便于理解,我们比较函数对象的创建和数组对象的创建。先看数组对象:下面两行代码都是创建一个数组对象myArray:
//等价于
var myArray=new Array();
同样,下面的两段代码也都是创建一个函数myFunction:
function myFunction(a,b){
return a+b;
}
//等价于
var myFunction=new Function("a","b","return a+b");
通过和构造数组对象语句的比较,可以清楚的看到函数对象本质,前面介绍的函数声明是上述代码的第一种方式,而在解释器内部,当遇到这种语法时,就会自动构造一个Function对象,将函数作为一个内部的对象来存储和运行。从这里也可以看到,一个函数对象名称(函数变量)和一个普通变量名称具有同样的规范,都可以通过变量名来引用这个变量,但是函数变量名后面可以跟上括号和参数列表来进行函数调用。
用new Function()的形式来创建一个函数不常见,因为一个函数体通常会有多条语句,如果将它们以一个字符串的形式作为参数传递,代码的可读性差。下面介绍一下其使用语法:
参数的类型都是字符串,p1到pn表示所创建函数的参数名称列表,body表示所创建函数的函数体语句,funcName就是所创建函数的名称。可以不指定任何参数创建一个空函数,不指定funcName创建一个无名函数,当然那样的函数没有任何意义。
需要注意的是,p1到pn是参数名称的列表,即p1不仅能代表一个参数,它也可以是一个逗号隔开的参数列表,例如下面的定义是等价的:
new Function("a, b, c", "return a+b+c")
new Function("a,b", "c", "return a+b+c")
Javascrīpt引入Function类型并提供new Function()这样的语法是因为函数对象添加属性和方法就必须借助于Function这个类型。
函数的本质是一个内部对象,由Javascrīpt解释器决定其运行方式。通过上述代码创建的函数,在程序中可以使用函数名进行调用。本节开头列出的函数定义问题也得到了解释。注意可直接在函数声明后面加上括号就表示创建完成后立即进行函数调用,例如:
return a+b;
}(1,2);
alert(i);
这段代码会显示变量i的值等于3。i是表示返回的值,而不是创建的函数,因为括号“(”比等号“=”有更高的优先级。这样的代码可能并不常用,但当用户想在很长的代码段中进行模块化设计或者想避免命名冲突,这是一个不错的解决办法。
需要注意的是,尽管下面两种创建函数的方法是等价的:
//函数体
}
//等价于
var funcName=function(){
//函数体
}
但前面一种方式创建的是有名函数,而后面是创建了一个无名函数,只是让一个变量指向了这个无名函数。在使用上仅有一点区别,就是:对于有名函数,它可以出现在调用之后再定义;而对于无名函数,它必须是在调用之前就已经定义。例如:
<!--
func();
var func=function(){
alert(1)
}
//-->
</scrīpt>
这段语句将产生func未定义的错误,而:
<!--
func();
function func(){
alert(1)
}
//-->
</scrīpt>
则能够正确执行,下面的语句也能正确执行:
<!--
func();
var someFunc=function func(){
alert(1)
}
//-->
</scrīpt>
由此可见,尽管Javascrīpt是一门解释型的语言,但它会在函数调用时,检查整个代码中是否存在相应的函数定义,这个函数名只有是通过function funcName()形式定义的才会有效,而不能是匿名函数。
函数对象和其他内部对象的关系
除了函数对象,还有很多内部对象,比如:Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型,可以通过new操作符返回一个对象。然而函数对象和其他对象不同,当用typeof得到一个函数对象的类型时,它仍然会返回字符串 “function”,而typeof一个数组对象或其他的对象时,它会返回字符串“object”。下面的代码示例了typeof不同类型的情况:
alert(typeof(Function)));
alert(typeof(new Function()));
alert(typeof(Array));
alert(typeof(Object));
alert(typeof(new Array()));
alert(typeof(new Date()));
alert(typeof(new Object()));
运行这段代码可以发现:前面4条语句都会显示“function”,而后面3条语句则显示“object”,可见new一个function实际上是返回一个函数。这与其他的对象有很大的不同。其他的类型Array、Object等都会通过new操作符返回一个普通对象。尽管函数本身也是一个对象,但它与普通的对象还是有区别的,因为它同时也是对象构造器,也就是说,可以new一个函数来返回一个对象,这在前面已经介绍。所有typeof返回 “function”的对象都是函数对象。也称这样的对象为构造器(constructor),因而,所有的构造器都是对象,但不是所有的对象都是构造器。
既然函数本身也是一个对象,它们的类型是function,联想到C++、Java等面向对象语言的类定义,可以猜测到Function类型的作用所在,那就是可以给函数对象本身定义一些方法和属性,借助于函数的prototype对象,可以很方便地修改和扩充Function类型的定义,例如下面扩展了函数类型Function,为其增加了method1方法,作用是弹出对话框显示 "function":
alert("function");
}
function func1(a,b,c){
return a+b+c;
}
func1.method1();
func1.method1.method1();
注意最后一个语句:func1.method1.mehotd1(),它调用了method1这个函数对象的method1方法。虽然看上去有点容易混淆,但仔细观察一下语法还是很明确的:这是一个递归的定义。因为method1本身也是一个函数,所以它同样具有函数对象的属性和方法,所有对 Function类型的方法扩充都具有这样的递归性质。
Function是所有函数对象的基础,而Object则是所有对象(包括函数对象)的基础。在Javascrīpt中,任何一个对象都是Object的实例,因此,可以修改Object这个类型来让所有的对象具有一些通用的属性和方法,修改Object类型是通过prototype来完成的:
return typeof(this);
}
var array1=new Array();
function func1(a,b){
return a+b;
}
alert(array1.getType());
alert(func1.getType());
上面的代码为所有的对象添加了getType方法,作用是返回该对象的类型。两条alert语句分别会显示“object”和“function”。
将函数作为参数传递
在前面已经介绍了函数对象本质,每个函数都被表示为一个特殊的对象,可以方便的将其赋值给一个变量,再通过这个变量名进行函数调用。作为一个变量,它可以以参数的形式传递给另一个函数,这在前面介绍Javascrīpt事件处理机制中已经看到过这样的用法,例如下面的程序将func1作为参数传递给func2:
theFunc();
}
function func2(){
alert("ok");
}
func1(func2);
在最后一条语句中,func2作为一个对象传递给了func1的形参theFunc,再由func1内部进行theFunc的调用。事实上,将函数作为参数传递,或者是将函数赋值给其他变量是所有事件机制的基础。
例如,如果需要在页面载入时进行一些初始化工作,可以先定义一个init的初始化函数,再通过window.onload=init;语句将其绑定到页面载入完成的事件。这里的init就是一个函数对象,它可以加入window的onload事件列表。
传递给函数的隐含参数:arguments
当进行函数调用时,除了指定的参数外,还创建一个隐含的对象——arguments。arguments是一个类似数组但不是数组的对象,说它类似是因为它具有数组一样的访问性质,可以用arguments[index]这样的语法取值,拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,例如:
alert(a);
alert(b);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
func(1,2,3);
代码运行时会依次显示:1,2,1,2,3。因此,在定义函数的时候,即使不指定参数列表,仍然可以通过arguments引用到所获得的参数,这给编程带来了很大的灵活性。arguments对象的另一个属性是callee,它表示对函数对象本身的引用,这有利于实现无名函数的递归或者保证函数的封装性,例如使用递归来计算1到n的自然数之和:
if(1==n)return 1;
else return n+sum(n-1);
}
alert(sum(100));
其中函数内部包含了对sum自身的调用,然而对于Javascrīpt来说,函数名仅仅是一个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,所以使用arguments.callee属性会是一个较好的办法:
if(1==n)return 1;
else return n+arguments.callee(n-1);
}
alert(sum(100));
callee属性并不是arguments不同于数组对象的惟一特征,下面的代码说明了arguments不是由Array类型创建:
alert(new Array().p1);
function func(){
alert(arguments.p1);
}
func();
运行代码可以发现,第一个alert语句显示为1,即表示数组对象拥有属性p1,而func调用则显示为“undefined”,即p1不是arguments的属性,由此可见,arguments并不是一个数组对象。
函数的apply、call方法和length属性
Javascrīpt为函数对象定义了两个方法:apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别:
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);
从函数原型可以看到,第一个参数都被取名为thisArg,即所有函数内部的this指针都会被赋值为thisArg,这就实现了将函数作为另外一个对象的方法运行的目的。两个方法除了thisArg参数,都是为Function对象传递的参数。下面的代码说明了apply和call方法的工作方式:
function func1(){
this.p="func1-";
this.A=function(arg){
alert(this.p+arg);
}
}
//定义一个函数func2,具有属性p和方法B
function func2(){
this.p="func2-";
this.B=function(arg){
alert(this.p+arg);
}
}
var obj1=new func1();
var obj2=new func2();
obj1.A("byA"); //显示func1-byA
obj2.B("byB"); //显示func2-byB
obj1.A.apply(obj2,["byA"]); //显示func2-byA,其中[“byA”]是仅有一个元素的数组,下同
obj2.B.apply(obj1,["byB"]); //显示func1-byB
obj1.A.call(obj2,"byA"); //显示func2-byA
obj2.B.call(obj1,"byB"); //显示func1-byB
可以看出,obj1的方法A被绑定到obj2运行后,整个函数A的运行环境就转移到了obj2,即this指针指向了obj2。同样obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行显示了apply和call函数参数形式的区别。
与arguments的length属性不同,函数对象还有一个属性length,它表示函数定义时所指定参数的个数,而非调用时实际传递的参数个数。例如下面的代码将显示2:
return a+b;
}
alert(sum.length);
深入认识Javascrīpt中的this指针
this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。
和其他面向对象的语言不同,Javascrīpt中的this指针是一个动态的变量,一个方法内的this指针并不是始终指向定义该方法的对象的,在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解,再来看下面的例子:
<!--
//创建两个空对象
var obj1=new Object();
var obj2=new Object();
//给两个对象都添加属性p,并分别等于1和2
obj1.p=1;
obj2.p=2;
//给obj1添加方法,用于显示p的值
obj1.getP=function(){
alert(this.p); //表面上this指针指向的是obj1
}
//调用obj1的getP方法
obj1.getP();
//使obj2的getP方法等于obj1的getP方法
obj2.getP=obj1.getP;
//调用obj2的getP方法
obj2.getP();
//-->
</scrīpt>
从代码的执行结果看,分别弹出对话框显示1和2。由此可见,getP函数仅定义了一次,在不同的场合运行,显示了不同的运行结果,这是有 this指针的变化所决定的。在obj1的getP方法中,this就指向了obj1对象,而在obj2的getP方法中,this就指向了obj2对象,并通过this指针引用到了两个对象都具有的属性p。
由此可见,Javascrīpt中的this指针是一个动态变化的变量,它表明了当前运行该函数的对象。由this指针的性质,也可以更好的理解Javascrīpt中对象的本质:一个对象就是由一个或多个属性(方法)组成的集合。每个集合元素不是仅能属于一个集合,而是可以动态的属于多个集合。这样,一个方法(集合元素)由谁调用,this指针就指向谁。实际上,前面介绍的apply方法和call方法都是通过强制改变this指针的值来实现的,使this指针指向参数所指定的对象,从而达到将一个对象的方法作为另一个对象的方法运行。
每个对象集合的元素(即属性或方法)也是一个独立的部分,全局函数和作为一个对象方法定义的函数之间没有任何区别,因为可以把全局函数和变量看作为window对象的方法和属性。也可以使用new操作符来操作一个对象的方法来返回一个对象,这样一个对象的方法也就可以定义为类的形式,其中的 this指针则会指向新创建的对象。在后面可以看到,这时对象名可以起到一个命名空间的作用,这是使用Javascrīpt进行面向对象程序设计的一个技巧。例如:
namespace1.class1=function(){
//初始化对象的代码
}
var obj1=new namespace1.class1();
这里就可以把namespace1看成一个命名空间。
由于对象属性(方法)的动态变化特性,一个对象的两个属性(方法)之间的互相引用,必须要通过this指针,而其他语言中,this关键字是可以省略的。如上面的例子中:
alert(this.p); //表面上this指针指向的是obj1
}
这里的this关键字是不可省略的,即不能写成alert(p)的形式。这将使得getP函数去引用上下文环境中的p变量,而不是obj1的属性。
AJAX并不神秘:揭密各种AJAX控件和类库
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}
一口气说这么多,希望对大家有点用处