第四章 Ajax相关技术.ppt

第四章 Ajax相关技术 什么是Ajax Ajax的英文名为Asynchronous JavaScript and XML, 即“异步JavaScript和XML” “异步”可以使Ajax实现无刷新的对页面进行数据更新 Ajax相关技术 使用XHTML + CSS来表示信息 使用JavaScript操纵DOM(Document Object Model)进行动态显示及交互 使用XML和XSLT进行数据交换和相关操作 使用XMLHttpRequest对象与Web服务器进行异步数据交换 使用JavaScript将所以的东西绑定起来 技术组成图示 7项技术简介 XMLHttpRequest对象 Ajax无刷新与服务器交互数据 基于浏览器内置对象XMLHttpRequest对象 JavaScript 事件驱动的编程语言 在浏览器端解释执行 增加了交互性 DOM Document Object Model文档对象模型 通过程序或者脚本动态访问和更新文档内容、样式和结构 DOM定义了处理执行客户端浏览器中所显示的文档途径 XML 传输数据的统一格式 可以通过DOM访问 方便的访问方式 XHTML 对HTML4的重述、延伸和扩展 XHTML文档类型是基于XML的，符合XML语法 XHTML基于原有的HTML 既可以使用HTML的文档对象模型DOM，也可以使用XML的文档对象模块 CSS CSS即Cascading Style Sheets 层叠样式单 对网页风格进行设计 统一控制HTML中的标记的显示属性 有效的对页面布局、字体、颜色、背景和其它效果实现精确控制 使多个页面具有统一风格 XSLT XSLT由XSL (eXtensible Stylesheet Language)发展而来 XSL将XML数据翻译成HTML或其它格式的语言 XSLT具有强大的数据转换功能 Ajax应用场合 使用网页表单与服务器进行交互 页面随用户的输入更新. 例如: 判断用户名是否重名 根据用户输入进行更新表单 提交简单数据 使用网页的方式进行简单的数据提交 如民意调查、多页面选择答案 页面无刷新与服务器同步数据 无明显刷新下更新信息 网页形式聊天室 实况赛事 即时新闻报道 页面输入时的数据交互 用户在页面上输入数据是需要实时将数据从客户端端送至服务器,并返回相应的提示信息或结果 例如GOOGLE的提示 深层次树的显示与控制 网页中数据的处理 例如显示多列数据并按某列排序等应用 XMLHttpRequest对象 XMLHttpRequest是整个Ajax技术的最核心的一个对象。客户端与服务器的交互都是通过这个对象来进行的 XMLHttpRequest 对象 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。 XMLHttpRequest 对象 尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。 XMLHttpRequest对象 script language=javascript !-- var xmlHttp; var i=0; function createXMLHttpRequest( ){ if (window.ActiveXObject) xmlHttp=new ActiveXObject(Microsoft.XMLHTTP); else if (window.XMLHttpRequest) xmlHttp=new XMLHttpRequest( ); } //-- /script 构造XMLHttpRequest对象 window.ActiveXObject( ) 对应于IE浏览器 XMLHttpRequest( ) 对应于FireFox 和 Mozila XMLHttpRequest对象的属性 属性 readyState HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。 5 个状态中每一个都有一个相关联的非正式的名称，下页表格中列出了状态、名称和含义 readystate请求的状态 0：未初始化 1：正在加载 2：加载完成 3：正在交互（发送请求成功，正在接收响应数据） 4：结束（数据已经成功接收） readyState 的值不会递减，除非当一个请求在处理