《javascript第十七讲：Ajax基础.ppt》由会员分享，可在线阅读，更多相关《javascript第十七讲：Ajax基础.ppt（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、联系方式：北京源智天下科技有限公司第十七讲：第十七讲：Ajax基础基础讲师：杨贵讲师：杨贵e-mail:http:/ XMLHttpRequest对象对象 局部更新局部更新 实现实现Ajax 1-3北京源智天下科技有限公司联系方式：引言引言最近兴起的一种称为最近兴起的一种称为Ajax的技术，可以实现网页局部刷的技术，可以实现网页局部刷新，从而带省了大带的网络带宽并且提高了网络传输的新，从而带省了大带的网络带宽并且提高了网络传输的速度。速度。Ajax含义可以理解为异步含义可以理解为异步JavaScript和和XML，其技术核心是通过将少量数据用其技术核心是通过将少量数据用XML语言来描述并且在语
2、言来描述并且在浏览器和服务器间进行异步传输。基于这样技术，网页浏览器和服务器间进行异步传输。基于这样技术，网页可以实现动态刷新可以实现动态刷新 1-4北京源智天下科技有限公司联系方式：传统的传统的Web技术及技术及Ajax的由来的由来使用异步通信组件与服务器通信使用异步通信组件与服务器通信使用使用XMLHttpRequest组件与服务器异步通信组件与服务器异步通信 客户端用客户端用JavaScript实现网页内容的更新显示实现网页内容的更新显示 传统的传统的Web浏览器与服务器间采用同步交互的技术，用户浏览器与服务器间采用同步交互的技术，用户表单完整的发送到服务器端进行处理后再返回一个新页面到
3、浏表单完整的发送到服务器端进行处理后再返回一个新页面到浏览器。这一过程中因为网速延迟而导致浏览器有一定等待时间，览器。这一过程中因为网速延迟而导致浏览器有一定等待时间，交互体验比较差。交互体验比较差。1-5北京源智天下科技有限公司联系方式：浏览器和服务器间的交互浏览器和服务器间的交互1-6北京源智天下科技有限公司联系方式：Ajax技术的组成部分技术的组成部分Ajax技术的组成部分技术的组成部分Ajax并不是什么新技术，而是一些老技术的组合。并不是什么新技术，而是一些老技术的组合。JavaScript Ajax引擎就是运行于浏览器中的一组引擎就是运行于浏览器中的一组JavaScript程序程序。
4、XMLHttpRequest XMLHttpRequest允许以异步方式从服务器中获取数据，允许以异步方式从服务器中获取数据，而不需要每次都刷新网页，也不需要将所有的数据都交而不需要每次都刷新网页，也不需要将所有的数据都交付给服务器处理。付给服务器处理。CSS控制数据在浏览器中呈现的样式控制数据在浏览器中呈现的样式。DOM 脚本程序通过脚本程序通过DOM来操作文档。来操作文档。XML 用于描述和服务器间交换的数据。用于描述和服务器间交换的数据。1-7北京源智天下科技有限公司联系方式：XMLHttpRequest对象对象 XMLHttpRequest对象是浏览器中实现通过对象是浏览器中实现通过h
5、ttp协议和协议和服务器交换服务器交换DOM数据的程序集合数据的程序集合。Ajax应用中主要使用它和服务器间的异步调用机制应用中主要使用它和服务器间的异步调用机制。XMLHttpRequest创建创建 创建创建XMLHttpRequest的方式和其它的方式和其它JavaScript对象一对象一样，只是针对样，只是针对IE浏览器时稍有差别，因为其在浏览器时稍有差别，因为其在IE中是以中是以ActiveX控件的形式出现控件的形式出现。语法如下：。语法如下：通常先判断当前浏览器的类型，再针对不同的浏览器采通常先判断当前浏览器的类型，再针对不同的浏览器采用不同的创建方式用不同的创建方式。var xml
6、HttpRqObj=new XMLHttpRequest();/普通创建方式普通创建方式var xmlHttpRqObj=new ActiveXObject(“Microsoft.XMLHTTP”);/IE浏览器中的方式浏览器中的方式1-8北京源智天下科技有限公司联系方式：实现实现Ajax 实现实现Ajax的步骤的步骤：创建创建XMLHttpRequest对象对象。创建一个创建一个HTTP请求。请求。设置响应设置响应HTTP请求回调函数。请求回调函数。发送发送HTTP请求。请求。等待请示的响应。等待请示的响应。使用使用DOM实现局部刷新。实现局部刷新。1-9北京源智天下科技有限公司联系方式：创
7、建创建HTTP请求请求 HTTP请求是指请求是指Web浏览器向一个浏览器向一个Web服务器发送加载网页的请求服务器发送加载网页的请求 HTTP请求一般包括服务器的地址、所要请求的文件以及传送的参数请求一般包括服务器的地址、所要请求的文件以及传送的参数等。等。设置了设置了HTTP请求之后请求之后XMLHttpRequest才知道从何处加载数据，其才知道从何处加载数据，其机理与先前介绍的浏览器机理与先前介绍的浏览器HTTP请求一样。请求一样。调用调用XMLHttpRequest对象的对象的 open方法即可设置请求以及请求的方方法即可设置请求以及请求的方式式。01var XmlHtpRq=new
8、ActiveX(“Microsoft.XMLHTTP”);/创建创建XMLHttpRequest对象对象02XmlHtpRq.open(“GET”,”index.php?id=12”);/创建创建HTTP请求请求提示：提示：HTTP请求方式分两种，即请求方式分两种，即POST和和GET方式。方式。1-10北京源智天下科技有限公司联系方式：设置设置HTTP响应回调函数响应回调函数 XMLHttpRequest对象根据自身状态的变化调用相应的对象根据自身状态的变化调用相应的函数，用户因此也抓到处理数据的时机。函数，用户因此也抓到处理数据的时机。通过设置通过设置readystatechange事件的
9、处理函数，即可监事件的处理函数，即可监听听XMLHttpRequest对象状态的变化对象状态的变化。01/程序开始程序开始02var XmlHtpRq=new ActiveX(“Microsoft.XMLHTTP”);/创建创建XMLHttpRequest对象对象03XmlHtpRq.readystatechange=function(obj)/readystatechange事件处理程序事件处理程序0405/在此根据各种状态进行不同的操作在此根据各种状态进行不同的操作06071-11北京源智天下科技有限公司联系方式：发送发送HTTP请求请求 通常使用通常使用XMLHttpRequest对象的
10、对象的send方法完成任务，方法完成任务，该方法带一个可选参数。当请求是该方法带一个可选参数。当请求是POST方式时该参数方式时该参数包含发往服务器的数据，是包含发往服务器的数据，是GET方式是该参数被忽略。方式是该参数被忽略。XMLHttpRequest.send(data);/带参数带参数XMLHttpRequest.send(null);/不带参数不带参数1-12北京源智天下科技有限公司联系方式：一个完整的一个完整的Ajax实例实例 很多网站的会员注册页面，利用很多网站的会员注册页面，利用Ajax技术在用户填写表技术在用户填写表单但还未发送表单时将已经填好用户名发送到服务器进单但还未发送
11、表单时将已经填好用户名发送到服务器进行验证，如果存在相同用户名的用户则输出提示。行验证，如果存在相同用户名的用户则输出提示。在会员注册页面实现用户重名检测的功能，如果填写的在会员注册页面实现用户重名检测的功能，如果填写的用户名已经存在则给出更换提示，客户端程序如用户名已经存在则给出更换提示，客户端程序如 下：下：1-13北京源智天下科技有限公司联系方式：一个完整的一个完整的Ajax实例实例 05 06用户名：用户名：07 08(填入用户名，例如填入用户名，例如admin)09 10/脚本开始脚本开始11 var xmlHtpRq;/保存保存XMLHttpRequest对象引用对象引用12 fu
12、nction OnStatusChange()/状态事件处理程序状态事件处理程序13 14if(xmlHtpRq.readyState=4)/正常响应状态正常响应状态1516if(xmlHtpRq.status=200)/正确的接收响应数据正确的接收响应数据1718document.getElementById(message).innerHTML=xmlHtpRq.responseText;19 20else/状态不正常状态不正常2122document.getElementById(message).innerHTML=xmlHtpRq.status;/输出状态码输出状态码232425 1
13、-14北京源智天下科技有限公司联系方式：一个完整的一个完整的Ajax实例实例26 function OnBlur(obj)/文本框失去焦点时执行文本框失去焦点时执行27 28xmlHtpRq=new ActiveXObject(Microsoft.XMLHTTP);/创建创建XMLHttpRequest对象对象29url=http:/localhost/server.php?username=+obj.value;/构建构建URL30 xmlHtpRq.open(GET,url,true);/打开连接打开连接31xmlHtpRq.onreadystatechange=OnStatusChange;/注册状态事件侦听器注册状态事件侦听器32xmlHtpRq.send(null);/发送请求发送请求33 34 35 1-15北京源智天下科技有限公司联系方式：一个完整的一个完整的Ajax实例实例01