ajax

Ajax的优缺点

优点

能在不更新整个页面的前提下维护数据 Ajax不需要任何浏览器插件,只需要用户允许 JavaScript在浏览器上执行

Ajax的缺点

缺点：

它可能破坏浏览器后退按钮的正常行为 当中大多数都是在用户单击后退按钮访问历史记录 时,通过建立或使用一个隐藏的IFRAME来重现页 面上的变更(Google Maps ) 使用动态页面更新使得用户难于将某个特定的状态 保存到收藏夹中 大部分都使用URL片断标识符(通常被称为锚点, 即URL中#后面的部分)来保持跟踪,允许用户回 到指定的某个应用程序状态

Ajax的优缺点

用JavaScript作的Ajax引擎,JavaScript的兼容性 和DeBug都是让人头痛的事 Ajax的无刷新重载,由于页面的变化没有刷新重载 那么明显,所以容易给用户带来困扰――用户不太 清楚现在的数据是新的还是已经更新过的; 现有的解决有:在相关位置提示,数据更新的区域 设计得比较明显,数据更新后给用户提示等; 对串流媒体的支持没有FLASH,Java Applet好;

Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间 Ajax的工作原理相当于在用户和服务器之间 加了—个中间层, 加了—个中间层,使用户操作与服务器响应 异步化. 异步化.这样把以前的一些服务器负担的工 作转嫁到客户端, 作转嫁到客户端,利于客户端闲置的处理能 力来处理,减轻服务器和带宽的负担, 力来处理,减轻服务器和带宽的负担,从而 达到节约ISP的空间及带宽租用成本的目的. ISP的空间及带宽租用成本的目的 达到节约ISP的空间及带宽租用成本的目的.

Ajax 交互模型

同步交互模型

异步交互模型

Ajax 应用场景

数据验证

尽可能地快速响应 人总是容易犯错误,减小错误代价

按需取数据

减少数据传输,提高响应速度 不要让我等太久

自动更新页面

以用户中心的设计 有事通知我

数据验证

填写表单内容,需要保证数据的惟一性(例 如新用户注册填写的用户名),因此必须对 用户输入的内容进行数据验证.

按需取数据

Ajax改进分类树的实现机制.在初始化页面时,只 获取第一级子分类的数据并且显示;当用户点开一 级分类的某一节点时,页面会通过Ajax向服务器请 求当前分类所属的二级子分类的所有数据;如果再 继续请求已经呈现的二级分类的某一节点时,再次 向服务器请求当前分类所属的三级子分类的所有数 据,以此类推.页面会根据用户的操作向服务器请 求它所需要的数据,这样就不会存在数据的冗余, 减少了数据下载总量.同时,更新页面时不需要重 载所有内容,只更新需要更新的那部分内容即可, 相对于以前后台处理并且重载的方式,大大缩短了 用户的等待时间.

Ajax包含的内容

Ajax

CSS

DOM

XMLHttpRequest Javascript

各个组成的功能与关系

DOM

一个用HTML或者XHTML构建的网页也可以 看作是一组结构化的数据,这些数据被封装 在DOM中,DOM提供了对于网页中各个对 象的读写支持.

网页中的各种标签,可以表示成一种树状结 构.由各种元素和节点组成,节点还包括很 多的子节点.Javascript引擎通过全局变 量document公开当前的web页面的根节 点.这个变量是所有DOM操作的起点.

DOM

DOM的一些常用函数

创建一个节点 createElement() 例子:document. createElement("select"); 注意:网页中的文字也是节点. 文字节点的创建函数为: createTextNode() 例子:document.createTextNode("hello");

DOM

查找一个节点 getElementById() (通过 查找 通过id查找 通过 查找)

例子: 例子:document. getElementById("userNo");

getElementByTagName()

例子: 例子

:document. getElementByTagName("userNo"); 另外,每一个 节点都只有不多于1个的父节点 另外,每一个DOM节点都只有不多于 个的父节点,但是可以有 节点都只有不多于 个的父节点, 任意多个子节点,可以用parentNode和childNodes来访问他们 任意多个子节点,可以用 和 来访问他们 Var children = empty.childNodes; for(var i=0;i

DOM

新增一个子节点 appendChild()

例子:el. appendChild(item);

删除一个子节点 removeChild()

例子:el. removeChild(item);

DOM

innerText属性与 属性与innerHTML属性 属性与 属性

innerText用来修改起始卷标和结束卷标之 用来修改起始卷标和结束卷标之 间的文字. 间的文字 在实现

hello 如:DOM在实现 在实现 world!这样一个标签时候 是用 这样一个标签时候,是用 这样一个标签时候 是用: oDiv.AppendChild(document.creat eTextNode("hello world!")); 但是如果用innerText只需要这么做 只需要这么做: 但是如果用 只需要这么做 oDiv.innerText="hello world!"; 注意:innerText会将大于号 小于号 引 会将大于号,小于号 注意 会将大于号 小于号,引 等符号自动进行html编码 所以不需要 编码,所以不需要 号,&等符号自动进行 等符号自动进行 编码 队这些特殊字符进行任何处理

DOM

innerHTML方法 方法

直接给元素分配HTML字符串 字符串 直接给元素分配 如:oDiv.innerHTML = "" 将会直接在div中建立一个显示为 "hi"的按 将会直接在 中建立一个显示为 的按 钮. 注意: 注意 同样,也可以用 也可以用innerText和innerHTML 同样 也可以用 和 来获取某一元素的值. 来获取某一元素的值

XMLHttpRequest对象

XMLHttpRequest对象 对象

XMLHttpRequest对象不是 对象不是web浏览器中的 对象不是 浏览器中的 DOM标准扩展 而是源自微软私有的 标准扩展, 标准扩展 ActiveX组件 ActiveX组件.可以在浏览器中作为 组件.可以在浏览器中作为 Javascript对象来访问 而其它浏览器都依 对象来访问. 对象来访问 照类似的功能和API调用 实现了自己的原生 调用,实现了自己的原生 照类似的功能和 调用 对象. 对象

XMLHttpRequest 对象进行异步请求的 流程图

1. 2. 3. 4. 5. 6. 7.

XMLHttpRequest 对象是浏览器中提供的 JavaScript 对象.(Microsoft 和 Mozilla 浏览器 各有自已的版本).该流程如下所示: 页面调用某个 JavaScript. JavaScript 函数创建 XMLHttpRequest 对象.这包 括设置要调用的 URL 和 HTTP 请求参数. JavaScript 函数注册回调处理程序.HTTP 响应调用 此回调处理程序. JavaScript 函数调用 XMLHttpRequest 对象上的 send 方法,该方法接着将 HTTP 请求发送到服务器. XMLHttpRequest 对象立即将控制返回到 JavaScript 方法.此时,用户可以继续使用该页面. 稍后,HTTP 服务器通过调用回调处理程序返回 HTTP 响应. 回调处理程序可以访问 HTML DOM 对象.它可以动 态更新页面元素,而无需中断用户(除非您碰巧更新用 户正在使用的 DOM 对象). 通过异步更新页面的 DOM,还可以在本地进行异步请 求.

XMLHttpRequest对象

创建XMLHttpRequest对象 对象 创建

function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }

XMLHttpRequest对象

function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function countall(i,userNo) { createXMLHttpRequest(); var item = document.getElementById("item").value; var url = "/Mywebpath/testServlet?item="+ item ; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); }

