Ajax设计选编.ppt

Web Ajax程序设计 第9讲 知识点回顾 1、DOM 中对节点的引用有那几种方式？ 2、Ajax中注册事件有那几种方式？（3种） 第9讲 Ajax的核心技术 主要内容 Ajax 异步请求对象以其应用（重点掌握）。 搭建基本的Ajax开发框架。（掌握应用） 异步请求对象的介绍 1999年上半年，微软公司在Internet Explorer5.0中首次使用了一种新技术，浏览者不用通过当前页面的跳转，或者使用表单提交发送请求，而是在当前页面中发送请求到服务器，也可以从服务器读取数据，这种技术的实现依赖于一个特殊的对象--ActiveX对象，即：XMLHTTP. 到了2000年它几乎成了事实上的标准。后来，Opera、Safari等浏览器也相继实现了XMLHttpRequest对象，于是XMLHttpRequest成了这个技术的正式名词。 关于XMLHttpRequest最通用的定义是：一套可以在javascript、JScript、VBScript等脚步语言中使用的API， XMLHttpRequest的用处是提供与服务器通信的手段。 W3C于2012年7月再次发布了XMLHttpRequest草案， XMLHttpRequest即将成为正式规范，目前所有浏览器都已经支持最新的XMLHttpRequest规范。 XMLHttpRequest是XMLHttp组件的对象，通过这个对象，Ajax可以像桌面应用程序一样只与服务器进行数据层的交换， 而不必每次都刷新界面，也不必每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快响应速度，缩短了用户的等待时间 。 异步请求对象应用核心代码实例 try { var xmlhttp = new XMLHttpRequest(); } catch(e) { var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); } xmlhttp.open(GET,hello_world.php,true); 9.1 XMLHttpRequest对象详解 xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 xmlhttp.status == 200) { alert(xmlhttp.responseText); } } xmlhttp.send(); 核心代码的设计流程 1、兼容浏览器 2、Open方法建立与服务器的链接 3、定义回调函数 4、send 发送异步请求 做下一次数据请求准备 核心代码软件设计流程 1、兼容浏览器 在IE核心浏览器中，IE浏览器对异步请求对象支持是通过ActiveXObject来提供的，而在非IE核心浏览器中XMLHTTPRequest 是作为Windows对象的属性而原生支持。如：firefox浏览器。 try { var xmlhttp = new XMLHttpRequest(); } catch(e） ………………??????(1) { var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); } 2. 初始化请求 使用XMLHttpRequest对象的open方法初始化请求; xmlhttp.open(‘GET’, ‘service/hello_world.php’, true); open方法的3个参数 ’GET’: 定义请求的方法为get方法; ’service/hello_world.php’: 定义了请求的目标地址; ‘true‘: 定义了请求为异步请求； 完整的open方法原型 oXMLHttpRequest.open( strMethod, strUrl, boolAsync); ………….??????(2) 3、定义回调函数 主要是判断两个条件： readystate 值是否等于4。 status 值是否等于200。 这两条件满足后，就取回服务器返回过来的数据，然后进行处理 通过readystate 值反映出服务器的响应是否完成。 五种工作状态： 0、(未初始化): 对象已创建,但未调用open方法初始化。 1、(初始化): 对象已经初始化,但未调用send()方法。 2、(发送数据): send方法已调用,但该对象在等待状态码和头的返回。 3、(数据传送中): 已经开始接收数据.但没有全部接收完，还不能通过该对象查看部分结果