javascript第十七讲：Ajax基础.pptVIP

1-* 北京源智天下科技有限公司 联系方式： 联系方式： 北京源智天下科技有限公司 第十七讲：Ajax基础 讲师：杨贵 e-mail:jtclass@163.com / 课程内容安排 引言 传统的Web技术和Ajax的由来、原理 Ajax技术的组成部分 XMLHttpRequest对象 局部更新 实现Ajax 引言 最近兴起的一种称为Ajax的技术，可以实现网页局部刷新，从而带省了大带的网络带宽并且提高了网络传输的速度。Ajax含义可以理解为异步JavaScript和XML，其技术核心是通过将少量数据用XML语言来描述并且在浏览器和服务器间进行异步传输。基于这样技术，网页可以实现动态刷新 传统的Web技术及Ajax的由来 使用异步通信组件与服务器通信 使用XMLHttpRequest组件与服务器异步通信 客户端用JavaScript实现网页内容的更新显示 传统的Web浏览器与服务器间采用同步交互的技术，用户表单完整的发送到服务器端进行处理后再返回一个新页面到浏览器。这一过程中因为网速延迟而导致浏览器有一定等待时间，交互体验比较差。 浏览器和服务器间的交互 Ajax技术的组成部分 Ajax技术的组成部分 Ajax并不是什么新技术，而是一些老技术的组合。 JavaScript Ajax引擎就是运行于浏览器中的一组JavaScript程序 。 XMLHttpRequest XMLHttpRequest允许以异步方式从服务器中获取数据，而不需要每次都刷新网页，也不需要将所有的数据都交付给服务器处理。 CSS 控制数据在浏览器中呈现的样式 。 DOM 脚本程序通过DOM来操作文档。 XML 用于描述和服务器间交换的数据。 XMLHttpRequest对象 XMLHttpRequest对象是浏览器中实现通过http协议和服务器交换DOM数据的程序集合 。 Ajax应用中主要使用它和服务器间的异步调用机制 。 XMLHttpRequest创建 创建XMLHttpRequest的方式和其它JavaScript对象一样，只是针对IE浏览器时稍有差别，因为其在IE中是以ActiveX控件的形式出现 。语法如下： 通常先判断当前浏览器的类型，再针对不同的浏览器采用不同的创建方式 。 var xmlHttpRqObj = new XMLHttpRequest(); // 普通创建方式 var xmlHttpRqObj = new ActiveXObject(“Microsoft.XMLHTTP”); // IE浏览器中的方式 实现Ajax 实现Ajax的步骤 ： 创建XMLHttpRequest对象 。 创建一个HTTP请求。 设置响应HTTP请求回调函数。 发送HTTP请求。 等待请示的响应。 使用DOM实现局部刷新。 创建HTTP请求 HTTP请求是指Web浏览器向一个Web服务器发送加载网页的请求 HTTP请求一般包括服务器的地址、所要请求的文件以及传送的参数等。 设置了HTTP请求之后XMLHttpRequest才知道从何处加载数据，其机理与先前介绍的浏览器HTTP请求一样。 调用XMLHttpRequest对象的 open方法即可设置请求以及请求的方式 。 01 var XmlHtpRq = new ActiveX( “Microsoft.XMLHTTP” ); // 创建XMLHttpRequest对象 02 XmlHtpRq.open(“GET”,”index.php?id=12”); // 创建HTTP请求 提示：HTTP请求方式分两种，即POST和GET方式。 设置HTTP响应回调函数 XMLHttpRequest对象根据自身状态的变化调用相应的函数，用户因此也抓到处理数据的时机。 通过设置readystatechange事件的处理函数，即可监听XMLHttpRequest对象状态的变化 。 01 script language=javascript // 程序开始 02 var XmlHtpRq = new ActiveX( “Microsoft.XMLHTTP” ); // 创建XMLHttpRequest对象 03 XmlHtpRq.readystatechange = function( obj ) // readystatechange事件处理程序 04 { 05 // 在此根据各种状态进行不同的操作 06 } 07 /script !--程序结束-- 发送HTTP请求  通常使用XMLHttpRequest对象的send方法完成任务，该方法带一个可选参数。当请求是POST方式时该参数包含发往服务器的数据，是GET方式是该参数被