XMLHttpRequest对象

function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function countall(i,userNo) { createXMLHttpRequest(); var item = document.getElementById("item").value; var url = "/Mywebpath/testServlet?item="+ item ; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { …… }

XMLHttpRequest对象

onreadystatechange 每次状态改变所触发事件的事件处理程序 readyState 对象状态值: 对象状态值: 0 = 未初始化(uninitialized) 未初始化( ) 1 = 正在加载(loading) 正在加载(loading) 2 = 加载完毕(loaded) 加载完毕( ) 3 = 交互(interactive) 交互( ) 4 = 完成(complete) 完成( ) status 从服务器返回的数字代码,比如404(未找到)或200 从服务器返回的数字代码,比如 (未找到) 就绪) (就绪)

发出 Ajax 请求

function callServer() { // Get the city and state from the web form var city = document.getElementById("city").value; var state = document.getElementById("state").value; // Only go on if there are values for both fields if ((city == null) || (city == "")) { return; } if ((state == null) || (state == "")) { return; } // Build the URL to connect to var url = "/scripts/get 

ZipCode.php?city=" + escape(city) + "&state=" + escape(state); // Open a connection to the server xmlHttp.open("GET", url, true); // Setup a function for the server to run when it's done xmlHttp.onreadystatechange = updatePage; // Send the request xmlHttp.send(null); }

处理响应

现在要面对服务器的响应了.现在只要知道两点: 什么也不要做,直到 xmlHttp.readyState 属性 的值等于 4. 服务器将把响应填充到 xmlHttp.responseText 属性中. 其中的第一点,即就绪状态,将在下一篇文章中详 细讨论,您将进一步了解 HTTP 请求的阶段,可 能比您设想的还多.现在只要检查一个特定的值 (4)就可以了(下一期文章中还有更多的值要介 绍).第二点,使用 xmlHttp.responseText 属 性获得服务器的响应,这很简单.

处理服务器响应

function updatePage() { if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; document.getElementById("zipCode").v alue = response; } }

