AjaxNote

January 4, 2006 at 7:06 am | Posted in AJAX, JavaScript, Note | Leave a comment

Ajax Note

========================================================

基础知识

基于浏览器的应用程序(web application)的UI是简陋的。

Ajax(Asynchronous Javascript and Xml)

Rich Client与一般desktop程序的不同,他首先是个Client,所以一定有Server

远程调用由于自身及网络的复杂性必然带来响应缓慢

–〉异步调用远程方法—〉Http本身的限制(request/respone协议)先天不支持异步!-Ok, how about session, -不成,我们的异步需要server通知client 2次,在线程spawn时,和线程结束时。

========================================================

Ajax四大原则

经典的Web Application

客户端是傻子,每有请求,server把数据包含在相同的模板中传过来,client把旧的直接丢弃掉,因为他是傻子,所以他不知道这些东东大部分都是相同的。

Ajax web Application:

把Server端的部分逻辑移入客户端,当客户登陆系统是,server提供client一个复杂的内容,包括数据与功能,状态由Server端session移入客户端,当客户请求时,客户端的这个集合决定是自己处理还是提交给server段。

上述总结为(Ajax四大原则):

Ajax原则1:浏览器加载的是应用程序,而不是内容(content

Ajax原则2:服务器传递数据,而不是内容。(这样,登陆时Ajax可能traffic大些,但随着调用,传递的都是数据,则traffic比传统web程序小很多。)(exchange data without reloading the page)

Ajax原则3:用户与应用间的交互是顺畅连贯的

Ajax原则4:规范化的编码。(这是为了解决Javascript被人鄙视诟病的地方)

========================================================

Ajax使用的4种核心技术:

Javascript, CSS, DOM, XMLHttpRequest

—————————————————————————————————–

4种技术如何组合在一起:

JavaScript组织业务逻辑控制程序流(胶水),DOM(页面结构与编程对象之间的映射 layout)与CSS(页面显示风格,look and feel)把数据通过页面展示(表示层),XMLHttpRequest 与Server端进行异步通信。

========================================================

<Div> 中的 id DOM相关,classCSS相关

如何与Sever之间异步传递XML数据:

原始的途径,使用IFrame

参考:http://developer.apple.com/internet/webcontent/iframe.html

A 中的 href 等于 From中的Actiontarget的含义是一样的。

IFrame可以想象为一个看不见的Frame(我们可以定义它为看不见),

更新的技术,使用XMLHttpRequest

========================================================

Http 协议Raw信息:

302, 重定向

200, success

客户端如何知道request已经completed?callback函数,如window.onload, onreadystatecharge

改变思维模式,form不是唯一的UI接口,how about 鼠标点击与移动呢?就像我们平时使用的Desktop程序一样。

========================================================

OO JavaScript

myObject.sayHello=function(){

// my implement of sayHello

}

或者

Function sayHello(){

// sayHello implement

}

myObject.sayHello = sayHello; (注意,不能写作 = sayHello(); 这样会先执行sayHello(),然后把返回值赋给myObject.sayHello)

使用JSON(JavaScript Object Notation)

var myObject = {

sayHello : function(){

// sayHello implement

}

}

使用prototype

使用instanceof (一些Gotcha)

JavaScript的function

========================================================

Ajax Design Patterns:

—————————————————————————————————–

Façade / Adapter 解决浏览器之间的不一致性 (包括操作DOM元素的方法,获得XMLHttpRequest的方法等)

—————————————————————————————————–

Observer 模式管理event handler, 也就是说用Javascript实现Listener:

这种把Listener函数register给Listener容器(的方法,可以方便的添加event handler,是GUI编程的普遍模式

如下图所示:Listener函数就是Observable对象(用java的观点,使用接口编程,实现了Observable接口的对象),Listener容器就是Observer的一部分,当然上述Observer的实现没有使用对象方式。

—————————————————————————————————–

Command模式解决Action Hander的复用问题

Singleton模式解决只能唯一访问的对象。

MVC模式

========================================================

Advertisements

Blog at WordPress.com.
Entries and comments feeds.