AJAX基础教程PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
} else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
设置返回服务器返回数据类型的MIME格式
http_request.overrideMimeType(“text/xml”);
AJAX
1
.
目标
❖ Ajax简介 ❖ Ajax原理 ❖ XMLHttpRequest的使用 ❖ DOM简介 ❖ 利用DOM操纵HTML文档 ❖ Ajax请求响应使用XML文档
2
2
.
AJAX简介
❖AJAX（Asynchronous JavaScript and XML）它 是一种由多种技术组合的技术。
6
6
.
基于Ajax的异步处理
❖ Ajax采用异步方式与后台交互。
A
用
HTML+CSS
J
户
A
界
X
面
引
JavaScrip调用 擎
Web浏览器
W
后
XML,JSON数据
E
台
B
业
服
务
务
系
Http请求
器
统
后台服务器
7
7
.
传统Web应用同步处理
❖ 基于A JAX的异步交互过程
8
8
.
传统Web应用同步处理
❖ A JAX异步处理的优点
▪ 初始化XMLHttpRequest对象 ▪ 指定响应处理函数(回调方法) ▪ 发出HTTP请求 ▪ 处理服务器返回的信息
11
11
.
初始化XMLHttpRequest
❖ 不同的浏览器构建方式并不一样，示例展示了适 合IE和Mozilla浏览器的构建立方式：
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest();
true);
open方法的Baidu Nhomakorabea个参数分别为：
请求的方式GET,POST,HEAD 请求的路径 是否异步请求，如果指定为异步，在请求发送后，浏
览器继续执行，否则等待。
14
14
.
发出HTTP请求
❖ XMLHttpRequest的send方法用于向服务器发 送请求。
http_request.send(null);
❖ 包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest 等
▪ XHTML，CSS用于呈现 ▪ DOM实现动态显示和交互 ▪ XML和XSTL进行数据交换与处理 ▪ XMLHttpRequest对象用于进行异步数据读取 ▪ Javascript绑定和处理所有数据
❖ AJAX核心对象是XMLHttpRequest，该对象在 JavaScript中可用于构建异步的后台服务的调用 。
❖ 通过这个对象，AJAX可以像桌面应用程序一样 只同服务器进行数据层面的交换，而不用每次都
M刷oz新ill界a,N面e，tS不ca同pe的：浏览器它的构建方式并不一样 ：
var httpRequest = new XMLHttpRequest();
http_request.onreadystatechange = function(){ …
}
13
13
.
发出HTTP请求
❖ 在发送请求前需要调用XMLHttpRequest的 open方法打开链接，之后可通过其send方法发
送请求。 http_request.open('GET', 'htt://localhost:8080/useprj/findProduct?id=01',
▪ 减轻服务器的负担，AJAX一般只从服务器获取只需要 的数据。
▪ 无刷新页面更新，减少用户等待时间。 ▪ 更好的客户体验，可以将一些服务器的工作转移到客户
端完成，节约网络资源，提高用户体验。 ▪ 基于标准化的对象，不需要安装特定的插件绝大多数的
游览器都能执行 ▪ 彻底将页面与数据分离。
9
9
.
AJAX应用开发
IE：
var httpRequest = new ActiveXObject(“MSXML.XMLHTTP”); 或 var httpRequest = new ActiveXObject("MSXML2.XMLHTTP");
10
10
.
XMLHttpRequest的使用
❖ 使用XMLHttpRequest异步调用后台服务的基本 步骤：
} else { // 页面有问题} } else { // 信息还没有返回，等待}
3
3
.
传统Web应用同步处理
❖ 传统的Web应用采用同步交互过程。
4
4
.
传统Web应用同步处理
❖ 传统的Web应用采用同步交互过程。
5
5
.
传统Web应用同步处理
❖ 传统的Web应用中，用户单击一个链接后，待需 要等待，直到另外一个页面刷新显示。
❖ 如果仅仅需要改变页面的某一部分的内容，也不 得不刷新整个页面。
❖ 不同的readyState值对应响应的不同阶段，当 readyState的值为4时表示服务器响应完成。
❖ 示例代码中根据返回的状态及响应的结果状态， 执行处理。
if (http_request.readyState == 4) { // 信息已经返回，可以开始处理
if (http_request.status == 200) { // 页面正常，可以开始处理信息
12
12
.
指定响应处理函数(回调方法)
❖ 回调方法在服务器端返回信息给客户端时被调用 ，只需将回调方法指定给XMLHttpRequest对象 的onreadystatechange属性即可，示例中展示 了两种设置方法。
var processRequest = function (){ … } http_request.onreadystatechange = processRequest;
请求如果是以POST方式发出，send方法的参数 对应发送到服务器的数据，如果数据为上传的文 件，需要设置请求的头信息，例如：
http_request.setRequestHeader(“Content-Type”,” multipart/form-data”);
15
15
.
处理服务器返回
❖ 请求发送后，浏览器会根据请求或响应的状态调 用XMLHttpRequest的回调方法，状态信息保存 在XMLHttpRequest对象的readyState属性中。
}
设置返回服务器返回数据类型的MIME格式
http_request.overrideMimeType(“text/xml”);
AJAX
1
.
目标
❖ Ajax简介 ❖ Ajax原理 ❖ XMLHttpRequest的使用 ❖ DOM简介 ❖ 利用DOM操纵HTML文档 ❖ Ajax请求响应使用XML文档
2
2
.
AJAX简介
❖AJAX（Asynchronous JavaScript and XML）它 是一种由多种技术组合的技术。
6
6
.
基于Ajax的异步处理
❖ Ajax采用异步方式与后台交互。
A
用
HTML+CSS
J
户
A
界
X
面
引
JavaScrip调用 擎
Web浏览器
W
后
XML,JSON数据
E
台
B
业
服
务
务
系
Http请求
器
统
后台服务器
7
7
.
传统Web应用同步处理
❖ 基于A JAX的异步交互过程
8
8
.
传统Web应用同步处理
❖ A JAX异步处理的优点
▪ 初始化XMLHttpRequest对象 ▪ 指定响应处理函数(回调方法) ▪ 发出HTTP请求 ▪ 处理服务器返回的信息
11
11
.
初始化XMLHttpRequest
❖ 不同的浏览器构建方式并不一样，示例展示了适 合IE和Mozilla浏览器的构建立方式：
if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest();
true);
open方法的Baidu Nhomakorabea个参数分别为：
请求的方式GET,POST,HEAD 请求的路径 是否异步请求，如果指定为异步，在请求发送后，浏
览器继续执行，否则等待。
14
14
.
发出HTTP请求
❖ XMLHttpRequest的send方法用于向服务器发 送请求。
http_request.send(null);
❖ 包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest 等
▪ XHTML，CSS用于呈现 ▪ DOM实现动态显示和交互 ▪ XML和XSTL进行数据交换与处理 ▪ XMLHttpRequest对象用于进行异步数据读取 ▪ Javascript绑定和处理所有数据
❖ AJAX核心对象是XMLHttpRequest，该对象在 JavaScript中可用于构建异步的后台服务的调用 。
❖ 通过这个对象，AJAX可以像桌面应用程序一样 只同服务器进行数据层面的交换，而不用每次都
M刷oz新ill界a,N面e，tS不ca同pe的：浏览器它的构建方式并不一样 ：
var httpRequest = new XMLHttpRequest();
http_request.onreadystatechange = function(){ …
}
13
13
.
发出HTTP请求
❖ 在发送请求前需要调用XMLHttpRequest的 open方法打开链接，之后可通过其send方法发
送请求。 http_request.open('GET', 'htt://localhost:8080/useprj/findProduct?id=01',
▪ 减轻服务器的负担，AJAX一般只从服务器获取只需要 的数据。
▪ 无刷新页面更新，减少用户等待时间。 ▪ 更好的客户体验，可以将一些服务器的工作转移到客户
端完成，节约网络资源，提高用户体验。 ▪ 基于标准化的对象，不需要安装特定的插件绝大多数的
游览器都能执行 ▪ 彻底将页面与数据分离。
9
9
.
AJAX应用开发
IE：
var httpRequest = new ActiveXObject(“MSXML.XMLHTTP”); 或 var httpRequest = new ActiveXObject("MSXML2.XMLHTTP");
10
10
.
XMLHttpRequest的使用
❖ 使用XMLHttpRequest异步调用后台服务的基本 步骤：
} else { // 页面有问题} } else { // 信息还没有返回，等待}
3
3
.
传统Web应用同步处理
❖ 传统的Web应用采用同步交互过程。
4
4
.
传统Web应用同步处理
❖ 传统的Web应用采用同步交互过程。
5
5
.
传统Web应用同步处理
❖ 传统的Web应用中，用户单击一个链接后，待需 要等待，直到另外一个页面刷新显示。
❖ 如果仅仅需要改变页面的某一部分的内容，也不 得不刷新整个页面。
❖ 不同的readyState值对应响应的不同阶段，当 readyState的值为4时表示服务器响应完成。
❖ 示例代码中根据返回的状态及响应的结果状态， 执行处理。
if (http_request.readyState == 4) { // 信息已经返回，可以开始处理
if (http_request.status == 200) { // 页面正常，可以开始处理信息
12
12
.
指定响应处理函数(回调方法)
❖ 回调方法在服务器端返回信息给客户端时被调用 ，只需将回调方法指定给XMLHttpRequest对象 的onreadystatechange属性即可，示例中展示 了两种设置方法。
var processRequest = function (){ … } http_request.onreadystatechange = processRequest;
请求如果是以POST方式发出，send方法的参数 对应发送到服务器的数据，如果数据为上传的文 件，需要设置请求的头信息，例如：
http_request.setRequestHeader(“Content-Type”,” multipart/form-data”);
15
15
.
处理服务器返回
❖ 请求发送后，浏览器会根据请求或响应的状态调 用XMLHttpRequest的回调方法，状态信息保存 在XMLHttpRequest对象的readyState属性中。