Ajax1-Ajax基本原理及开发过程.ppt

* * XMLHttpRequest对象处理响应 响应responseXML function handleResponse() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var retElement = xmlHttp.responseXML; var userid = getNodeValue(retElement, userid); var username = getNodeValue(retElement, username); var online = getNodeValue(retElement, “online); … } } } 课后作业 1．使用“new XMLHttpRequest()”创建的对象在下面哪种浏览器环境下不支持 A、IE7 B、IE6 C、Firefox D、Chrome 2. XMLHttpRequest对象的返回状态值有几种？ A、3 B、4 C、5 D、6 3. 写出Ajax编程的几个步骤 4．使用Ajax技术判断网页输入的账号是否已被注册。要求在网页表单事件响应、服务器端业务处理、客户端回调函数中输出时间信息。 * * * * 重点： 实例开发步骤 XHR对象的创建、方法、属性 * jsp、servlet实现邮箱注册功能 账号规则验证，使用javascript 账号是否已被注册，使用form表单提交 问题总结：1、如果账号已被注册，需要重载页面，重新提交；2、这个过程需要等待，用户体验不好；3、页面重载，用户注册信息之外的网页数据也需要网络传输，浪费网络资源 Ajax技术可以解决这些问题！ 技术：css、html、dom、javascript、webserver 使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。 这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。 * * * XSLT是一种对XML文档进行转化的语言 * XSLT是一种对XML文档进行转化的语言 * 1、用户在 Web 页面的交互动作触发 DOM 事件 DOM事件处理者收到事件发生的消息处理 2、事件处理者创建 XMLHttpRequest 对象，设置目标URL、HTTP方法(Get、Post)等内容，注册服务器响应的回调函数 3、向服务器发生异步的HTTP请求 异步请求发出后，浏览器不必等待服务器响应，用户可以继续与页面交互 4、服务器收到请求后，指派对应的 Servlet 处理对应逻辑 5、将结果数据序列化成 XML 或文本作为响应内容，返回给浏览器 6、调用在 XMLHttpRequest 对象上注册的回调函数 回调函数解析响应内容 XML 或文本 ，依据其中的数据使用JavaScript操纵DOM对象更新页面内容 * * * * !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd html head meta http-equiv=Content-Type content=text/html; charset=UTF-8 script type=text/javascript src=status.js/script title查询客服人员状态/title /head body a请输入客服人员姓名：/a input id=sName onblur=getStatus() span id=status/span /body /html * * * * * * * 为何要用到setRequestHeader? 通常在HTTP协议里，客户端向服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，告诉服务器客户端要下载什么信息以及相关的参数。而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。 但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这时当我们需要修改或添加这些参数时就用到了 CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码 CONTENT-TYPE:multipart/form-data getResponseHeader 在实际程序中，有