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: 载入成功时回调函数。打开
- 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 对象返回，属性只读