Ajax的学习资料.ppt

Ajax 课程安排 Ajax基础使用Ajax发送异步请求在请求和响应中使用XML使用JSON进行数据传输 第一讲 Ajax基础 什么是Ajax 先来点感觉 看些例子 BACKBASE购物网站GoogleSuggestGoogleMapandmanymore Ajax定义 Ajax AsynchronousJavaScriptandXML 不是一个新的技术 事实上 它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起Ajax的关键技术 使用XHTML HTML 和CSS构建标准化的展示层使用DOM进行动态显示和交互使用XML和XSLT进行数据交换和操纵使用XMLHttpRequest异步获取数据使用JavaScript将所有元素绑定在一起 传统Web应用与Ajax应用的比较 传统Web应用与Ajax应用的比较 cont 在传统的Web应用模型下 大部分的用户操作都会发送一个HTTP请求给服务器 然后服务器开始处理 接收数据 执行业务逻辑 访问数据库等 最后向浏览器返回HTML页面 当服务器处理请求时 用户能够做什么呢 只有等待 传统Web应用与Ajax应用的比较 cont 在传统的Web应用模型下 客户机 浏览器或者本地机器上运行的代码 向服务器发出请求 该请求是同步的 客户机等待服务器的响应 当客户机等待的时候 会用某种形式通知您正在处理 沙漏 特别是Windows上 旋转皮球 通常在Mac机器上 应用程序基本上冻结了 然后过一段时间光标变化了这正是传统Web应用程序让人感到笨拙或缓慢的原因 缺乏真正的交互性 按下按钮时 应用程序实际上变得不能使用 直到刚刚触发的请求得到响应 如果请求需要大量服务器处理 那么等待的时间可能很长 传统Web应用与Ajax应用的比较 cont Ajax应用通过在用户和服务器之间引入一个媒介 Ajaxengine 来异步发送请求 消除了传统的发送请求 等待 发送请求 等待的特性 极大的提高了用户体验 JavaScript基础 JavaScript简介 JavaScript是Netscape公司与Sun公司合作开发的 在JavaScript出现之前 Web浏览器不过是一种能够显示超文本文档的软件的基本部分 而在JavaScript之后 网页的内容不再局限于枯燥的文本 可交互性得到了显著的改善JavaScript是一种脚本语言 一种解释性的 基于对象的脚本语言 JavaScript脚本通常只能通过Web浏览器进行解释和执行而不是像普通意义上的程序那样可以独立运行在HTML基础上 使用JavaScript可以开发交互式Web网页 JavaScript的出现使得网页和用户之间实现了一种实时性的 动态的 交互性的关系 使网页包含更多活跃的元素和更加精彩的内容注意 JavaScript与Java没有任何联系 JavaScript语法 语句 JavaScript脚本的基本组成单位 只需要简单地把各条语句放在不同的行上就可以分割开来 不需要加分号 结束 firststatementsecondstatement但在每条语句的末尾添加 是一种良好的编程习惯 firststatement secondstatement JavaScript语法 注释 单行注释 双斜杠 line1多行注释 line1line2 HTML风格注释 不推荐使用 来结束 JavaScript语法 变量 JavaScript不要求在声明变量时必须明确指出其数据类型 所以称JavaScript为弱类型语言 可以使用统一的关键字var进行声明 varage 33 mood happy 但是提前对变量做出声明是一种良好的编程习惯变量名允许包含字母 数字 美元符号 和下划线字符 但不允许包括空格或标点符号 JavaScript语法 数据类型 JavaScript变量的类型是由变量的值决定的 可以对同一个变量赋予不同数据类型的值 varage thirtythree age 33 JavaScript中重要的数据类型 未定义 undefined 变量未定义空 null 变量未初始化字符串 string 可以放在单引号或双引号中数值 number 可以表示整数 浮点数布尔型 boolean true或false对象 object JavaScript语法 数组 数组用来存储一组值 使用关键字Array来声明 声明时可以指明数组的长度 varcolors newArray varcolors newArray 3 其中new关键字可以省略 类似其它语言 数组的下标从0开始 赋值方法也和其它语言类似 colors 0 red colors 1 black colors 2 white 还可以使用方括号创建数组时同时初始化 varcolors red black white JavaScript语法 数组 cont 使用方括号创建数组对象的简单方法 varcolors 声明空数组对象colors 0 red colors 1 black 通过数组的length属性可以得到数组中元素的个数 数组的长度可以动态扩展 colors 3 blue colors 8 grey 关联数组 在填充数组时为每个新元素明确地给出下标 colors r red colors b black JavaScript语法 操作 条件语句 循环语句 JavaScript中的算术运算符 等 比较运算符 条件语句 if while for等 JavaScript语法 函数 使用函数可以避免重复输入大量相同的内容 JavaScript中使用function关键字定义函数 functionfuncname arg1 arg2 statements 声明一个简单的函数 functionmultiply num1 num2 vartotal num1 num2 returntotal 声明后可以直接调用此函数获取结果 varresult multiply 5 9 注意 JavaScript中的函数不需声明返回类型 参数也不需要声明类型 JavaScript语法 对象 JavaScript对象是由一组相关的属性和方法构成的数据实体 属性和方法都要使用 来访问 object propertyobject method 使用函数来定义 类 functionPerson this age 12 this name noname this sayHello function alert Hello this name 其中this关键字不能省略 使用new关键字来创建对象实例 varvincent newPerson DOM基础 DOM简介 DOM是 DocumentObjectModel 文档对象模型 的首字母缩写 当创建了一个网页并把它加载到Web浏览器中时 就会在幕后创建一个文档对象模型DOM表示被加载到浏览器窗口里的当前页面 浏览器向我们提供了当前页面的模型 而我们可以通过JavaScript访问这个模型DOM把一份文档表示为一棵树 DOM树结构 如下的HTML页面 DOM树结构 cont 浏览器加载该页面并将之转换为树形结构 DOM树结构 cont DOM树中的一切是以最外层的HTML包含元素 即html元素开始的 使用树的比喻 这叫做根元素 rootelement 从根流出的线表示不同标记部分之间的关系 head和body元素是html根元素的孩子 child title是head的孩子 而文本 Trees trees everywhere 是title的孩子 相对的 head是title的父亲 parent title是文本 Trees trees everywhere 的父亲 处在同一层次的且互不包含的两个分支 如head和body 之间称为兄弟 sibling 关系 整个树就这样组织下去 直到浏览器获得与上图类似的结构通常把这样的树结构成为一棵节点树 节点 node DOM文档是由节点构成的集合 此时的节点是文档树上的树枝或者树叶DOM中节点的类型 元素节点 elementnode 诸如 等 元素节点可以包含其它的元素 唯一没有被包含在其它元素里的元素是 它是根元素属性节点 attributenode 元素或多或少地有一些属性 属性可以对元素做出一些具体的描述 因为属性总是被放到起始标签里 所以属性节点总是被包含在元素节点中文本节点 textnode 元素中包含着文本节点 Trees trees everywhere 基本DOM方法 getElementById id 返回一个给定id属性的元素节点相对应的对象 这个方法是与document对象相关联的函数 其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素getElementsByTagName tagname 返回一个对象数组 它们分别对应着文档里的一个特定的元素节点getAttribute 返回对象的属性值setAttribute 修改对象的属性值 重要DOM属性 childNodes可以将节点树中任何一个元素的所有子元素检索出来 这个属性返回一个数组 包含了给定元素节点的全体子元素nodeName返回元素节点的名称 注意 返回的结果全部是大写nodeType用来区分节点的类型 元素节点的nodeType属性值是1 属性节点的nodeType属性值是2 文本节点的nodeType属性值是3nodeValue可以用来存取文本节点的值 对于元素节点或属性节点这个属性返回空 重要DOM属性 cont firstChild和lastChild第一个和最后一个孩子节点 node firstChild等价于node childNodes 0 node lastChild等价于node childNodes node childNodes length 1 parentNode返回元素的父节点nextSibling返回下一个兄弟节点 改变网页结构的DOM方法 createElement tagname 创建新的元素节点 此方法与document对象相关联 新建的元素节点并未与节点树相连appendChild node 把新建的节点插入到节点树的某个节点下 成为这个节点的子节点createTextNode text 创建文本节点insertBefore newNode targetNode 把一个新元素插入到一个现有元素的前面replaceChild newChild oldChild 替换一个孩子节点removeChild node 删除一个孩子节点 基于DOM的Web应用程序示例 基于DOM的Web应用程序示例 首先建立一个非常简单的应用程序 然后再添加一点DOM魔法 注意 DOM可以移动网页中的任何东西而不需要提交表单 创建一个简单的网页 上面只显示一个普通的旧式大礼帽 还有一个标记为HocusPocus 的按钮 初始的HTML清单 注意按钮的类型是button而不是提交按钮 如果使用提交按钮 单击该按钮将导致浏览器提交表单 通过使用一般输入按钮而不是提交按钮 可以把JavaScript函数和它连接起来与浏览器交互而无需提交表单 初始的HTML页面预览 目标效果 下面增加一些魔法 用兔子的图片替换页面中原有的图片 使用getElementById 函数获得元素节点 首先找到网页中表示img元素的DOM节点 一般来说 最简单的办法是用getElementById 方法 它属于代表Web页面的document对象 varelementNode document getElementById id 修改图片 麻烦的办法 完成所需修改有几种方法 有些简单 有些麻烦 但是运用较麻烦的办法是一次很好的DOM练习 首先看看换图片比较麻烦的办法 后面再重新分析一下看看有没有更简单的办法用带兔子的新照片替换原有图片的办法如下 1 创建新的img元素2 访问当前img元素的父元素 也就是它的容器3 在已有img元素之前插入新的img元素作为该容器的子级4 删除原来的img元素5 结合起来以便在用户单击按钮时调用刚刚创建的函数 1 创建新的img元素 创建新的img元素 varnewImage document createElement img 可以创建一个新的元素节点 元素名为img 在HTML中基本上就是 下面需要增加一个属性src 它指定了要加载的图片 newImage setAttribute src rabbit hat gif 注 如果对已有的属性调用setAttribute 则把原来的值替换为指定的值 但是 如果调用setAttribute 并指定一个不存在的属性 DOM就会使用提供的值增加一个属性 2 获得原始图片的父元素 现在有了要插入的图片 还需要找到插入的地方 要将其插入到已有图片之前然后再删除原来的图片 为此需要知道已有图片的父元素 varimgParent hatImage parentNode 3 插入新图片 添加子节点的方法 insertBefore newNode targetNode appendChild newNode 把新图片元素插入到原有图片之前 imgParent insertBefore newImage hatImage 现在原图片的父元素有了两个子元素 新图片和紧跟在后面的旧图片 4 删除旧图片 因为已经得到了旧图片元素的父节点 只要调用removeChild 并把需要删除的节点传递给它即可 imgParent removeChild hatImage 完整的JavaScript函数 5 表单元素连接JavaScript 每当用户点击HocusPocus 按钮的时候运行showRabbit 函数 为此只要向HTML中增加一个简单的onclick事件处理程序即可 思考 替换图片更简单的办法 1 使用replaceChild 函数imgParent replaceChild newImage hatImage 2 直接修改图片的src属性hatImage setAttribute src rabbit hat gif 3 使用HTMLDOM方法hatImage src rabbit hat gif 然后 把兔子藏起来 虽然兔子从帽子中跳出来了 但是屏幕下方的按钮仍然显示HocusPocus 和调用showRabbit 下面做一些修改 当用户再次点击按钮时把兔子藏起来 1 修改按钮的标签 使用我们熟悉的方法 实现这个简单的功能 在showRabbit 函数中添加如下语句 2 隐藏兔子 隐藏兔子的方法基本上和放兔子出来完全相反 将图片的src属性再改回旧图片 创建一个新的JavaScript函数来完成这项任务 3 更改事件处理函数 现在虽然按钮的标签改变了 但是单击按钮时的动作没有变 当用户单击按钮时可以使用DOM改变事件或者发生的动作 在JavaScript中 可以通过按钮的onclick属性来引用该事件 因此可以改变按钮触发的事件 只要赋给onclick属性一个新的函数 第二讲 使用Ajax发送异步请求 使用Ajax发送异步请求示例 考虑以下情景 当用户输入邮编后 系统自动填充相应的城市和省份 创建静态页面原型 创建XMLHttpRequest 要实现这种功能 必须非常熟悉一个JavaScript对象 即XMLHttpRequest 简称XHR 这个小小的对象实际上已经在几种浏览器中存在一段时间了 它是Ajax的核心 该对象的几个常用方法和属性 open 建立到服务器的新请求send 向服务器发送请求readyState 提供当前HTML的就绪状态status 服务器响应的状态代码responseText 服务器返回的请求响应文本 创建XMLHttpRequest cont 创建跨浏览器的XMLHttpRequest对象 创建XMLHttpRequest cont 注意不要被这些花括号迷住了眼睛 下面分别介绍每一步 创建一个新变量request并赋值false 使用false作为判断条件 表示还没有创建XMLHttpRequest对象增加try catch块 尝试创建XMLHttpRequest对象如果失败 先尝试使用较新版本的Microsoft浏览器创建Microsoft兼容的对象 Msxml2 XMLHTTP 如果失败 尝试使用较老版本的Microsoft浏览器创建Microsoft兼容的对象 Microsoft XMLHTTP 如果全部失败 则保证request的值仍然为false检查request是否仍然为false 如果一切顺利就不会是false 如果出现问题则使用JavaScript警告通知用户出现了问题 建立到服务器的请求 准备好XMLHttpRequest对象 就可以建立到服务器的请求了 首先结合一些表单中的数据来构造URL 注 escape 方法用于转义不能用明文正确发送的任何字符 比如 空格将被转换成字符 20 从而能够在URL中传递这些字符 然后建立请求 建立到服务器的请求 cont 使用XMLHttpRequest对象的open 方法来建立请求 该方法有五个参数 request type 发送请求的类型 典型的值是GET或POST 但也可以发送HEAD请求url 要连接的URLasynch 如果希望使用异步连接则为true 否则为false 该参数是可选的 默认为trueusername 如果需要身份验证 则可以在此指定用户名 该可选参数没有默认值password 如果需要身份验证 则可以在此指定口令 该可选参数没有默认值通常使用其中的前三个参数 事实上 即使需要异步连接 通常指定第三个参数为 true 这样更容易理解 使用XMLHttpRequest发送请求 一旦请求用open 配置好之后 就可以使用send 方法发送请求了 send 方法只有一个参数 就是要发送的内容但是我们前面通过URL本身已经发送了zipcode的值 所以这里不需要通过send 传递数据 只要传递null作为该方法的参数即可 设置回调函数 由于是异步请求 请求发出后JavaScript方法不会等待服务器处理完成 因此代码将继续执行 就是说 将退出该方法而把控制返回给表单 用户可以继续输入信息 应用程序不会等待服务器当服务器完成请求之后 需要指定该如何处理响应 XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用Web页面中的代码当服务器完成请求之后 会查看XMLHttpRequest对象 特别是onreadystatechange属性 然后调用该属性指定的任何方法 之所以称为回调是因为由服务器向网页发起调用 无论网页本身正在做什么 这就是称之为异步的原因 用户在一层上操作表单 而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法 设置回调函数 cont 需要特别注意的是该属性在代码中设置的位置 它是在调用send 之前设置的 发送请求之前必须设置该属性 这样服务器在回答完成请求之后能够查看该属性 注意 这里updatePage是个函数名称 不能写成updatePage 函数调用的形式 这表示将updatePage 函数运行的返回结果赋值给onreadystatechange属性 体会JavaScript中函数也是对象的特征 处理服务器响应 请求发送后 用户可以继续使用Web表单 同时服务器在处理请求 而当服务器完成了请求处理 服务器查看onreadystatechange属性确定要调用的方法 除此以外 可以将应用程序看作其他应用程序一样 无论是否异步 换句话说 不一定要采取特殊的动作编写响应服务器的方法 只需要改变表单或其它的页面结构 让用户访问另一个URL或者做响应服务器需要的任何事情处理函数 仅弹出简单的警告 处理服务器响应 续 运行以上代码 根据浏览器的不同 在表单停止弹出警告之前会看到两次 三次甚至四次警告 原因在于还没有考虑HTTP就绪状态 这是请求 响应循环中的一个重要部分HTTP就绪状态 readyState 表示请求的状态或情形 它用于确定该请求是否已经开始 是否得到了响应或者请求 响应模型是否已经完成 它还可以帮助确定读取服务器提供的响应文本或数据是否安全 在Ajax应用程序中需要了解五种就绪状态 0 请求没有发出 在调用open 之前 1 请求已经建立但还没有发出 调用send 之前 2 请求已经发出正在处理之中 这里通常可以从响应得到内容头部 3 请求已经处理 响应中通常有部分数据可用 但是服务器还没有完成响应4 响应已完成 可以访问服务器响应并使用它 处理服务器响应 续 与大多数跨浏览器问题一样 这些就绪状态的使用也不尽一致 实际上很少出现就绪状态从0到1 2 3再到4 一些浏览器从不报告0或1而直接从2开始 然后是3和4 其他浏览器则报告所有的状态 还有一些则多次报告就绪状态1对于Ajax编程 需要直接处理的惟一状态就是就绪状态4 它表示服务器响应已经完成 可以安全地使用响应数据了 基于此 回调函数做如下调整 修改后就可以保证服务器的处理已经完成 现在就会看到只显示一次警告信息了 处理服务器响应 续 以上代码看起来似乎不错 但是还有一个问题 如果服务器响应请求并完成了处理但是报告了一个错误怎么办 服务器端代码应该是由Ajax JSP 普通HTML表单或其他类型的代码调用的 但只能使用传统的Web专用方法报告信息 而在Web世界中 HTTP状态码 status 可以处理请求中可能发生的各种问题 比如 输入了错误的URL请求将得到404错误码 它表示该页面不存在403和401错误码表示所访问的数据受到保护或者禁止访问无论哪种情况 这些错误码都是从完成的响应中得到的 换句话说 服务器执行了请求 即HTTP就绪状态是4 但是没有返回客户机预期的数据 因此除了就绪状态外 还需要检查HTTP状态 我们期望的状态码是200 它表示一切顺利 如果就绪状态是4而且状态码是200 就可以处理服务器的数据了 而且这些数据应该就是要求的数据 而不是错误或者其他有问题的信息 处理服务器响应 续 在回调函数中增加HTTP状态 status 检查 现在可以确保请求已经处理完成 通过就绪状态 服务器给出了正常的响应 通过状态码 最后可以处理服务器返回的数据了 返回的数据 文本形式 保存在XMLHttpRequest对象的responseText属性中 如果服务器选择使用XML响应 则也可以使用在responseXML属性获取 处理服务器响应 续 在本例中 服务器返回邮编相应的城市和省份 中间用逗号分开 Tangshan Hebei得到responseText并使用JavaScript的split 函数从逗号分开 得到的数组放到response中 然后更新表单中的相应值 连接Web表单 最后使用JavaScript事件函数触发Ajax调用 输入框的onblur属性指定的函数当焦点离开时触发 Ajax开始运行了 结果就会看到填完邮编后焦点移开时 表单的城市和省份信息突然更新了 编写服务器端组件 服务器端使用JSP 当然可以使用Servlet 根据传递的邮编 返回相应的城市和省份 注意 JSP中除了JSP标签和Java代码不要出现任何HTML标签 也不要出现换行和空白字符 仅返回需要的响应结果 否则这些HTML标签和空白字符也会作为响应文本的一部分传递回客户端 小结 Ajax应用的开发确实有些繁琐 实际上 现在有很多成熟稳定的Ajax工具葙封装了以上诸多细节 是的Ajax编程更加容易 但是如果不知道应用程序在做什么 就很难发现其中的问题XMLHttpRequest对象是Ajax应用的核心 必须非常熟悉Ajax应用的基本流程 创建XMLHttpRequest对象从Web表单中获取需要的数据设置要连接的URL建立到服务器的连接设置服务器在完成后要运行的回调函数发送请求 第三讲 在请求和响应中使用XML 发送XML格式的请求 XMLHttpRequest是Ajax应用程序中使用的基本对象 看起来它似乎是为通过HTTP请求发送XML或者以某种XML格式发出HTTP请求而设计的 但实际上它要做的只不过是为客户机代码 在网页中通常是JavaScript 提供一种发送HTTP请求的方式 并不要求必须使用XML请求或响应注意 虽然XML可以通过HTTP发送 但XML是一种数据格式而不是传输协议 从客户机发送的XML数据格式 修改上一个邮编的例子 使用XML传递数据 将名 值对转化为XML数据格式 063000XML要求有一个根元素 如果使用文档片段 XML文档的一部分 的话则需要一个封闭元素 将上面的XML改为以下方式 同时便于传递等多信息 063000 向服务器发送XML 请求中的数据必须手工格式化为XML对于XML最好使用POST请求 因为有些浏览器限制了GET请求字符串的长度 而XML可能很长告诉服务器要发送的是XML而不是一般的名 值对XML通过send 方法发送 而不是附加在请求URL最后的参数 发送XML和普通文本的比较 XML不是一种简洁 快速和节省空间的格式 和普通文本相比 XML通常总会占用更多的空间 速度也更慢 因为需要在消息中增加XML所需要的标签和语义 同时解析XML也比处理普通文本慢构造和维护XML不是简单的事情XML没有为请求增加任何东西 除了复杂性的问题之外 和普通文本以及名 值对相比 在请求中使用XML实际上没有多少好处 如果有的话 实际上没有任何东西可用XML而不能用普通文本发送一般地 只有当服务器仅接受XML时才需要发送XML 第四讲 使用JSON进行数据传输 什么是JSON JSON JavaScriptObjectNotation 是一种轻量级的数据交换格式 易于人阅读和编写 同时也易于机器解析和生成 而且它是基于JavaScript的 JSON采用完全独立于语言的文本格式 但是也使用了类似于C语言家族的习惯 包括C C C Java JavaScript等 这些特性使JSON成为理想的数据交换语言JSON有两种结构 名 值 对的集合 Acollectionofname valuepairs 在不同的语言中 它被理解为对象 结构 关联数组等值的有序列表 Anorderedlistofvalues 在大部分语言中 它被理解为数组这些都是常见的数据结构 事实上大部分现代计算机语言都以某种形式支持它们 这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能 JSON的基本形式 对象是一个无序的 名 值 对集合 一个对象以 开始 结束 每个 名称 后跟一个 名 值 对之间使用 分隔 数组是值 value 的有序集合 一个数组以 开始 结束 值之间使用 分隔 字符串 string 是由双引号包围的任意数量Unicode字符的集合 使用反斜线转义 值 value 可以是双引号括起来的字符串 string 数值 number true false null 对象 object 或者数组 array 这些结构可以嵌套数值 number 与C或者Java的数值非常相似 JSON示例 下面的JSON表示名称 值对 firstName Brett 多个名称 值对串在一起 firstName Brett lastName McLaughlin em