网站设计与建设-第17章_Ajax设计方法.pptVIP

普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 《 网 站 设 计 与 建 设 》 《 网 站 设 计 与 建 设 》 普通高等教育“十一五”国家级规划教材 重点大学计算机专业系列教材 山东大学计算机科学与技术学院 第17章 Ajax设计方法 * Ajax概述 Ajax工作原理 Ajax实现方法介绍 概 述 1.什么是Ajax？ Asynchronous JavaScript and XML(以及 DHTML等)的缩写，意为异步JavaScript和XML。 Ajax不是一种新的技术，而是多种原有技术的集合（由HTML、JavaScript? 技术、DHTML 和 DOM 组成）。 它可以提供介于桌面应用程序和Web应用程序的中间选择，构建更为动态和响应更为灵敏的Web应用程序。 Ajax是一种客户端设计方法，可以与J2EE、.NET、PHP、Ruby和CGI脚本交互，它并不关心服务器是什么。 Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。 刷新表单不需要刷新整个网页页面。 * 2.Ajax工作原理 * 3.XMLHttpRequest 当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。 创建XMLHttpRequest对象 script language=javascript type=text/javascript var xmlHttp = new XMLHttpRequest(); /script * 4. getElementById() 方法 通过getElementById() 方法使用 JavaScript 代码捕获和设置字段值 //获取 phone 字段的值赋给变量phone var phone=document.getElementById(“phone”).value; // 将 response 值赋给表单中的单元格 document.getElementById(order).value=response[0]; document.getElementById(address).value=response[1]; * var xmlHttp = false; /*@cc_on @*/ /*@if (@_jscript_version = 5) try { xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); } catch (e) { try { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } catch (e2) { xmlHttp = false; } } @end @*/ if (!xmlHttp typeof XMLHttpRequest != undefined) { xmlHttp = new XMLHttpRequest(); } * 5.创建 XMLHttpRequest 对象 处理 Mozilla 和非 Microsoft 浏览器获取XMLHttpRequest 使用 Microsoft 浏览器获取XMLHttpRequest * 6.发出Ajax请求 function callServer() { // 从Web表单中获取city 和 state 单元格的值 var city = document.getElementById(city).value; var state = document.getElementById(state).value; // 仅当两个单元格的值不为空时，继续执行下面的代码 if ((city == null) || (city == )) return; if ((state == null) || (state == )) return; // 建立URL，escape 函数是一个顶级 JavaScript 函数，可将属性值添加到URL中 var url = /scripts/getZipCode.php?city= + escape(city) + state= + escape(state); // 打开一个与服务器的连接 xmlHttp.open(GET, url, true); // 设置结束后服务器运行的函数名 xmlHttp.onreadystatechange = updatePage; // 发送这个请求 xmlHttp.send(null); } True： 异步