Ajax技术原理及实现

总结

火龙果整理
AJAX的问题 1、用JavaScript作的Ajax引擎，JavaScript的兼容 性和调试都是让人头痛的事； 2、Ajax的无刷新重载，由于页面的变化没有刷新 重载那么明显，所以容易给用户带来困扰――用 户不太清楚现在的数据是新的还是已经更新过的； 现有的解决有：在相关位置提示、数据更新的区 域设计得比较明显、数据更新后给用户提示等； 3、对流媒体的支持没有FLASH、Java Applet好；
火龙果整理
创建跨浏览器XMLHttpReuest
火龙果整理
创建XMLHttpRequest

火龙果整理

建立一个变量xmlHttp来引用即将创建的 XMLHttpRequest对象。 判断是否支持XMLHttpRequest对象 1、支持则 直接创建XMLHttpRequest对 象（非IE浏览器） 2、不支持则尝试Msxml2.XMLHTTP对象 创建。 3、如果失败，再尝试Microsoft.XMLHTTP 对象。
火龙果整理
getElementsByTagName() 返回文档中具有指定标记名的所有Element节点。
ELEMENT元素
属性 tagName
方法 getAttribute() getAttributeNode()
火龙果整理
描述 元素的标记名称，比如<p>元素为P。HTML文档返回的 tagName均为大写。
核心技术

火龙果整理

Document Object Model XMLHttp
Document Object Model

火龙果整理
文档对象模型（DOM）是表示文档（比如 HTML和XML）和访问、操作构成文档的各 种元素的应用程序接口（API）。一般的， 支持Javascript的所有浏览器都支持DOM。 本次所涉及的DOM，是指W3C定义的标准 的文档对象模型，它以树形结构表示 HTML和XML文档，定义了遍历这个树和检 查、修改树的节点的方法和属性。
火龙果整理
元素节点 节点属性 文本节点 document 注释文本 document片 断
Node.DOCUMENT_FRAGMEN 11 T_NODE
Document对象常用方法
方法 createAttribute() createComment() createElement() createTextNode() getElementById() 描述 用指定的名字创建新的Attr节点。 用指定的字符串创建新的Comment节点。 用指定的标记名创建新的Element节点。 用指定的文本创建新的TextNode节点。 返回文档中具有指定id属性的Element节点。
removeChild() replaceChild()
Node与Element的区别

火龙果整理


Element肯定是Node，但Node不一定是 Element，比如<td>textNode</td> Element是元素, 必须是含有完整信息的节 点(Node),相对于Xml结构而言 Node是节点,相对于树结构而言
XMLHttpRequest属性
火龙果整理
处理响应
火龙果整理
readyState

火龙果整理




0：请求未初始化（还没有调用 open()）。 1：请求已经建立，但是还没有发送（还没有调 用 send()）。 2：请求已发送，正在处理中（通常现在可以从 响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可 用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响 应了。
描述 以字符串形式返回指定属性的值。 以Attr节点的形式返回指定属性的值。
getElementsByTagName() 返回一个Node数组，包含具有指定标记名的所有 Element节点的子孙节点，其顺序为在文档中出现的顺 序。 hasAttribute() removeAttribute() removeAttributeNode() setAttribute() setAttributeNode() 如果该元素具有指定名字的属性，则返回true。 从元素中删除指定的属性。 从元素的属性列表中删除指定的Attr节点。 把指定的属性设置为指定的字符串值，如果该属性不 存在则添加一个新属性。 把指定的Attr节点添加到该元素的属性列表中。
核心技术

火龙果整理

Document Object Model XMLHttp
XML特点是无需刷新页面便 可向服务器传输或读写数据(又称无刷新更 新页面),这一特点主要得益于XMLHTTP组 件XMLHTTPRequest对象。这样就可以向 再发桌面应用程序只同服务器进行数据层 面的交换,而不用每次都刷新界面也不用每 次将数据处理的工作提交给服务器来做,这 样即减轻了服务器的负担又加快了响应速 度、缩短了用户等候时间。
总结
总结

