Ajax ppt

28
IT@ANY
29
IT@ANY
13
建立XMLHttpRequest对象
IT@ANY
鉴于客户端浏览器的不同，以上示例并不一定能 够成功运行 因为不同浏览器中这个对象存在不同的版本，所 以通常我们会创建一个工厂函数，以支持任何浏 览器下的XMLHttpRequest对象
14
工厂方法
IT@ANY
function createXHR(){ var xhr; // 如果ActiveX对象可用，则使用的肯定是IE浏览器 if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else{ // 使用Javascript方法处理 xhr = new XMLHttpRequest(); } }
DOM
XMLHttpRequest
6
AJAX特性
IT@ANY
建造能交付功能丰富的，响应能力良好的，具有 良好用户操作体验的标准WEB技术
–是应用，而不是网站 –平滑，连续的交互 –实时 –充分的支持 –视觉效果
7
恰当使用AJAX
IT@ANY
AJAX豪华版 对AJAX的使用最彻底，应用感觉上就像浏览器里 的桌面应用，因为交互由浏览器在驱动—它协调用 户与服务器之间的所有交互，因此几乎没有直接的 页面刷新；类似的，不需要在服务器做会话跟踪， 因为没有页面的刷新，所有相关状态都可以保持在 浏览器脚本里，服务器不必了解HTML，并且可能 只提供一般的WEB服务。 AJAX轻量版 总体来说，AJAX轻量版应用比较像传统的WEB应 用，但在一些地方加上了AJAX功能，例如，在标 准表单提交前，AJAX可以被用来验证表单，或者 在用户请求协助时，AJAX可以被用来显示页面的 操作说明。
8
第二部分
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
IT@ANY
9
Ajax的核心：XMLHttpRequest
IT@ANY
XMLHttpRequest 是AJAX的核心部分 XMLHttpRequest 提供了对 HTTP 协议的完全的 访问，包括做出POST和HEAD请求以及普通的 GET请求的能力 XMLHttpRequest 可以同步或异步地返回 Web 服 务器的响应，并且能够以文本或者一个 DOM 文 档的形式返回内容 尽管名为 XMLHttpRequest，但它并不限于和 XML 文档一起使用，它可以接收任何形式的文 本文档
23
XHR方法—getResponseHeader
语法：getResponseHeader(header)
– header：要获取的响应头的名称
IT@ANY
说明：用于获取一个 HTTP响应的头部 示例：
xhr.open("GET", "…",false); alert(xhr. getResponseHeader("Content-type");
onreadystatechange：XHR的核心也几乎是 唯一的事件，指定当readyState属性改变时 的事件处理句柄 onerror ：仅Mozilla onprogress ：仅Mozilla onload：仅Mozilla
19
XHR方法—abort
IT@ANY
取消当前响应，关闭连接并且结束任何未 决的网络活动。 此方法把 XMLHttpRequest对象的 readyState重置为 0，并且取消所有未决的 网络活动。 如果请求用了太长时间，而且响应不再必 要的时候，可以调用这个方法。
另有getAllResponseHeaders()方法获取所有头部 信息
24
又见中文乱码
IT@ANY
处理方式一：与原来的GET/POST分别处理基本 一致 处理方式二：采用客户端二次编码，服务器端一 次解码
25
第三部分
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
17
XHR属性—status
IT@ANY
status：由服务器返回的 HTTP 状态代码， 如 200，404等 statusText：用名称指定了请求的 HTTP 的 状态代码，如：当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"
18
XHR事件
IT@ANY
11
最简单的AJAX程序-客户端
function testAjax(){ var req=new XMLHttpRequest(); req.open("get","/ajax/reada",false); req.send(null); var str=req.responseText; alert(str); }
IT@ANY
26
用户名注册认证
实现步骤：
– – – – 创建一个用于注册的表单 编写失去焦点事件onblur 提交用户注册的用户名到服务器端 根据返回值显示相应信息
IT@ANY
27
总结
IT@ANY
了解Ajax技术的本质与核心组成 掌握XMLHttpRequest的基本语法：常用属 性、事件和方法，据此理解其工作原理 掌握简单的Ajax应用：用户名验证
21
XHR方法—send
语法：send(body)
IT@ANY
– body：要发送给服务器的内容。如果没有内容要发送， 最好写为null
说明：open方法中的async参数决定了该方法的同 步或异步
22
XHR方法—setRequestHeader
语法：setRequestHeader(header,value)
IT@ANY
3
第一部分
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
IT@ANY
4
AJAX的起源
IT@ANY
2005年2月8号，一名叫Jesse James Garret 的程序员发布了一篇在线文章—— “Ajax:Web应用的新方法” Garret引进了“Ajax”这个词，为像Google Maps和Google Suggest这类新一代的行为 丰富的Web应用(rich web application)背后 的架构给出定义
10
浏览器的选择
IT@ANY
虽然是Microsoft发明了此对象，但目前在多数浏 览器里，XMLHttpRequest是标准的JavaScript类， 支持XMLHttpRequest对象的主流浏览器：
– – – – – Windows IE 5+ FireFox 1+ Mozilla 1+ Safari1.2+ Opera7.6+
20
XHR方法—open
语法：open(method, url, async, user, pwd)
IT@ANY
– method参数是用于请求的HTTP方法，值包括 GET、POST 和 HEAD。 – url参数是请求的资源，大多数浏览器实施了一个同源安全 策略，并且要求这个URL与包含脚本的文本具有相同的主 机名和端口。 – async参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到 响应完全接收。如果这个参数是 true 或省略，请求是异步 的，且通常需要一个 onreadystatechange 事件句柄。 – user 和 pwd 参数是可选的，为 url 所需的授权提供认证资 格。如果指定了，它们会覆盖 url 自己指定的任何资格。
5
Ajax技术本质
Ajax既不是插件，也 不是专利技术，而是 一种架构风格（高层 次的模式），它由很 多相关的技术和想法 组成。 Ajax缩写： Asynchronous JavaScript And XML， 实际上AJAX由以下几 部分组成
JavaScript
IT@ANY
CSS
AJAX
15
XHR属性—readyState
IT@ANY
readyState：返回当前请求的状态，属性只读； 当一个XHR初次创建时，这个属性的值从 0 开始， 直到接收到完整的 HTTP 响应，这个值增加到 4：
– 0：未初始化，对象已经建立，尚未调用open方法创建 http请求 – 1：初始化，对象已经建立，但未调用send方法发送 http请求 – 2：发送数据，send方法已调用，但当前的状态及http 头未知 – 3：数据传送中，已经接收部分数据，因为响应及http 头不全，这时获取部分数据会出现错误 – 4：传送完成，可通过responseXXX获取完整的响应数 据
– header：要设置的头部的名称 – value：要设置的头部的值
IT@ANY
说明：用于设置一个 HTTP 请求的头部 示例：采用POST提交数据
xhr.open("POST", "…",false); xhr. setRequestHeader("Content-type","application/xwww-form-urlencoded;charset=GBK"); xhr.send("name=tom&age=22");
IT@ANY
12
最简单的AJAX程序-服务端
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain"); PrintWriter out = response.getWriter(); out.println("Hello World!"); out.flush(); out.close(); }
IT@ANY
第一课
Ajax基础
本课程的主要内容
Ajax通信原理 Ajax核心：XMLHttpRequest JavaScript框架：jQuery Ajax框架：DWR Ajax常见应用
IT@ANY
2
本章目标
了解Ajax的相关概念 掌握XMLHttpRequest的语法 掌握简单的Ajax应用
16
XHR属性—responseXXX
源自文库
IT@ANY
responseBody：将回应信息正文以unsigned byte 数组形式返回，属性只读 responseText：目前为止从服务器接收到的响应 体（不包括头部），或者如果还没有接收到数据 的话，就是空字符串，属性只读 responseXML：对请求的响应，解析为 XML 并 作为 Document 对象返回，属性只读