《chap12 Ajax》.pptx

第12章 Ajax本课教学内容Ajax概述Ajax开发Ajax简单案例12.1 Ajax 概述——为什么要用Ajax问题 能否在登录提交时，浏览器界面不刷新，提交改为在后台异步进行，当服务器端验证完毕，将结果在界面上原来登录表单所在的位置显示出来？答案：使用Ajax (Asynchronus JavaScript And Xml)好处：页面无需跳转，不会出现大量空白，用户不会出现长时间等待页面中的其他内容，如新闻、广告等都无需更新，避免重复下载（图12-3、12-4）12.1 Ajax 概述——为什么要用Ajax异步(Asynchronous)的概念和同步(Synchronous)相对。当一个异步过程调用发出后，调用者不需要立刻得到结果，可以继续做自己的事情，等到过程调用完毕，再通过回调函数通知调用方。而同步情况下，调用方必须等待对方得到结果，才能继续运行12.1 Ajax概述——Ajax 技术介绍Ajax 并不是一个全新的技术，而是5个老技术的融合使用XMLHttpRequest与服务器进行异步通信基于XHTML和CSS标准的表示使用Document Object Model进行动态显示和交互使用 XML 与 XSLT进行数据互换和操作使用JavaScript绑定一切?Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术12.1 Ajax概述——Ajax 技术介绍原始的实现方式Ajax的实现方式示例12.2 Ajax开发//步骤1//步骤2//步骤3//步骤4//步骤5核心代码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); 该对象是IE浏览器的内置对象，能异步提交数据和获取结果若客户端不是IE浏览器，则采用以下方式获得Script Language=“JavaScript” var xmlHttp = new XMLHttpRequest();/ScriptP165推荐常用框架（含浏览器检查）API解释步骤 2：指定异步提交的目标和提交方式，调用了 xmlHttp 的 open 方法： xmlHttp.open(get, info.jsp, true); 该方法一共 3 个参数参数 1 表示请求的方式，一般有如下选择：get、post参数 2 表示请求的目标是 info.jsp；当然，也可以在此处给 info.jsp 一些参数：“info.jsp?account=0001”参数3 true表示该请求为异步请求（后台提交），否则为同步请求API 解释步骤 3：指定当 xmlHttp 状态改变时，需要进行的处理。处理一般是以响应函数的形式进行： xmlHttp.onreadystatechange=function() { //处理代码 } 在请求中，xmlHttp的状态不断变化，变化的状态保存在xmlHttp的readyState属性中（xmlHttp.readyState），常见的属性值有：0：未初始化状态，对象已创建，尚未调用open方法1：已初始化状态，调用open方法以后2：发送数据状态，调用send方法以后3：数据传送中状态，已经接到部分数据，但尚未接收完全4：完成状态，数据全部接收完全每次状态变化，都会调用响应的函数进行处理API 解释步骤 4：编写处理代码： xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4) { infoDiv.innerHTML = xmlHttp.responseText; } } 当状态为4的时候，将infoDiv内部的HTTP代码变为xmlHttp.responseText字段xmlHttp.responseText：xmlHttp从提交目标中得到的输出的文本内容（即info.jsp的输出）xmlHttp.responseXml：xmlHttp从提交目标得到的XML格式的数据API 解释