Ajax原理PPT课件

1、Ajax原理原理12021/3/9本章目标本章目标掌握掌握Ajax的组成的组成掌握掌握Ajax的原理的原理掌握掌握XmlHttpRequest对象的属性、方法和对象的属性、方法和事件事件掌握基于掌握基于Ajax技术的应用编程技术的应用编程22021/3/9Web 2.0互联网历史互联网历史革命啦，革命啦！革命啦，革命啦！三五年就来一次三五年就来一次32021/3/9Web 2.0Web 2.0特点特点内容聚合：内容聚合：RSS用户贡献内容用户贡献内容社会化网络社会化网络42021/3/9Web 2.0更丰富的更丰富的“用户体验用户体验”，新的交互方式，新的交互方式自动自动补全补全内容聚合内容聚

2、合每个小每个小“窗口窗口”可以关闭、最可以关闭、最小化和进行个小化和进行个性化设置性化设置所有操作都是在所有操作都是在不刷新不刷新窗口的情况下完成的窗口的情况下完成的52021/3/962021/3/9为什么使用为什么使用Ajax无刷新：不刷新整个页面，只刷新局部无刷新：不刷新整个页面，只刷新局部无刷新的好处无刷新的好处只更新部分页面，有效利用带宽只更新部分页面，有效利用带宽只是登录，没只是登录，没必要刷新必要刷新“庞庞大大”的页面。的页面。72021/3/9为什么使用为什么使用Ajax无刷新的好处无刷新的好处提供连续的用户体验提供连续的用户体验观看视频时执行操作，不希望页面刷新视频从头播放吧

3、！只刷新了局部只刷新了局部页面，视频继页面，视频继续播放续播放82021/3/9为什么使用为什么使用Ajax无刷新的好处无刷新的好处提供类似提供类似C/S的交互效果，操作更方面的交互效果，操作更方面使用使用Ajax可以实现这样的效果可以实现这样的效果92021/3/9为什么使用为什么使用AJAX 102021/3/9什么是什么是AjaxAjax：只刷新局部页面的技术：只刷新局部页面的技术AJAX ： Asynchronous Javascript And XML异步：发送请求后不等返回结果，由回调函数处理结果异步：发送请求后不等返回结果，由回调函数处理结果JavaScript：向服务器发起请求

4、，获得返回结果，更新页面：向服务器发起请求，获得返回结果，更新页面XML：封装数据：封装数据用途用途使用使用JavaScript从服务器获取数据而不必刷新整个页面从服务器获取数据而不必刷新整个页面Asynchronous异步的异步的JavaScriptAndXML112021/3/9AJAX组成原理组成原理 AJAX是是：JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体，主要应用于异四种技术的集合体，主要应用于异步获取后台数据和局部刷新步获取后台数据和局部刷新。XmlHttpRequestJavaScriptCSSDOM122021/3/9Ajax的优势和劣势

5、的优势和劣势 Ajax的优势的优势 Ajax的劣势的劣势 n 不需要插件支持不需要插件支持 n 优秀的用户体验优秀的用户体验 n 提高提高Web程序的性能程序的性能 n 减轻服务器和带宽的负担减轻服务器和带宽的负担 n 浏览器对浏览器对XmlHttpRequest对象的支持度不足对象的支持度不足 n 破坏浏览器前进、后退按钮的正常功能破坏浏览器前进、后退按钮的正常功能 n 对搜索引擎支持不足对搜索引擎支持不足 n 开发和调试工具欠缺开发和调试工具欠缺 132021/3/9AJAX技术的组成技术的组成DOMJavascriptCSSXMLHttpRequest142021/3/9XmlHttpR

6、equest对象对象 XmlHttpRequest对象是对象是ajax技术的核心，技术的核心，没有没有XmlHttpRequest对象就相当于没有对象就相当于没有ajax XmlHttpRequest是是XMLHTTP组件的对组件的对象象 ,通过通过XmlHttpRequest可以像桌面应用可以像桌面应用程序一样只同服务器进行数据层面的信息程序一样只同服务器进行数据层面的信息交换，而不用刷新页面交换，而不用刷新页面 152021/3/9XmlHttpRequest对象 属性：属性属性 作用作用 onreadystatechange这是个事件，在状态改变时触发 readyState对象状态 把一

