Ajax的工作原理

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的各种控件和类库

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为例,它的定制特性可以使得只要在方法前加上[ method]类似这样的标志就可以称为一个异步方法,相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”,而更多的事情则被封装了。同样记住一条,任何对服务器端的请求仅仅是返回纯文本,我们不一定要依赖于封装好的处理过程,而完全可以自己来实现。

  观点四:学好JavaScript

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

  观点五:Ajax点缀:

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

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

标签Tags:, , , , , , , , , , , , , , , , , , , , , , , , , ,

使用Ajax时的十个常犯的错误

上个月我发现许多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 error 500 ,你曾经检查过状态代码(status code),它可以告诉你浏览器在一个为连接的模式

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

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

标签Tags:, , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

AJAX初学:IE缓存页面的问题

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

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

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

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

  在javascript发送的URL后加上t=Math.random() ,当然,不是直接把t=Math.random()拷贝到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中的Get和Post

Get方式:

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

Post方式:

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

标签Tags:, , , , , , , , , , , , , ,

XMLHTTP对象封装技术

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

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

activeRequestCount: 0
}

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

标签Tags:, , , , , , , , , , , , , , , , , , , , , , ,

用正则解析图片地址,并利用XMLHTTP组件将其保存

现在基于WEB页的HTML的编辑器在新闻系统,文章系统中用得越来越广,一个网页一粘就可以保持原来的样式,同时图片也可以在这个页中保持。但是在使用过程中,如果所粘贴页中的图片被删除,就会在自己的页面上留下一个大大的“X”,影响美观。以前只好把这个图片保存下来,再重新上传到服务器上,这样实在麻烦。能不能让服务器自动去下载图片保存在服务器并且替换页面上的链接?答案是肯定的。 (更多…)

标签Tags:, , , , ,

各类Http请求状态(status)及其含义 速查列表 xmlhttp status

  AJAX中请求远端文件、或在检测远端文件是否掉链时,都需要了解到远端服务器反馈的状态以确定文件的存在与否。

  当然,在我们平常浏览网页时,也会发现一些文件不存在时显示为“404”,这就是常见的Http请求状态(

  Web服务器响应浏览器或其他客户程序的请求时,其应答一般由以下几个部分组成:一个状态行,几个应答头,一个空行,内容文档。下面是一个最简单的应答:

  状态行包含HTTP版本、状态代码、与状态代码对应的简短说明信息。在大多数情况下,除了Content-Type之外的所有应答头都是可选的。但Content-Type是必需的,它描述的是后面文档的MIME类型。虽然大多数应答都包含一个文档,但也有一些不包含,例如对HEAD请求的应答永远不会附带文档。有许多状态代码实际上用来标识一次失败的请求,这些应答也不包含文档(或只包含一个简短的错误信息说明)。

  当用户试图通过 HTTP 访问一台正在运行 Internet 信息服务 (IIS) 的服务器上的内容时,IIS 返回一个表示该请求的状态的数字代码。状态代码可以指明具体请求是否已成功,还可以揭示请求失败的确切原因。 (更多…)

标签Tags:, , , , ,