14-Ajax原理及其应用

11
万策实训
怎样应用Ajax
2.2. 发送请求的方法Send
xmlhttp.send()或xmlhttp.send(“参数”);
Xmlhttp.open(“get”,”http://www.baidu.com/?id=yang”,true); Xmlhttp.send(); 或
Xmlhttp.open(“post”,”http://www.baidu.com”，true); Xmlhttp.send(“id=yang”);
18
万策实训
谢谢~！
19
万策实训
传统的Web应用模型（同步）
6
万策实训
为什么使用Ajax
客户端
浏览器UI
用户操作
Ajax引擎
客户端处理
数据传输
时间
服务器端
服务器处理
服务器处理
数据传输
显示
显示
显示
提交 数据传输
提交
提交 数据传输
7
万策实训
为什么使用Ajax
使用Ajax的好处：




加快了响应速度 ，减少用户的等待时间 减轻服务器负担，充分利用带宽资源 可以调用外部数据 基于标准化，并被广泛支持，不需下载插件或 程序 进一步促进页面呈现与数据处理的分离
Ajax原理及其应用
The principle and application of AJAX
万策实训
名词解释

同步：提交请求->等待服务器处理->处理完毕 返回(这个期间客户端浏览器不能干任何事) 异步: 请求通过事件触发->服务器处理（这是 浏览器仍然可以作其他事情）->处理完毕

2
万策实训
目录
function createXMLHttpReq(){ if(window.ActiveXObject){ req=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ req=new XMLHttpRequest(); } }
15
万策实训
样例代码-GET异步请求
function useGet(params){ req.onreadystatechange=callback;//设置回调方法 req.open(“GET”,“search?”+params,true);//设置请求的目 标地址 req.send(null);//发出请求 }
16
源自文库
万策实训
样例代码-POST异步请求
function usePost(params){ req.onreadystatechange=callback;//设置回调方法 req.open(“POST”,“search”,true);//设置URL及是否异步 req.setRequestHeader(“content-type”,“application/xwww-form-urlencoded”);//设置请求数据的编码方式 req.send(params);//发送请求 }
1.2在firefox浏览器中创建异步调用对象
Var xmlhttp=new XmlHttpRequest();
10
万策实训
怎样应用Ajax

2.异步读取数据
2.1.加载服务器的方法Open
xmlhttp.open(Method,URL,Aysc);
Method：表示向服务器发送请求的发法（get,post,head,put,delete）， get将参数追加到URL中发送，post将参数串放在请求中发送。 URL：请求服务器的地址 Aysc：是否使用异步方法
17
万策实训
样例代码-回调方法实现
function callback(){ if(req.readyState==4){//处理完毕 if(req.status==200){//正确响应 var t=document.getElementById("disp"); t.innerHTML=“<font color=„red‟>”+req.responseText+“</font>”;//显示 } req=null; } }
4
万策实训
什么是Ajax
Web浏览器
定义界面外观 CSS样式表
定义界面内容
JavaScript脚本
DOM对象 XMLHttpRequest 与Web服务器通信
Web服务器
Web服务器
5
万策实训
为什么使用Ajax
客户端
用户操作
数据传输
等待
数据传输
用户操作
数据传输 数据传输
用户操作
时间
服务器端
系统处理 系统处理
12
万策实训
怎样应用Ajax

3 根据异步状态获取最终数据
xmlhttp.readystate==4 && xmlhttp.status==200
异步 交互 成功
0： 1： 2： 3： 4：
Readystate表示交互的状态 异步对象创建完毕未使用open方法 未使用send方法发送请求 send方法完成，等待服务求响应 正在接受数据，但未完成 调用完成，可以获取返回的数据
8
万策实训
怎样应用Ajax
使用Ajax技术实现局部刷新的原理
创建异步对象
异步读取数据
根据条件局部更 新数据
根据异步状态获 取最终数据
9
万策实训
怎样应用Ajax

1.创建异步调用对象
1.1在IE浏览器中创建异步调用对象
Var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

什么是Ajax
为什么使用Ajax 怎么应用Ajax


3
万策实训
什么是Ajax



Ajax 中文译为：阿贾克斯 系异步JavaScript和XML (Asynchronous JavaScript and XML)的缩写 Ajax的核心理念：使用异步方式来构建胖客户 端 Ajax处理数据的两个特点是异步和按需索取。
13
万策实训
怎样应用Ajax

4 获取并显示异步返回的数据
//调用完成后可以用responseText或responseXml获取数据（实现局部刷新）
Document.getElementById(“对象”).innerText=xmlhttp.responseText ;
14
万策实训
样例代码-创建异步请求对象