7、个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性。 0 未初始化 1 读取中 2 已读取中 3 交互中 4 完成 ResponseText这个responseText属性包含客户端接收到的HTTP响应的文本内容，表示为一个字符串。当readyState值为0、1或2时，responseText包 含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该

8、 responseText包含完整的响应信息。ResponseXML这个跟上一个很像，它返回一个兼容DOM的XML文档对象。status返回http协议的状态码，如404是URL错误200交互成功。statusText服务器返回的状态文本信息。162021/3/9XmlHttpRequest对象对象方法方法方法 作用 abort()用它来停止当前请求open(“方法名”,”URL”)方法名是指，请求的方法get或者是post这个方法可以理解为准备一个请求。send(content)仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一

9、个异常。setRequestHeader()该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。getResponseHeader()getResponseHeader(DOMString header，value)方法用于检索响应的头部值。getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对172021/3/9如何使用如何使用XmlHttpRequest 接收和发送数据接收和发送数

10、据步骤：步骤：1、创建、创建XmlHttpRequest对象，并初始化。对象，并初始化。2、发送请求、发送请求3、服务器接收请求进行处理、服务器接收请求进行处理4、返回响应数据、返回响应数据5、客户端接收、客户端接收6、依据响应数据修改客户端页面内容、依据响应数据修改客户端页面内容182021/3/91、创建、创建XmlHttpRequest对象对象对于不同的浏览器，创建方式不一样：对于不同的浏览器，创建方式不一样：IE6.0以前以前 var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);MSXML3.0 var xmlhttp = new Ac

11、tiveXObject(Msxml2.XMLHTTP);FIREFOX,IE7.0以及其他非以及其他非IE浏览器浏览器 var xmlhttp = new XMLHttpRequest(); 192021/3/91、创建、创建XmlHttpRequest对象对象创建工厂函数以支持任何浏览器的创建工厂函数以支持任何浏览器的XMLHttpRequest对象对象202021/3/92、发送请求、发送请求调用调用XMLHttpRequest对象的对象的open()和和send() 方法方法xmlhttp.open(“GET”,url,true); xmlhttp.send(null);212021/3

12、/93、服务器接收请求进行处理、服务器接收请求进行处理没什么代码好写的，等吧！没什么代码好写的，等吧！222021/3/94、返回响应数据、返回响应数据在返回响应数据之前，我们要先判断一下在返回响应数据之前，我们要先判断一下readyState的数值是否为的数值是否为4，也就是是否信息，也就是是否信息全部返回。全部返回。 if (xmlhttp.readyState = = 4 ) /信息已经返回，可以处理信息已经返回，可以处理 返回信息则要看看返回信息则要看看HTTP的状态码，是否等的状态码，是否等于于200，200是代表正常的意思。是代表正常的意思。 if(xmlhttp.status =

13、 =200) /页面正常页面正常 232021/3/95、客户端接收、客户端接收responseBody:将回应信息正文以将回应信息正文以unsigned byte 数组形式返回，属性只读。数组形式返回，属性只读。 responseText:以字符串的形式返回服务以字符串的形式返回服务器响应信息，属性只读。器响应信息，属性只读。 responseXML:将响应信息格式化为将响应信息格式化为XML Document对象返回，属性只读。对象返回，属性只读。242021/3/9判断用户名是否存在完整代码参考（判断用户名是否存在完整代码参考（.NET 版）版）Register.htm响应结果前：响应结

14、果前：响应结果后：响应结果后：252021/3/9判断用户名是否存在完整代码参考（判断用户名是否存在完整代码参考（.NET 版）版） /声明声明XMLHTTPRequest对象对象 var xmlHttp;/完成完成AJAX交互功能的函数交互功能的函数 function CheckUser() /声明变量为用户名文本框的值声明变量为用户名文本框的值 var users=document.getElementById(txtUsername).value; /声明变量为提交到服务器的声明变量为提交到服务器的URL var url=ValiUser.aspx?username=+users; /调

15、用函数，为调用函数，为XmlHttpRequest对象赋值对象赋值 xmlHttp=CreateXMLHTTPRequest(); /建立对服务器的调用建立对服务器的调用 xmlHttp.open(post,url,true); /每个状态改变时都会触发这个事件每个状态改变时都会触发这个事件 xmlHttp.onreadystatechange=CallBack; xmlHttp.setRequestHeader(Content-type,application/x-www-form-urlencoded); /向服务器发送请求向服务器发送请求 xmlHttp.send(null); 2620

