闲读ajax修炼之道

        选择翻看ajax主要是想对其有更充分的了解,在做个人博客的时候用过ajax异步处理过消息,但是只用其中很小的一块,就是进行用户姓名,密码验证,然后当鼠标onblur输入框的时候,进行和服务器交互,然后返回结果,在用户和密码输入框的div中显示验证结果。

  是Google Map点燃了Ajax火种,Google Map储存的是基于地理信息编码的卫图,关键是它能在web页面中可以对图片进行拖动,缩放...在十年前,传统的web一般是以一个事件来定义一个html,进行一次事件或者是一次操作就需要更新一个页面,也许在一段时间这成了理所当然。但貌似Google Map出现的时候,大家会感到惊讶,于是很多商家想要开发基于标准的html,来开发类似的web,macromedia CEO曾声称,要想开发类似的东东,需要在利用flash插件,否则需要一群技术专家(rocket scientists)。macromedia团队开发了4个月左右,做出了一个类似的产品,但是在苹果机测试的时候出现了不兼容,浏览器被锁死。但是Google Map依然那么的犀利地可以游刃与各个浏览器中,其强大无话可说,可以说是web划时代的一笔,因为它在html css等都非常成熟的技术标准下出现的一种新的思想火花,点燃了web。

  现在来分析下Google Map

  【1】主要需要一幅可以拖动的图片,一般是由卫星拍下来的图片,如果这幅图片精确到某一条街道的话,这幅图片的像素差不多会超过百万,假如图片是256色的话,1像素需要1byte的内存,这样的话这幅图片就有1000G的内存,显示一个就需要这么大的内存,计算机肯定受不了。Google开发人员将一块大图片切成灰常多的小块图片,利用有限的计算机空间资源进行存储,将这些小图片放置在html 的一个div中显示,但这没有从根本上解决图片大小问题,也就是图片内存。为了弥补内存缺陷,他们用到了虚拟化的图像网格技术,说实话我也不了解这个,但是它仅仅显示的是用户可以看到包含当前的图片的一个相对小的区域。

 【2】对图片进行缩放,对图片进行缩放其实用是对网格进行大小缩放的同时,也同时改变了图像的url,但其实还有另外一种,就是缩放部件,一张内嵌在外面大的div中的图片,通过改变图片透明度,来融合图片。

 【3】定位点和对话框,这个也是用刀了透明模式,你在进行缩放的同时,其实也是在改变对话框和定位点的透明度,这个值是可以设定的,有的有渐变透明效果,是一点一点显示出来,但也可以从0设定到100。

  如果自己利用Ajax进行仿制Google Map的话,需要做到:

 【1】得到一幅卫图,需要用到一个开源的地图技术,Batik(http://xmlgraphics.apache.org/batik/),基于java的SVG工具包。

 【2】创建小块图片,java的图形处理类库中java.awt.image可以搞定

 【3】拖动地图

 【4】显示可视地图块

 【5】清除未用地图块

 【6】缩放

 【7】定位点及对话框

  忙完这段时间,仿制个玩玩,需要实现的技术点就粗糙的列在上面,有兴趣的可以联系我。。。。。。

你可能感兴趣的:(闲读ajax修炼之道)