Ajax ppt
合集下载
Ajax程序设计(第九讲)PPT教学课件
➢oXMLHttpRequest.send(varBody);
✓varBody: variant型, 可以是字符串,DOM树,或其他任意数
据流 2020/12/10
7
✓同步请求,则要等请求完成之后或超时后才返回;期间页面 程序中断执行,没有任何响应; ✓异步请求,则立即返回,页面程序不会中断; ✓发送数据为字符串时,回应数据编码为utf-8,可以在文档类 型头设置charset的字符类型; ✓发送数据为XML DOM object时, 回应数据编码,为XML中 指定的编码,若没有指定,则默认为utf-8; ✓使用get请求时,或不要发送数据时,用send(null)或send() 即可.
2020/12/10
9
➢常用的HTTP状态码
✓200：OK，请求成功返回;
✓400：Bad Request，请求失败;
✓401：Unauthorized, 请求未被授权;
✓403：Forbidden，请求被禁用;
✓404：Not Found，请求数据源不存在;
✓408：Request Timeout，请求超时;
2020/12/10
8
➢3(数据传送中): 已经开始接收数据.但响应数据和
HTTP头信息不全,此时尝试获取数据会出现错误;
➢4(完成):数据接收完毕;
EX: HelloWorld(AsyncTest.html)
5. 指定请求状态改变时的事件处理句柄
XMLHttpRequest对象的readyState发生变化时，会触
true); open方法的3个参数
➢‘GET’: 定义请求的方法为get方法; ➢’service/hello_world.php’: 定义了请求的目标地 址; ➢true: 定义了请求为异步请求（常省略）; 完整的open方法原型
AJAX基础教程PPT课件
▪ 减轻服务器的负担，AJAX一般只从服务器获取只需要 的数据。
▪ 无刷新页面更新，减少用户等待时间。 ▪ 更好的客户体验，可以将一些服务器的工作转移到客户
端完成，节约网络资源，提高用户体验。 ▪ 基于标准化的对象，不需要安装特定的插件绝大多数的
游览器都能执行 ▪ 彻底将页面与数据分离。
9
9
.
AJAX应用开发
AJAX
1
.
目标
❖ Ajax简介 ❖ Ajax原理 ❖ XMLHttpRequest的使用 ❖ DOM简介 ❖ 利用DOM操纵HTML文档 ❖ Ajax请求响应使用XML文档
2
2
.
AJAX简介
❖AJAX（Asynchronous JavaScript and XML）它 是一种由多种技术组合的技术。
❖ 不同的readyState值对应响应的不同阶段，当 readyState的值为4时表示服务器响应完成。
❖ 示例代码中根据返回的状态及响应的结果状态， 执行处理。
if (http_request.readyState == 4) { // 信息已经返回，可以开始处理
if (http_request.status == 200) { // 页面正常，可以开始处理信息
❖ 包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest 等
▪ XHTML，CSS用于呈现 ▪ DOM实现动态显示和交互 ▪ XML和XSTL进行数据交换与处理 ▪ XMLHttpRequest对象用于进行异步数据读取 ▪ Javascript绑定和处理所有数据
true);
open方法的三个参数分别为：
请求的方式GET,POST,HEAD 请求的路径 是否异步请求，如果指定为异步，在请求发送后，浏
▪ 无刷新页面更新，减少用户等待时间。 ▪ 更好的客户体验，可以将一些服务器的工作转移到客户
端完成，节约网络资源，提高用户体验。 ▪ 基于标准化的对象，不需要安装特定的插件绝大多数的
游览器都能执行 ▪ 彻底将页面与数据分离。
9
9
.
AJAX应用开发
AJAX
1
.
目标
❖ Ajax简介 ❖ Ajax原理 ❖ XMLHttpRequest的使用 ❖ DOM简介 ❖ 利用DOM操纵HTML文档 ❖ Ajax请求响应使用XML文档
2
2
.
AJAX简介
❖AJAX（Asynchronous JavaScript and XML）它 是一种由多种技术组合的技术。
❖ 不同的readyState值对应响应的不同阶段，当 readyState的值为4时表示服务器响应完成。
❖ 示例代码中根据返回的状态及响应的结果状态， 执行处理。
if (http_request.readyState == 4) { // 信息已经返回，可以开始处理
if (http_request.status == 200) { // 页面正常，可以开始处理信息
❖ 包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest 等
▪ XHTML，CSS用于呈现 ▪ DOM实现动态显示和交互 ▪ XML和XSTL进行数据交换与处理 ▪ XMLHttpRequest对象用于进行异步数据读取 ▪ Javascript绑定和处理所有数据
true);
open方法的三个参数分别为：
请求的方式GET,POST,HEAD 请求的路径 是否异步请求，如果指定为异步，在请求发送后，浏
Ajax技术PPT
Ajax工作机制图 Ajax工作机制图
浏览器客户端 用户接口
Js调用 调用 XML/JSON数据 数据
Ajax引擎
HTTP请求
XML/JSON数据
HTTP传输
服务器客户端 Web服务器
属性存储， 属性存储， 后端处理， 后端处理， 遗留系统
Ajax工作机制图 Ajax工作机制图
浏览器客户端
用户接口 用户操作
Xml属性 Xml属性
XML元素可以拥有属性。跟HTML一样，属 性通常包含一些关于元素的额外信息。 使用子元素还是使用属性 数据既可以存储在子元素中也可以存储 在属性中。 应该避免使用属性么？ 属性不能包含多个值（子元素可以）。 属性不容易扩展。 属性不能够描述结构（子元素可以）。 属性很难被程序代码处理。 属性值很难通过DTD进行测试。
Ajax
讲师:王雨宁
Ajax概述 Ajax概述
06年google公司推出了googlemaps地图检索系统。引 爆web开发的新热潮----ajax。 什么是ajax？
Asynchronous JAVAScript Xml Ajax是基于服务器的页面异步处理技术。也就是改变了古老的 用户请求-等待-响应这种web交互模式。
输 入 输 出 输 入 输 出 输 入 输 出 输 入 输 出
Ajax引擎 引擎 用户端处理
数 据 数 据 传 输 数 据 传 输 数 据 传 输 数 据 传 输 数 据 传 输
时间
传 输
服务器客户端
服务器 端处理 服务器 端处理 服务器 端处理
总结：显示和处理相分离一个有良心的it人 总结：显示和处理相分离一个有良心的it人 不二的选择。------GoogleEath开发总监. 不二的选择。------GoogleEath开发总监.
Ajax
AJAX完成验证用户名
4、编写回调的js（判断readyState，判断status，接 收返回结果xmlHttp.responseText，进行处理）
function check() { // 提前先准备好验证的结果。 return idFlag; } 修改form表单，添加onsubmit拦截非法数据 <form action=“LoginServlet?status=insert" method="post" onsubmit="return check();">
AJAX完成验证用户名
2、编写js操作（定义xmlHttp，编写创建方法，固定的4个 步骤调用）
function checkid(userid) { // 1： 创建核心对象 createXMLHttp(); // 2：设置提交方式和提交路径。 xmlHttp.open("post",“LoginServlet? status=checkid&userid="+userid); // 3：设置回调函数，类似一个事件，当Servlet返回数据后， 执行checkidCallback方法。 xmlHttp.onreadystatechange= checkidCallback; // 4：提交 xmlHttp.send(); } function checkidCallback () { } </script>
9.1 Ajax介绍
如果可以把请求与回应改为非同步进行，也就是发送请 求后，浏览器不需要苦等服务器的回应，而是让使用者对浏 览器中的Web应用程序进行其他操作。当服务器处理请求并 送出回应时，计算机接收到回应，再呼叫浏览器所设定的对 应动作进行处理，如图9.2所示。
《Ajax教程之一》课件
02
Ajax基础知识
XMLHttpRequest对象
XMLHttpRequest对象用于在后台与服务器交换数据 。
它提供了一种方法，可以在不重新加载整个页面的情况 下，与服务器交换数据并更新部分网页内容。
XMLHttpRequest对象可以读取从服务器返回的数据， 并将这些数据显示在网页上。
发送请求
Ajax的应用场景
要点一
总结词
Ajax适用于需要频繁与服务器交互的网页应用，如动态表 单验证、实时搜索、聊天室、在线编辑器等。
要点二
详细描述
在动态表单验证中，Ajax可以用于实时验证用户输入的数 据，提高表单提交的效率和用户体验。实时搜索中，Ajax 可以实现动态搜索结果，提高搜索的准确性和效率。在聊 天室中，Ajax可以实现实时更新聊天内容，提高聊天的实 时性和用户体验。在线编辑器中，Ajax可以实现实时保存 和预览功能，提高编辑的效率和用户体验。
详细描述
在Ajax中，发送POST请求与发送GET请求类似，同样使用XMLHttpRequest对象的open()方法指定 请求类型为"POST"，然后使用send()方法发送请求。不同的是，POST请求需要将数据包含在请求体 中，可以通过设置send()方法的参数或者使用FormData接口来构建请求体。
05
总结与展望
Ajax的优势与不足
优势 无需重新加载整个页面，提高用户体验；
减轻服务器负担，提高网站性能；
Ajax的优势与不足
• 实现异步数据交互，提高数据传输效率。
Ajax的优势与不足
01
不足
02
03
04
需要复杂的编程技术，学习成 本高；
存在跨域问题，限制了数据交 互的范围；
[计算机硬件及网络]第12讲_AJAXppt课件
![[计算机硬件及网络]第12讲_AJAXppt课件](https://img.taocdn.com/s3/m/fa29c1f36c175f0e7dd13783.png)
XML Request
Ajax技术之中，最核心的技术就是XML Request，它是一个具有应用程序接口的 JavaScript对象，可以使用超文本传输协议〔 〕 连接一个效劳器，是微软公司为了满足开发者的 需要，于1999年在IE 5.0阅读器中率先推出的。 如今许多阅读器都对其提供了支持，不过实现方 式与IE有所不同。
4.3 AJAX相关技术简介
if 〔window.XML Request〕 { // Mozilla、Safari... _request = new XML Request〔〕;
} else if 〔window.ActiveXObject〕 { // IE阅读器 try { _request = new ActiveXObject〔"Msxml2.XML "〕; } catch 〔e〕 { try { _request = new ActiveXObject〔"Microsoft.XML "〕; } catch 〔e〕 {} }
4.3 AJAX相关技术简介
Ajax使用到的关键技术： 使用XHTML〔HTML〕和CSS构建标准化的 展示层 使用DOM进展动态显示和交互 使用XML和XSLT进展数据交换和处理 使用XML Request发送恳求和异步获取数 据 使用JavaScript将以上技术交融一起
4.3 AJAX相关技术简介
4.2 AJAX带来的优势
HTTP请求
用户界面
HTTP（S）协 议传输
客 户 端
HTML+CSS数据
Web服务器
服
务
器
数据存储，后端处理，继承系统
端
4.2 AJAX带来的优势
由于恳求是同步的，客户时机一直等待效劳器的响应。 等待期间，客户端程序类似于冻结状态，用户不能进展下 一步的任何操作。
Ajax技术之中，最核心的技术就是XML Request，它是一个具有应用程序接口的 JavaScript对象，可以使用超文本传输协议〔 〕 连接一个效劳器，是微软公司为了满足开发者的 需要，于1999年在IE 5.0阅读器中率先推出的。 如今许多阅读器都对其提供了支持，不过实现方 式与IE有所不同。
4.3 AJAX相关技术简介
if 〔window.XML Request〕 { // Mozilla、Safari... _request = new XML Request〔〕;
} else if 〔window.ActiveXObject〕 { // IE阅读器 try { _request = new ActiveXObject〔"Msxml2.XML "〕; } catch 〔e〕 { try { _request = new ActiveXObject〔"Microsoft.XML "〕; } catch 〔e〕 {} }
4.3 AJAX相关技术简介
Ajax使用到的关键技术： 使用XHTML〔HTML〕和CSS构建标准化的 展示层 使用DOM进展动态显示和交互 使用XML和XSLT进展数据交换和处理 使用XML Request发送恳求和异步获取数 据 使用JavaScript将以上技术交融一起
4.3 AJAX相关技术简介
4.2 AJAX带来的优势
HTTP请求
用户界面
HTTP（S）协 议传输
客 户 端
HTML+CSS数据
Web服务器
服
务
器
数据存储，后端处理，继承系统
端
4.2 AJAX带来的优势
由于恳求是同步的，客户时机一直等待效劳器的响应。 等待期间，客户端程序类似于冻结状态，用户不能进展下 一步的任何操作。
ajax培训课件ppt
的，应 当按照 消费者 的要求 增加赔 偿其受 到的损 失，增 加赔偿 的金额 为消费 者购买 商品的 价款或 接受服 务的费 用
XMLHTTPREQUEST对象的属性
attribute EventListener onreadystatechange; readonly attribute unsigned short readyState; readonly attribute DOMString responseText; readonly attribute Document responseXML; readonly attribute unsigned short status; readonly attribute DOMString statusText;
XMLHTTPREQUEST对象的方法
void open(in DOMString method, in DOMString url); void open(in DOMString method, in DOMString url, in boolean async); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); void setRequestHeader(in DOMString header, in DOMString value); void send(); void send(in DOMString data); void send(in Document data); void abort(); DOMString getAllResponseHeaders(); DOMString getResponseHeader(in DOMString header);
XMLHTTPREQUEST对象的属性
attribute EventListener onreadystatechange; readonly attribute unsigned short readyState; readonly attribute DOMString responseText; readonly attribute Document responseXML; readonly attribute unsigned short status; readonly attribute DOMString statusText;
XMLHTTPREQUEST对象的方法
void open(in DOMString method, in DOMString url); void open(in DOMString method, in DOMString url, in boolean async); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user); void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); void setRequestHeader(in DOMString header, in DOMString value); void send(); void send(in DOMString data); void send(in Document data); void abort(); DOMString getAllResponseHeaders(); DOMString getResponseHeader(in DOMString header);
jQueryAjax精品PPT课件
$.ajax()方法
回调函数
1. beforeSend 在发送请求之前调用，并且传入一个 XMLHttpRequest作为参数。
2. error 在请求出错时调用。传入XMLHttpRequest对象，描 述错误类型的字符串以及一个异常对象（如果有的话）
3. dataFilter 在请求成功之后调用。传入返回的数据以及 "dataType"参数的值。并且必须返回新的数据（可能是处 理过的）传递给success回调函数。
data - 包含来自请求的结果数据 textstatus - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
只有ajax请求成功后，才触发回调函数 type: 返回内容格式，xml, html, script, json, text, _default
$.getScript()方法
$.getScript(url, [callback]) 动态加载外部js文件并自动执行 打开
url: 待载入 JS 文件地址。 callback: 成功载入后回调函数。
$.getJSON ()方法
$.getJSON(url, [data], [callback]) 加载外部JSON数据文件 打开
jQuery Ajax
Ajax
1. 最底层的方法：$.ajax() 2. 第2层的方法：load()、$.get() 、$.post() 3. 第3层的方法：$.getScript()、$.getJSON()
load()方法
load(url, [data], [callback]) url: 待装入 HTML 网页网址。 data: 发送至服务器的 key/value 数据。也可以接受一个字 符串。 callback: 载入成功时回调函数。打开
ajax课件
—高级软件人才实作培训专家! 高级软件人才实作培训专家! 发送请求--方法和属性介绍 发送请求--方法和属性介绍 -利用XMLHttpRequest 实例与服务器进行通信包含以 下3个关键部分：
• • •
onreadystatechange 事件处理函数 open 方法 send 方法
北京传智播客教育
• • •
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象 其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的 JavaScript对象。 XMLHttpRequest在不同浏览器上的实现是兼容的 在不同浏览器上的实现是兼容的，所以可以用同样 在不同浏览器上的实现是兼容的 的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建 的方法是什么。
北京传智播客教育
—高级软件人才实作培训专家! 高级软件人才实作培训专家! XMLHttpRequest对象初始化 XMLHttpRequest对象初始化
function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; }
Ajax软件开发技术ch5精品PPT课件
Iterator 提供一种方法顺序访问一个聚合对 象中的各个元素，而又不需暴露该对象的内 部表示。
Memento 在不破坏封装性的前提下，捕获 一个对象的内部状态，并在该对象之外保存 这个状态，这样以后就可将该对象恢复到保 存的状态。
基本设计模式
Observer 定义对象间的一种一对多的依 赖关系，以便当一个对象的状态发生变化 时，所有依赖于它的对象都得到通知，并 自动刷新。
Strategy 定义了一系列的算法，把它们 一个个封装起来，并且使它们可以相互替 换，本模式使得算法的变化可独立于使用 它的客户。
Ajax与重构
Ajax中使用的主要工具是重构，其作用与 目地如下： 重构的目的不增加新的功能，而在于重 写代码使它们更加清晰，易于维护。 重构是识别出通用的解决方案，并按照 这种特定的模式来重新组织代码的过程。
this.req=new XMLHttpRequest(); } else if (window.ActiveXObject){ this.req=new
ActiveXObject("Microsoft.XMLHTTP"); }
if (this.req){
try{
var loader=this;
Ajax中常用的设计模式
Façade模式 Observer模式 Singleton模式
MVC设计模式
概述
Ajax之所以能够超越DHTML，不仅仅在于 它组合技术的方式不同，也在于它使用这些 技术的规模不同。相比传统Web应用来说， Ajax需要更多的JavaScript代码，而且代 码在浏览器中驻留的时间也比较长。因此， Ajax需要以一种与传统Web开发所不同的 方式来管理这些复杂性。
this.defaultError; this.loadXMLDoc(url); }
Memento 在不破坏封装性的前提下，捕获 一个对象的内部状态，并在该对象之外保存 这个状态，这样以后就可将该对象恢复到保 存的状态。
基本设计模式
Observer 定义对象间的一种一对多的依 赖关系，以便当一个对象的状态发生变化 时，所有依赖于它的对象都得到通知，并 自动刷新。
Strategy 定义了一系列的算法，把它们 一个个封装起来，并且使它们可以相互替 换，本模式使得算法的变化可独立于使用 它的客户。
Ajax与重构
Ajax中使用的主要工具是重构，其作用与 目地如下： 重构的目的不增加新的功能，而在于重 写代码使它们更加清晰，易于维护。 重构是识别出通用的解决方案，并按照 这种特定的模式来重新组织代码的过程。
this.req=new XMLHttpRequest(); } else if (window.ActiveXObject){ this.req=new
ActiveXObject("Microsoft.XMLHTTP"); }
if (this.req){
try{
var loader=this;
Ajax中常用的设计模式
Façade模式 Observer模式 Singleton模式
MVC设计模式
概述
Ajax之所以能够超越DHTML，不仅仅在于 它组合技术的方式不同，也在于它使用这些 技术的规模不同。相比传统Web应用来说， Ajax需要更多的JavaScript代码，而且代 码在浏览器中驻留的时间也比较长。因此， Ajax需要以一种与传统Web开发所不同的 方式来管理这些复杂性。
this.defaultError; this.loadXMLDoc(url); }
ajax php ppt课件
eb开发、内容管理系统、电子商务平台、社交媒体平台等。
详细描述
PHP在Web开发领域应用广泛，如动态网页生成、表单处理、文件上传下载等。同时，PHP也常用于 开发内容管理系统，如WordPress等。此外，PHP在电子商务平台和社交媒体平台中也有广泛应用， 如淘宝、京东、微信等平台的后端开发。
AJAX 允许在后台与服务器进行数据交换， 减少了不必要的页面刷新，提高了数据交 互的效率。
增强网站功能
与 PHP 结合
通过 AJAX，可以创建更复杂、更丰富的网 站功能，如实时搜索、动态表单等。
PHP 是一种服务器端脚本语言，可以处理 服务器端的逻辑和数据。与 AJAX 结合， 可以实现前后端分离，提高开发效率。
要点二
详细描述
在 AJAX 的工作过程中，首先通过 JavaScript 创建一个 XMLHttpRequest 对象，然后使用该对象的 open() 方法 指定请求的 URL、请求类型（GET 或 POST）和是否异步 处理请求。接下来，使用 send() 方法发送请求到服务器。 当服务器处理完请求并返回响应时，JavaScript 通过 XMLHttpRequest 对象的 onreadystatechange 事件监 听器检测到响应状态的变化，并获取响应数据。最后， JavaScript 对响应数据进行解析和处理，更新网页内容。
02
PHP 简介
PHP 的定义
总结词
PHP是一种通用的开源脚本语言，主要用于Web开发，也可用于开发命令行脚 本和桌面应用程序。
详细描述
PHP是一种服务器端脚本语言，它嵌入在HTML中，并由服务器解析执行，生 成动态的Web页面。PHP语言具有简单易学、功能强大、跨平台等特点，被广 泛应用于Web开发领域。
详细描述
PHP在Web开发领域应用广泛，如动态网页生成、表单处理、文件上传下载等。同时，PHP也常用于 开发内容管理系统，如WordPress等。此外，PHP在电子商务平台和社交媒体平台中也有广泛应用， 如淘宝、京东、微信等平台的后端开发。
AJAX 允许在后台与服务器进行数据交换， 减少了不必要的页面刷新，提高了数据交 互的效率。
增强网站功能
与 PHP 结合
通过 AJAX，可以创建更复杂、更丰富的网 站功能，如实时搜索、动态表单等。
PHP 是一种服务器端脚本语言，可以处理 服务器端的逻辑和数据。与 AJAX 结合， 可以实现前后端分离，提高开发效率。
要点二
详细描述
在 AJAX 的工作过程中，首先通过 JavaScript 创建一个 XMLHttpRequest 对象，然后使用该对象的 open() 方法 指定请求的 URL、请求类型（GET 或 POST）和是否异步 处理请求。接下来，使用 send() 方法发送请求到服务器。 当服务器处理完请求并返回响应时，JavaScript 通过 XMLHttpRequest 对象的 onreadystatechange 事件监 听器检测到响应状态的变化，并获取响应数据。最后， JavaScript 对响应数据进行解析和处理，更新网页内容。
02
PHP 简介
PHP 的定义
总结词
PHP是一种通用的开源脚本语言，主要用于Web开发，也可用于开发命令行脚 本和桌面应用程序。
详细描述
PHP是一种服务器端脚本语言，它嵌入在HTML中，并由服务器解析执行，生 成动态的Web页面。PHP语言具有简单易学、功能强大、跨平台等特点，被广 泛应用于Web开发领域。
ASP.NET AJAX ppt课件
本实例创建了一个AJAX Web窗体，在 窗体上既包含传统的控件，也包含 AJAX控件。当单击“没有使 用AJAX”按钮，则会刷新整个页面，两 个标签的内容都会改变。如果单击“使 用AJAX”按钮，则只刷新页面的部分区 域，只有下面的标签内容会改变。 源程序：FirstAjax.aspx
ppt课件 4
12.1.1 AJAX概述
AJAX技术将桌面应用程序具有的交互性应用于Web应 用程序 AJAX所用到的技术包括：
XMLHttpRequest对象:
该对象允许浏览器与Web服务器通信，通过MSXML ActiveX组件 可以在IE5.0以上的浏览器中使用。
JavaScript代码:
3
12.1 AJAX基础
AJAX是Asynchronous JavaScript and XML的 缩写，是一种利用已经成熟的技术构建具有良 好交互性的Web应用程序的好方法。通常称 AJAX页面为无刷新Web页面。 AJAX是AJAX的Microsoft实现方式， 对AJAX的使用以控件形式提供，提高了易用 性。 AJAX 1.0以单独下载的形式发布， 可以在 2.0之上安装。从.NET Framework 3.5开始，不再需要下载和安装单 独的 AJAX。
ppt课件
13
12.2.1 ScriptManager控件
中AJAX功能的核心，管理一个页面 上的所有 AJAX资源。包括将 Microsoft AJAX库的JavaScript脚本下载到浏 览器和协调通过使用控件UpdatePanel启用的 局部页面刷新。 每个实现AJAX功能的页面都需要添加一个 ScriptManager控件。语法格式如下：
第12章 AJAX
ppt课件
1
ppt课件 4
12.1.1 AJAX概述
AJAX技术将桌面应用程序具有的交互性应用于Web应 用程序 AJAX所用到的技术包括：
XMLHttpRequest对象:
该对象允许浏览器与Web服务器通信，通过MSXML ActiveX组件 可以在IE5.0以上的浏览器中使用。
JavaScript代码:
3
12.1 AJAX基础
AJAX是Asynchronous JavaScript and XML的 缩写，是一种利用已经成熟的技术构建具有良 好交互性的Web应用程序的好方法。通常称 AJAX页面为无刷新Web页面。 AJAX是AJAX的Microsoft实现方式， 对AJAX的使用以控件形式提供，提高了易用 性。 AJAX 1.0以单独下载的形式发布， 可以在 2.0之上安装。从.NET Framework 3.5开始，不再需要下载和安装单 独的 AJAX。
ppt课件
13
12.2.1 ScriptManager控件
中AJAX功能的核心，管理一个页面 上的所有 AJAX资源。包括将 Microsoft AJAX库的JavaScript脚本下载到浏 览器和协调通过使用控件UpdatePanel启用的 局部页面刷新。 每个实现AJAX功能的页面都需要添加一个 ScriptManager控件。语法格式如下：
第12章 AJAX
ppt课件
1
Ajax原理 ppt课件
Ajax原理
对于不同的浏览器，创建方式不一样：
IE6.0以前 var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); MSXML3.0 var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP); FIREFOX,IE7.0以及其他非IE浏览器 var xmlhttp = new XMLHttpRequest();
DOM Javascript CSS XMLHttpRequest
Ajax原理
Ajax原理
XmlHttpRequest对象是ajax技术的核心， 没有XmlHttpRequest对象就相当于没有 ajax
XmlHttpRequest是XMLHTTP组件的对 象 ,通过XmlHttpRequest可以像桌面应用 程序一样只同服务器进行数据层面的信息 交换，而不用刷新页面
Ajax原理
Ajax原理
更丰富的“用户体验”，新的交互方式
内容聚合
自动 补全
每个小“窗口” 可以关闭、最 小化和进行个
性化设置
所有操作都是在不刷新窗口的情况下完成的
Ajax原理
无刷新：不刷新整个页面，只刷新局部 无刷新的好处
只更新部分页面，有效利用带宽
只是登录，没 必要刷新“庞 大”的页面。
无刷新的好处
getResponseHeader(DOMString header，value)方法 用于检索响应的头部值。
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对
Ajax原理
步骤： 1、创建XmlHttpRequest对象，并初始化。 2、发送请求 3、服务器接收请求进行处理 4、返回响应数据 5、客户端接收 6、依据响应数据修改客户端页面内容
ASPNETAJAX技术ppt课件全
AJAX核心控件
UpdatePanel控件 局部更新是 AJAX中最基本、最重要的技术。UpdatePanel可以用来创建丰富的局部更新Web应用程序，其强大之处在于不用编写任何客户端脚本就可以自动实现局部更新。 当使用UpdatePanel控件时，页面上的行为具有浏览器独立性，并且能够潜在的减少客户端和服务器之间数据量的传输。 UpdatePanel控件能够刷新指定的页面区域，而不是刷新整个页面。整个过程是由服务器控件ScriptManager和客户端类PageRequestManager来进行协调的。页面更新局限于被UpdatePanel控件包含和被标识为要更新的页面区域。服务器只为那些受到影响的浏览器元素返回HTML标记。。
AJAX核心控件
UpdatePanel主要属性
AJAX核心控件
UpdateProgress控件 UpdateProgress控件能够设计一个更直观的用户界面，而这个用户界面用来显示一个页面中的一个或多个UpdatePanel控件实现部分页面刷新的过程信息。 如果一个部分页面刷新过程是缓慢的，就可以利用UpdateProgress控件提供更新过程的可视化的状态信息。 在一个页面可以使用多个UpdateProgress控件，每个与不同的UpdatePanel控件相配合。此外，可以使用一个UpdateProgress控件与页面上的所有UpdatePanel控件相配合。
AJAX技术概述
AJAX具有以下优势： 提高浏览器中Web页面的执行效率。 熟悉的UI元素，诸如进程指标控件、tooltips控件和弹出式窗口。 部分页面刷新，只刷新已被更新的页面。 实现客户端与应用服务的集成以进行表单认证和用户配置。 通过调用Web服务整和不同的数据源数据。 简化了服务器控件的定制以包括客户端功能。 支持最流行的和通用的浏览器，包括微软IE，Firefox和Safari。 具有可视化的开发界面，使用VS 2010可以轻松自如的开发AJAX程序。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
另有getAllResponseHeaders()方法获取所有头部 信息
24
又见中文乱码
IT@ANY
处理方式一：与原来的GET/POST分别处理基本 一致 处理方式二：采用客户端二次编码，服务器端一 次解码
25
第三部分
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
5
Ajax技术本质
Ajax既不是插件，也 不是专利技术，而是 一种架构风格（高层 次的模式），它由很 多相关的技术和想法 组成。 Ajax缩写： Asynchronous JavaScript And XML， 实际上AJAX由以下几 部分组成
JavaScript
IT@ANY
CSS
AJAX
23
XHR方法—getResponseHeader
语法：getResponseHeader(header)
– header：要获取的响应头的名称
IT@ANY
说明：用于获取一个 HTTP响应的头部 示例：
xhr.open("GET", "…",false); alert(xhr. getResponseHeader("Content-type");
IT@ANY
3
第一部分
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
IT@ANY
4
AJAX的起源
IT@ANY
2005年2月8号，一名叫Jesse James Garret 的程序员发布了一篇在线文章—— “Ajax:Web应用的新方法” Garret引进了“Ajax”这个词，为像Google Maps和Google Suggest这类新一代的行为 丰富的Web应用(rich web application)背后 的架构给出定义
28
IT@ANY
29
IT@ANY
12
最简单的AJAX程序-服务端
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain"); PrintWriter out = response.getWriter(); out.println("Hello World!"); out.flush(); out.close(); }
20
XHR方法—open
语法：open(method, url, async, user, pwd)
IT@ANY
– method参数是用于请求的HTTP方法，值包括 GET、POST 和 HEAD。 – url参数是请求的资源，大多数浏览器实施了一个同源安全 策略，并且要求这个URL与包含脚本的文本具有相同的主 机名和端口。 – async参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到 响应完全接收。如果这个参数是 true 或省略，请求是异步 的，且通常需要一个 onreadystatechange 事件句柄。 – user 和 pwd 参数是可选的，为 url 所需的授权提供认证资 格。如果指定了，它们会覆盖 url 自己指定的任何资格。
onreadystatechange：XHR的核心也几乎是 唯一的事件，指定当readyState属性改变时 的事件处理句柄 onerror ：仅Mozilla onprogress ：仅Mozilla onload：仅Mozilla
19
XHR方法—abort
IT@ANY
取消当前响应，关闭连接并且结束任何未 决的网络活动。 此方法把 XMLHttpRequest对象的 readyState重置为 0，并且取消所有未决的 网络活动。 如果请求用了太长时间，而且响应不再必 要的时候，可以调用这个方法。
DOM
XMLHttpRequest
6
AJAX特性
IT@ANY
建造能交付功能丰富的，响应能力良好的，具有 良好用户操作体验的标准WEB技术
–是应用，而不是网站 –平滑，连续的交互 –实时 –充分的支持 –视觉效果
7
恰当使用AJAX
IT@ANY
AJAX豪华版 对AJAX的使用最彻底，应用感觉上就像浏览器里 的桌面应用，因为交互由浏览器在驱动—它协调用 户与服务器之间的所有交互，因此几乎没有直接的 页面刷新；类似的，不需要在服务器做会话跟踪， 因为没有页面的刷新，所有相关状态都可以保持在 浏览器脚本里，服务器不必了解HTML，并且可能 只提供一般的WEB服务。 AJAX轻量版 总体来说，AJAX轻量版应用比较像传统的WEB应 用，但在一些地方加上了AJAX功能，例如，在标 准表单提交前，AJAX可以被用来验证表单，或者 在用户请求协助时，AJAX可以被用来显示页面的 操作说明。
11
最简单的AJAX程序-客户端
function testAjax(){ var req=new XMLHttpRequest(); req.open("get","/ajax/reada",false); req.send(null); var str=req.responseText; alert(str); }
– header：要设置的头部的名称 – value：要设置的头部的值
IT@ANY
说明：用于设置一个 HTTP 请求的头部 示例：采用POST提交数据
xhr.open("POST", "…",false); xhr. setRequestHeader("Content-type","application/xwww-form-urlencoded;charset=GBK"); xhr.send("name=tom&age=22");
IT@ANY
26
用户名注册认证
实现步骤：
– – – – 创建一个用于注册的表单 编写失去焦点事件onblur 提交用户注册的用户名到服务器端 根据返回值显示相应信息
IT@ANY
27
总结
IT@ANY
了解Ajax技术的本质与核心组成 掌握XMLHttpRequest的基本语法：常用属 性、事件和方法，据此理解其工作原理 掌握简单的Ajax应用：用户名验证
IT@ANY
13
建立XMLHttpRequest对象
IT@ANY
鉴于客户端浏览器的不同，以上示例并不一定能 够成功运行 因为不同浏览器中这个对象存在不同的版本，所 以通常我们会创建一个工厂函数，以支持任何浏 览器下的XMLHttpRequest对象
14
工厂方法
IT@ANY
function createXHR(){ var xhr; // 如果ActiveX对象可用，则使用的肯定是IE浏览器 if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else{ // 使用Javascript方法处理 xhr = new XMLHttpRequest(); } }
10
浏览器的选择
IT@ANY
虽然是Microsoft发明了此对象，但目前在多数浏 览器里，XMLHttpRequest是标准的JavaScript类， 支持XMLHttpRequest对象的主流浏览器：
– – – – – Windows IE 5+ FireFox 1+ Mozilla 1+ Safari1.2+ Opera7.6+
21
XHR方法—send
语法：send(body)
IT@ANY
– body：要发送给服务器的内容。如果没有内容要发送， 最好写为null
说明：open方法中的async参数决定了该方法的同 步或异步
22
XHR方法—setRequestHeader
语法：setRequestHeader(header,value)
IT@ANY
第一课
Ajax基础
本课程的主要内容
Ajax通信原理 Ajax核心：XMLHttpRequest JavaScript框架：jQuery Ajax框架：DWR Ajax常见应用
IT@ANY
2
本章目标
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
15
XHR属性—readyState
IT@ANY
readyState：返回当前请求的状态，属性只读； 当一个XHR初次创建时，这个属性的值从 0 开始， 直到接收到完整的 HTTP 响应，这个值增加到 4：
– 0：未初始化，对象已经建立，尚未调用open方法创建 http请求 – 1：初始化，对象已经建立，但未调用send方法发送 http请求 – 2：发送数据，send方法已调用，但当前的状态及http 头未知 – 3：数据传送中，已经接收部分数据，因为响应及http 头不全，这时获取部分数据会出现错误 – 4：传送完成，可通过responseXXX获取完整的响应数 据
16
XHR属性—responseXXX
IT@ANY
responseBody：将回应信息正文以unsigned byte 数组形式返回，属性只读 responseText：目前为止从服务器接收到的响应 体（不包括头部），或者如果还没有接收到数据 的话，就是空字符串，属性只读 responseXML：对请求的响应，解析为 XML 并 作为 Document 对象返回，属性只读