16、21/3/9判断用户名是否存在完整代码参考（判断用户名是否存在完整代码参考（.NET 版）版）/创建创建xmlHttpRequest对象的实例对象的实例 function CreateXMLHTTPRequest() try return new ActiveXObject(Msxml2.XMLHTTP); catch(e) try return new ActiveXObject(Microsoft.XMLHTTP); catch(e) try return new XMLHTTPRequest(); catch(e) alert(cant create xmlhttprequest!);

17、return null; 272021/3/9判断用户名是否存在完整代码参考（判断用户名是否存在完整代码参考（.NET 版）版） /获取服务器回传的值获取服务器回传的值 function CallBack() if(xmlHttp.readyState=4&xmlHttp.status=200) document.getElementById(divUser).innerHTML=xmlHttp.responseText; 282021/3/9判断用户名是否存在完整代码参考（判断用户名是否存在完整代码参考（.NET 版）版） 用户注册用户注册 用户名：用户名： 密码：密码： 29202

18、1/3/9判断用户名是否存在完整代码参考（判断用户名是否存在完整代码参考（.NET 版）版）ValiUser.aspxValiUser.aspx.cs protected void Page_Load(object sender, EventArgs e) string username = zhangsan; string getUser = Request.QueryStringusername.ToString(); if (username = getUser) Response.Write(该用户名已注册！该用户名已注册！); else Response.Write(该用户名可以注册

19、！该用户名可以注册！); 服务器端：服务器端：302021/3/9XmlHttpRequest 认识认识XmlHttpRequest 创建创建XmlHttpRequest对象对象 IE：xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);Xmlhttp=new ActiveXObject(Msxml2.XMLHTTP);Xmlhttp=new ActiveXObject(Msxml2.XMLHTTP.4.0);FireFox:xmlhttp=new XmlHttpRequest();312021/3/9认识认识XmlHttpRequest XmlHttpR

20、equest对象的属性、方法和事件对象的属性、方法和事件 n readyState属性属性 值值状态说明状态说明0 0未初始化状态。此时，创建了未初始化状态。此时，创建了XmlHttpRequestXmlHttpRequest对象，但还未初始化对象，但还未初始化1 1准备发送状态。此时，已经调用了准备发送状态。此时，已经调用了XmlHttpRequestXmlHttpRequest对象的对象的open()open()方法，已方法，已经准备好将经准备好将HTTPHTTP请求发送到服务器端请求发送到服务器端2 2已发送状态。此时，已经通过已发送状态。此时，已经通过XmlHttpRequestXml

21、HttpRequest对象的对象的send()send()方法将一个请方法将一个请求发送到服务器端，但是还没有收到响应求发送到服务器端，但是还没有收到响应3 3正在接收状态。此时，已经接收到正在接收状态。此时，已经接收到HTTPHTTP响应的头部信息，但是消息体部分响应的头部信息，但是消息体部分还没有完全接收到还没有完全接收到4 4完成响应状态。此时，已经完成了完成响应状态。此时，已经完成了HTTPResponseHTTPResponse响应的接收响应的接收function doUpdate() /判断是否是完成状态 if(xmlhttp.readystate=4) /判断是否执行成功 if(

22、xmlhttp.status=200) document.getElementById(mytext).innerHTML=xmlhttp.responsetext; 322021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事件对象的属性、方法和事件 n responseText属性属性 readyState的值为的值为0、1或或2时，时，responseText属性包含一个空字符串属性包含一个空字符串 readyState的值为的值为3（正在接收）时，（正在接收）时，responseText属性包含还未完成属性包含还未完成的响应信息，但的响应信

23、息，但HTTP响应的头部信息已经接收到响应的头部信息已经接收到 readyState属性值为属性值为4（完成响应接收）时，（完成响应接收）时，responseText才包含完整才包含完整的响应信息的响应信息 if(xmlhttp.readystate=4) /判断是否执行成功 if(xmlhttp.status=200) document.getElementById(mytext).innerHTML=xmlhttp.responsetext; 332021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事件对象的属性、方法和事件 n respon

