从JS到AJAX-08Ajax入门报告.ppt

Ajax入门 Ajax AJAX是”Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写，是一种运用JS和XML，在浏览器和服务器之间传送或接收数据的技术。 AJAX的工作原理是在用户层和服务层之间加了一个中间层，使用户请求与服务器响应异步化。这样就把以前的一些服务器承担的工作转交给客户端，利用客户端闲置的处理能力来处理，减轻了服务器和宽带的负担。AJAX的优势主要体现在这里。 传统架构 PK AJAX架构 浏览器端 用户界面 服务器端 HTTP服务器 应用服务器 数据库服务器 HTTP请求 HTML CSS数据 浏览器端 用户界面 服务器端 HTTP或XML 服务器 应用服务器 数据库服务器 HTTP请求 XML数据 传统的Web应用模型 AJAX引擎 JS调用 HTML CSS数据 AJAX Web应用模型 AJAX工作机理 XML DOM JavaScript CSS 更新客户 端内容 接收服务 器响应 向服务器 发送请求 初始化XML HttpRequest 捕获浏览器事件 注册AJAX函数 浏览器初始化 发送请求 判断状态值 DOM处理 为某个事件 针对不同的 关联回调函数 接收响应 responseText 示例 考虑以下情景： 当用户输入字母后，系统自动查找姓名并显示进行参考 创建静态页面 创建XMLHttpRequest 要实现这种功能，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest（简称XHR）。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是Ajax 的核心。该对象的几个常用方法和属性： open()：建立到服务器的新请求 send()：向服务器发送请求 readyState：提供当前 HTML 的就绪状态 status：服务器响应的状态代码 responseText：服务器返回的请求响应文本 XMLHttpRequest方法 方法 描述 abort() 停止当前请求 getAllResponseHeader(“header”) 返回HTTP请求的所有响应头部的键/值字符串 open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword) bstrMethodhttp方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 bstrUrl请求的URL地址，可以为绝对地址也可以为相对地址 varAsync[可选]布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 bstrUser[可选]如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。 bstrPassword[可选]验证信息中的密码部分，如果用户名为空，则此值将被忽略。 send(content) 向服务器发送请求 setRequestHeader(“header”,”value”) 为指定头部属性设置指定值 属性 描述 onreadystatechange 状态改变的事件触发器，通常绑定一个JS函数，每当状态发生改变时，就调用该函数 readyState 请求的5个状态，有5个可取值： 0=未初始化 1=读取中 2=以读取 3=交互中 4=完成 responseText 从服务器返回的文本形式的响应内容 responseXML 从服务器返回的兼容DOM的XML文档对象 status 从服务器返回的状态码。例如404(文件找不到)、200(成功) statusText 从服务器返回的状态文本信息。例如：OK或Not Found(未找到)等。 创建过程 创建说明 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。创建 XMLHttpRequest 对象的语法： variable=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： variable=new ActiveXObject(Microsoft.XMLHTTP); 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ： 判断输入 主要用来判断是否是输入，还是删除，如果是删除则返回空值 建立服务器请求 如需将请求发送到服务器，我们使用 XMLHtt