电子商务网站开发与管理 教学课件 作者 唐四薪 谭晓兰 屈瑜君 6jQuery Ajax基础.pptVIP

电子商务网站开发与管理 唐四薪 主编 第六章 Ajax技术——基于jQuery 6.1.1 浏览器发送HTTP请求的方法 输入网址(请求载入页面) 提交表单(发送数据并载入页面) 用XMLHttpRequest对象发送异步HTTP请求（页面不会刷新） Ajax概述 Ajax：异步JavaScript和XML（Asynchronous JavaScript and XML） 本质： Ajax：客户端编程和服务器端编程的综合运用 客户端编程：HTML、CSS、JavaScript 服务器端编程：如ASP 传统Web应用程序的不足 一个HTTP请求对应一个页面 加载页面时用户必须等待 Ajax技术（可以解决这两个问题） 异步：煮饭的过程中我们可以继续做菜 浏览器与服务器交互的过程中，用户仍然可以在浏览器上进行其他一些操作。 基于Ajax的Web应用程序 Ajax程序： 在与Web服务器交互的过程中只传输页面上需要做更改的区域，而不传输整个页面； 同时，在与Web服务器交互的过程中，客户端仍然可以在当前页面继续操作，而不必等待服务器的响应。 传统的Web应用程序 传统的Web应用程序：发送请求给服务器→服务器对请求进行处理（此时客户端需等待）→处理完成后服务器发送回全新的页面 基于Ajax的Web应用程序 Ajax技术的优点 ① 更好的用户体验，用户感觉响应速度更快； ② 可以把一些由服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处理，减轻服务器和带宽的负担； ③ Ajax由于可以调用外部数据，能方便地实现网站间数据的共享； ④ 基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序； ⑤ Ajax使Web中的界面与应用分离 9.1.2 载入页面的方法比较 iframe标记 远程脚本技术 Ajax技术 9.1.3 用原始的Ajax技术载入文档 Ajax技术的核心：XMLHttpRequest对象 XMLHttpRequest对象可以在不重新加载页面的情况下更新页面的局部 XMLHttpRequest对象的工作过程 自动售水机 ①投硬币 ②出水 ③准备容器接水 XMLHttpRequest对象的工作过程与自动售货机售货过程的对比 XMLHttpRequest对象的工作过程 创建XMLHttpRequest对象的实例 使用open()方法指定载入文档请求 使用send()方法发送请求——投硬币 使用onreadystatechange事件监听服务器——准备接水 使用DOM元素载入服务器返回的内容——接水 ① 创建XMLHttpRequest对象的实例 创建XMLHttpRequest对象的实例 var xmlHttpReq; if (window.ActiveXObject){ xmlHttpReq = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest){ xmlHttpReq = new XMLHttpRequest(); } ② 使用open()方法指定载入文档请求 使用XMLHttpRequest对象的open()方法指定载入文档的HTTP请求类型、文件名以及是否为异步方式 xmlHttpReq.open(GET, 9-2.html, True); ③ 使用send()方法发送请求 使用open()方法指定了请求后，还要用send()方法将请求发送出去 xmlHttpReq.send(null); ④ 使用onreadystatechange事件监听服务器 用send()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。但是客户端无法确定服务器端什么时候会完成这个请求。这时需要用事件监听机制来捕获请求的状态，XMLHttpRequest对象提供了onreadystatechange事件实现这一功能。 xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack(){ if(xmlHttpReq.readyState == 4 xmlHttpReq.status == 200){document.getElementById(target).innerHTML = xmlHttpReq.responseText; } } 说明 ①onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理