第25节：简单的Ajax应用示例.ppt

第25节：简单的Ajax应用示例 11.1-11.2简单Ajax应用示例 11.3-11.4使用Ajax标记 回顾struts结构 本节重点 Ajax基本概念 Ajax实现方法 Struts中的ajax Ajax基本概念 实现页面特定区域更新，而不是整个页面的更新。 1、脚本控制与服务端的交互 2、脚本控制页面元素的显示 Ajax背景 ajax技术的流行得益于google的大力推广，正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用，催生了ajax的流行。 早在97年，微软便已经发明了ajax中的关键技术，并且在99年IE5推出之时，它便开始支持XmlHttpRequest对象，并且微软之前已经开始在它的一些产品中应用ajax，比如说MSDN网站菜单中的一些应用。遗憾的是，将它搁置起来。 Ajax背景 ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。 异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。 Ajax与以前动态网页类似udp与Tcp的区别 ajax所包含的技术 ajax并非一种新的技术，而是几种原有技术的结合体。 它由下列技术组合而成 ： 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑定和调用。 在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。 ajax原理 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 XmlHttpRequest对象 属性有： onreadystatechange 每次状态改变所触发事件的事件处理程序。 responseText 从服务器进程返回数据的字符串形式。 responseXML 从服务器进程返回的DOM兼容的文档数据对象。 status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪） status Text 伴随状态码的字符串信息 readyState 对象状态值 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用，但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据 示例表单处理 Javascript脚本处理过程 1、创建XMLHttpRequest 2、注册状态改变时事件处理方法 3、判断请求结束时，处理responseText、responseXML 示例表单处理 示例表单处理 1、action check负责用户名成的检查，其return的值不起作用，可以为null； 2、execute中打开response输出流，在输出流上放置返回的字符串。 3、XMLHttpRequest的responseText，或者responseXML就是得到的服务端返回的response流中的内容。 ajax的优点 1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 ajax的缺点 1、ajax干掉了back按钮，即对浏览器后退机制的破坏。 2、安全问题，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。 3、对有哪些信誉好的足球投注网站引擎的支持比较弱。 4、破坏了程序的异常机制。 小结