Ajax 框架

Ajax Toolkit Framework(ATF) Rich Ajax Platform Dojo toolkit JSON-RPC Rico Zend 框架 Google Web Toolkit(GWT) Direct Web Remoting(DWR) Persevere 持久对象框架 jQuery AjaxTags Jpa2web Prototype

Ajax 框架

GWT Google Web Toolkit (GWT) 是 一个Java软件开发框架用于开发类似 一个 软件开发框架用于开发类似 于 Google Maps 和 Gmail 的 AJAX 应 用 程 序 . GWT 的 设 计 参 考 Java AWT包设计,类命名规则,接口设计, 包设计, 包设计 类命名规则,接口设计, 事件监听等.你可以用Java编程语言 事件监听等.你可以用 编程语言 开发你的界面,然后用 然后用GWT编译器将 开发你的界面 然后用 编译器将 Java 类 转 换 成 适 合 浏 览 器 执 行 的 JavaScript与HTML.Eclipse开发 与 . 开发 插件Googlipse. . 插件

Ajax 框架

Dojo Dojo是一个非常强大面向对象,开源 是一个非常强大面向对象, 是一个非常强大面向对象 工具箱. 的JavaScript工具箱.它为开发 工具箱 Web胖客户端程序提供了一套完整的 胖客户端程序提供了一套完整的 Widget和一些特效操作. 和一些特效操作. 和一些特效操作

Ajax 框架

DWR DWR(Direct Web Remoting)是一个 是一个WEB 是一个 远程调用框架.利用这个框架可以让 利用这个框架可以让AJAX开发变 远程调用框架 利用这个框架可以让 开发变 得很简单.利用 利用DWR可以在客户端利用 得很简单 利用 可以在客户端利用 JavaScript直接调用服务端的 直接调用服务端的Java方法并返回 直接调用服务端的 方法并返回 值给JavaScript就好像直接本地客户端调用一样 值给 就好像直接本地客户端调用一样 (DWR根据 根据Java类来动态生成 类来动态生成JavaScrip代码 代码). 根据 类来动态生成 代码 它的最新版本DWR0.6添加许多特性如 支持 添加许多特性如:支持 它的最新版本 添加许多特性,如 Dom Trees的自动配置 支持 的自动配置,支持 的自动配置 Spring(JavaScript远程调用 远程调用spring bean), 远程调用 更好浏览器支持,还支持一个可选的 还支持一个可选的commons更好浏览器支持 还支持一个可选的 logging日记操作 日记操作. 日记操作

Ajax开发

Java 和 Ajax 开发 JSF 和 Ajax 开发 PHP 和 Ajax 开发 Ruby on Rails 和Ajax开发 Grails 和 Ajax 开发

Ajax开发

javascript对象

类的声明: function test1(){ var _test = "test"; //私有变量的声明 this.p1 = "p1" ; //公有属性 this.p2 = "p2"; test1.staticProp = "staticProp test";//静态属性 test1.staticMethod = function(){ alert(test1.staticProp); } this.f1 = function(){ //方法 alert("f1"); } } var t = new test1; alert(t.p1); document.write(t.p2+"+"+test1.staticProp+"+"+t.f1()); //-->

selected 属性规定在页面加载时预先选定该选项。

被预选的选项会显示在下拉列表最前面的位置。

也可以在页面加载后通过 JavaScript 设置 selected 属性。

代码：

  Volvo
  Saab
  Mercedes
  Audi

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 或 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

代码：

 

I have a bike

 

I have a car

 

请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。

readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

readonly 属性可与 或 配合使用。

代码：

 
 

Name:

 

Country:   value="China" readonly="readonly" />

 
 

请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 一起使用。

代码：

 

First name:

 

Last name:

 

请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。

noresize 属性规定用户无法调整框架的大小。

默认地，可以通过拖动框架之间的“墙壁”来改变框架的大小，该属性可以锁定框架的大小。

代码：