24、seXML属性属性 只有只有readyState的值为的值为4且服务器端响应的头部且服务器端响应的头部Content-Type的的MIME类型指定为类型指定为XML时，该属性才会存在值时，该属性才会存在值 xmlHttp.onreadystatechange = handleStateChange; xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open(GET, property.xml, true); xmlHttp.open(GET, property.xml, true); xmlHttp.send(null); xml

25、Http.send(null); function parseResults()function parseResults() var results = xmlHttp.responseXML; var results = xmlHttp.responseXML; 342021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事件对象的属性、方法和事件 n status属性属性 status属性描述属性描述HTTP状态代码。但只有当状态代码。但只有当readyState属性为属性为3或或4时，才能访问时，才能访问status属性属性 n status

26、Text属性属性 statusText属性描述了属性描述了HTTP状态代码的文本状态代码的文本 if(xmlhttp.readystate=4) /判断是否执行成功 if(xmlhttp.status=200)document.getElementById(mytext).innerHTML=xmlhttp.responsetext; 352021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事件对象的属性、方法和事件 n onreadystatechange事件事件 每当每当readyState属性值发生改变时，就会触发属性值发生改变时，就会触发

27、onreadystatechange事件事件 xmlhttp.onreadystatechange=doUpdate;362021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事件对象的属性、方法和事件 n open()方法方法 open(method,uri,async,username,password)方法方法用于初始化用于初始化XmlHttpRequest对象对象参数参数说明说明method 必须的，用于指定发送必须的，用于指定发送HTTP请求的方式请求的方式 uri指定指定XmlHttpRequest对象把请求发送到服务器响应的对象把请求

28、发送到服务器响应的URI async用于指定请求是否是异步的，默认值是用于指定请求是否是异步的，默认值是true username,password可选的，如果需要服务器验证访问用户，就可以设置可选的，如果需要服务器验证访问用户，就可以设置username和和password参数参数 xmlhttp.open(GET,person.xml,true);xmlHttp.Open(GET,DataPage.aspx?city=+encodeURIComponent(city), true); 372021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事

29、件对象的属性、方法和事件 n send()方法方法 send()方法必须在方法必须在readyState属性值为属性值为1时，即调用时，即调用open()方法后才能调用方法后才能调用 在调用在调用send()方法以后到接收到响应信息之前，方法以后到接收到响应信息之前，readyState属性的值被设置为属性的值被设置为2 一旦接收到响应消息，一旦接收到响应消息，readyState属性值就会被设属性值就会被设置为置为3 直到响应接收完成，直到响应接收完成，readyState属性值才被设置为属性值才被设置为4 xmlHttp.send(null); xmlHttp.Send(param); 3

30、82021/3/9认识认识XmlHttpRequest XmlHttpRequest对象的属性、方法和事件对象的属性、方法和事件 n setRequestHeader()方法方法 用来设置用来设置HTTP请求的头部信息。必须在请求的头部信息。必须在open()方法方法调用后调用该方法，否则将出现异常调用后调用该方法，否则将出现异常 xmlhttp.setRequestHeader(Content-type,application/x-www-form-urlencoded;charset=UTF-8;);392021/3/9认识认识XmlHttpRequest XmlHttpRequest对象

31、的属性、方法和事件对象的属性、方法和事件 n getResponseHeader()方法方法 用于检索响应的头部信息，只有当用于检索响应的头部信息，只有当readyState属性值属性值为为3或或4时才可以调用该方法时才可以调用该方法 xmlhttp.getResponseHeader(Server)402021/3/92.2 GET方式请求和方式请求和POST方式请求方式请求 GET方式请求方式请求n GET把参数添加到把参数添加到URL中，值和表单内各个字中，值和表单内各个字段一一对应，参数在段一一对应，参数在URL中可以看到中可以看到 function getData() createX

32、mlHttpRequest(); var city = $(ddlCity).value; xmlHttp.onreadystatechange = statechange; x m l H t t p . O p e n ( G E T , D a t a P a g e . a s p x ? c i t y = “ + encodeURIComponent(city), true);xmlHttp.Send(null); 412021/3/9GET方式请求和方式请求和POST方式请求方式请求 POST方式请求方式请求n 通过通过HTTP POST机制，将表单内各个字段与其内容放机制，将表单内各个字段与其内容放置在置在HTML header内一起传送到请求的内一起传送到请求的URL地