javanet课件12Ajax.pptVIP

第12章 Ajax 本课教学内容 Ajax概述 Ajax开发 Ajax简单案例 Ajax 概述 问题 能否在登录提交时，浏览器界面不刷新，提交改为在后台异步进行，当服务器端验证完毕，将结果在界面上原来登录表单所在的位置显示出来？ 答案：使用Ajax Ajax 概述 异步(Asynchronous)的概念和同步(Synchronous)相对。当一个异步过程调用发出后，调用者不需要立刻得到结果，可以继续做自己的事情，等到过程调用完毕，再通过回调函数通知调用方。而同步情况下，调用方必须等待对方得到结果，才能继续运行 Ajax 技术介绍 Ajax 包含以下五个部分 异步数据获取技术，使用 XMLHttpRequest 基于标准的表示技术，使用 XHTML 与 CSS Ajax 技术介绍 Ajax 包含以下五个部分 动态显示和交互技术，使用 Document Object Model(文档对象模型) 数据互换和操作技术，使用 XML 与 XSLT JavaScript，将以上技术融合在一起 一个简单案例 *具体代码示例详见课本 Ajax 开发 Ajax 核心代码 function showInfo(){ var xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); xmlHttp.open(get, info.jsp, true); xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4) { infoDiv.innerHTML = xmlHttp.responseText; } } xmlHttp.send(); } API 解释 步骤 1：在 IE 中实例化 Msxml2.XMLHTTP 对象： var xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); API 解释 步骤 2：指定异步提交的目标和提交方式，调用了 xmlHttp 的 open 方法： 步骤 2：指定异步提交的目标和提交方式，调用了 xmlHttp 的 open 方法: xmlHttp.open(get, info.jsp, true); 该方法一共 3 个参数，参数 1 表示请求的方式，一般有如下选择：get、post;参数 2 表示请求的目标是 info.jsp；当然，也可以在此处给 info.jsp 一些参数 API 解释 步骤 3：指定当 xmlHttp 状态改变时，需要进行的处理。处理一般是以响应函数的形式进行： xmlHttp.onreadystatechange=function() { //处理代码 } API 解释-步骤 3 常见的 readyState 属性值是： 未初始化状态，对象已创建，尚未调用 open() 已初始化状态，调用 open()方法以后 API 解释-步骤 3 常见的 readyState 属性值是： 发送数据状态，调用 send()方法以后 数据传送中状态，已经接到部分数据，但接收尚未完成 完成状态，数据全部接收完成 API 解释 步骤 4：编写处理代码： xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4) { infoDiv.innerHTML = xmlHttp.responseText; } } API 解释 特别说明 infoDiv 除了具有 innerHTML 属性之外，还有 innerText 属性，表示在该 div 内显示内容时，不考虑其中的 HTML 格式的标签 API 解释 特别说明 除了 div 可以达到动态显示内容的效果之外，HTML 中的 span 也可以做到该效果。不同的是，span 将其内部的内容以文本段显示，div 将其内部的内容以段落显示。一般而言，使用 div 从界面上看到的效果是：内容会另起一行单独显示 API 解释 步骤 5：发出请求，调用 xmlHttp 的 send 函数： xmlHttp.send(); 如果请求方式是 get 的话，send 可以没有参数，或者参数为 null；如果请求方式是 post,可以将需要传送的内容传入 send 函数中以字符串的形式发出 Ajax 简单案例 *具体案例代码详见课本 需要注意的问题 Ajax 具有如下优点 减轻服务器负担，避免整个浏览器窗口刷新时造成的重复请求 带来更好的用户体验 进一步促进页面呈现和数据本身的分离