火龙果整理
AJAX的优势：
1、减轻服务器的负担。因为Ajax的根本理念是“按需取 数据”，所以最大可能在减少了冗余请求和响影对服务 器造成的负担； 2、无刷新更新页面，减少用户实际和心理等待时间； 3、更好的用户体验； 4、也可以把以前的一些服务器负担的工作转嫁到客户 端，利于客户端闲置的处理能力来处理，减轻服务器和 带宽的负担，节约空间和带宽租用成本； 5、Ajax由于可以调用外部数据； 6、基于标准化的并被广泛支持和技术，并且不需要插 件或下载小程序； 7、Ajax使WEB中的界面与应用分离（也可以说是数据与 呈现分离）；
DOM眼中的HTML文档
火龙果整理
HTML文档的节点
接口 Element Attr Text Document Comment DocumentFragment nodeType常量 Node.ELEMENT_NODE Node.ATTRIBUTE_NODE Node.TEXT_NODE Node.DOCUMENT_NODE MENT_NODE nodeType 1 2 3 9 8 备注
火龙果整理
Ajax技术原理及实现
主讲：黄 平
主要内容

火龙果整理


AJAX概述 AJAX基本原理 AJAX核心技术 1. 文档对象模型DOM 2. XMLHttpRequest AJAX数据传输 流行AJAX框架原理介绍及使用
AJAX概述
传统Web应用
火龙果整理
基于AJAX的WEB应用
火龙果整理
两种模式比较
火龙果整理
两种模式比较
火龙果整理
AJAX的好处

火龙果整理


AJAX的特点在于异步交互，动态更新web 页面 快速响应:大大缩短浏览器端等待的时间 按需取数据 实时更新:通过Ajax引擎在后台进行定时 的轮询，向服务器发送请求，查看是否有 最新的消息。如果有则将新的数据（而不 是所有数据）下载并且在页面上进行动态 的更新，通过一定的方式通知用户
AJAX技术组合包含:


基于XHTML和CSS标准呈现 使用Document Object Model进行动态显示和 交互 使用XMLHttpRequest与服务器进行异步通信 使用XML和XSLT进行数据交换与处理 使用JavaScript绑定和处理所有数据
AJAX 基本原理
火龙果整理

火龙果整理

Asynchronous JavaScript and XML的 缩写，异步JAVASCRIPT及XML技术 AJAX 不是一种技术 AJAX是技术组合，通过异步交互，实 现页面无刷新，使浏览器为用户提供 更为自然的浏览体验 。
什么是AJAX

火龙果整理
火龙果整理
AJAX概述
AJAX基础

火龙果整理
什么是AJAX 为什么要用AJAX AJAX学习需要掌握的技术 1、JAVASCRIPT 2、DOM 3、XMLHttpRequest 4、Web服务器端开发语言 5、HTML / CSS
什么是AJAX
Node对象常用属性
属性 attributes childNodes firstChild lastChild nextSibling nodeName nodeType parentNode previousSibling 描述
火龙果整理
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。 以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数 组。 以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为 null。 以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为 null。 以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点， 则返回null。 节点的名字，Element节点则代表Element的标记名称。 代表节点的类型。 以Node的形式返回当前节点的父节点。如果没有父节点，则为null。 以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这 样的节点，则返回null。
Node对象常用方法
方法 appendChild() cloneNode() hasChildNodes() insertBefore() 描述
火龙果整理
通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。 复制当前节点，或者复制当前节点以及它的所有子孙节点。 如果当前节点拥有子节点，则将返回true。 给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节 点已经存在，则删除之再插入到它的位置。 从文档树中删除并返回指定的子节点。 从文档树中删除并返回指定的子节点，用另一个节点替换它。
XMLHttpRequest方法
火龙果整理
发送AJAX请求
火龙果整理
请求流程


火龙果整理

从 Web 表单中获取需要的数据。 建立要连接的 URL。 打开到服务器的连接。(open) 设置服务器在完成后要运行的函数。 (callback) 发送请求。(send)
XMLHttpRequest对象
最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在 Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可 以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务 器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦, 它还可以排除下载冗余HTML的需要,从而提高进程的速度。 Mozilla等其他浏览器厂商做出的回应是创建它自己的继承XML代理 类：XMLHttpRequest类。 XMLHttpRequest对象和XMLHTTP组件很相似。方法和属性也类似, 只是有一小部分属性不支持 XMLHttpRequest对象在JS中的应用 var xmlhttp = new XMLHttpRequest(); 微软的XMLHTTP组件在JS中的应用 var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);