PHP-Web程序设计与Ajax技术之jQueryAjax基础.pptVIP

PHP Web程序设计与Ajax技术 唐四薪 主编 第9章 基于jQuery的Ajax技术 浏览器发送HTTP请求的三种方式 输入网址(请求载入页面) 提交表单(发送数据并载入页面) 用XMLHttpRequest对象发送异步HTTP请求（页面不会刷新） Ajax概述 Ajax：异步JavaScript和XML（Asynchronous JavaScript and XML） 本质：异步刷新页面的局部区域 10-17.html 10-9-2.html Ajax：客户端编程和服务器端编程的综合运用 客户端编程：HTML、CSS、JavaScript 服务器端编程：如ASP 传统的Web应用程序 传统的Web应用程序：发送请求给服务器→服务器对请求进行处理（此时客户端需等待）→处理完成后服务器发送回全新的页面 传统Web应用程序的不足 一个HTTP请求对应一个页面 加载页面时用户必须等待 Ajax技术（可以解决这两个问题） 异步：煮饭的过程中我们可以继续做菜 浏览器与服务器交互的过程中，用户仍然可以在浏览器上进行其他一些操作。 基于Ajax的Web应用程序 Ajax程序： 在与Web服务器交互的过程中只传输页面上需要做更改的区域，而不传输整个页面； 同时，在与Web服务器交互的过程中，客户端仍然可以在当前页面继续操作，而不必等待服务器的响应。 基于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()方法发送了一个载入文档的请求后，还要准备接收服务器端返回的文档或内容。 这时需要用事件监听机制来捕获请求的状态，onreadystatechange事件实现这一功能。 xmlHttpReq.onreadystatechange=RequestCallBack; function RequestCallBack(){ if(xmlHttpReq.readyState == 4 xmlHttpReq.status == 200){document.getElementById(target).innerHTML = xmlHttpReq.responseText; } } 说明 ①onreadystatechange事件中的事件处理函数只有在readyState属性发生改变时才会触发，readyState的值表示服务器对当前请求的处理状态，可以根据这个值来进行不同的处理。 readyState有五种可取值（0：尚未初始化；1：正在加载；2：加载完毕；3：正在处理；4：处理完毕） status属性表明请求是否已经成功，如果status属性值为200表明一切正常，服务器已成功接收了客户端的请求 说明 ② 服务器在收到客户端的请求后，根据请求返回相应的内容。文本形式: 存储在responseText中，XML格式: 存储在