j15Ajax技术及Ajax框架简介

第15讲 Ajax技术及Ajax框架简介 内容回顾 页面上带有关闭按钮的广告层的制作方法广告层随着窗口的滚动而滚动3张图片动态改变的横幅广告5张图片动态改变的横幅广告 本讲问题 Ajax是一个全新的技术吗 Ajax包括的技术有哪几个 使用XMLHttpRequest对象创建和使用Ajax的步骤 什么是Ajax框架 Ajax框架的分类 如何引用Ajax框架 使用Ajax框架的步骤 JQuery库的相关知识 本讲任务 了解Ajax的含义了解Ajax所包含的技术学会使用XMLHttpRequest对象会使用Ajax开发一个简单的应用了解什么是Ajax框架 了解Ajax框架的分类 掌握如何引用Ajax框架 掌握使用Ajax框架的步骤 掌握JQuery的基本知识与一些简单的特效 本讲目标 ajaxtest html中调用time jsp中response输出的时间用户信息中按下键时 时间框中的信息会通过ajax调用自动发生变化 本讲目标 使用jquery框架实现输入框架获取焦点和选中页面对象拷贝示例页面对象的显示 隐藏 演示示例1 jquery使输入框获取焦点 演示示例2 页面对象拷贝示例 演示示例3 页面对象的显示 隐藏 演示示例4 页面对象的渐显 渐隐 Ajax简介1 AJAX指异步JavaScript及XML AsynchronousJavaScriptAndXML AJAX是一种在2005年由Google推广开来的编程模式 AJAX不是一种新的编程语言 而是一种使用现有标准的新方法 通过AJAX 你可以创建更好 更快以及更友好的WEB应用程序 AJAX基于JavaScript和HTTP请求 HTTPrequests Ajax简介2 所需的基础知识 HTML XHTMLJavaScript Ajax简介2 Ajax含义 AJAX 异步JavaScript及XML AsynchronousJavaScriptandXML AJAX不是一种新的编程语言 而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 通过AJAX 您的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信 通过这个对象 您的JavaScript可在不重载页面的情况与Web服务器交换数据 Ajax简介2 Ajax含义 AJAX在浏览器与Web服务器之间使用异步数据传输 HTTP请求 这样就可使网页从服务器请求少量的信息 而不是整个页面 AJAX可使因特网应用程序更小 更快 更友好 AJAX是一种独立于Web服务器软件的浏览器技术 Ajax简介2 Ajax基于web标准 AJAX基于下列Web标准 JavaScriptXMLHTMLCSS在AJAX中使用的Web标准已被良好定义 并被所有的主流浏览器支持 AJAX应用程序独立于浏览器和平台 Ajax简介2 AJAX事关更优秀的应用程序 AJAX事关更优秀的应用程序Web应用程序较桌面应用程序有诸多优势 它们能够涉及广大的用户 它们更易安装及维护 也更易开发 不过 因特网应用程序并不像传统的桌面应用程序那样完善且友好 通过AJAX 因特网应用程序可以变得更完善 更友好 Ajax简介2 小结 Ajax没有新增什么内容Ajax是对已经技术的一个组合应用出现的一个新效果JavaScriptXMLHTMLCSS AjaxHTTP请求1 Ajax使用HTTP请求 在传统的JavaScript编程中 假如希望从服务器上的文件或数据库中得到任何的信息 或者向服务器发送信息的话 就必须利用一个HTML表单向服务器GET或POST数据 而用户则需要单击 提交 按钮来发送 获取信息 等待服务器的响应 然后一张新的页面会加载结果 由于每当用户提交输入后服务器都会返回一张新的页面 传统的web应用程序变得运行缓慢 且越来越不友好 AjaxHTTP请求1 Ajax使用HTTP请求 通过利用AJAX JavaScript会通过JavaScript的XMLHttpRequest对象 直接与服务器来通信 通过使用HTTP请求 web页可向服务器进行请求 并得到来自服务器的响应 而不加载页面 用户可以停留在同一个页面 他或她不会注意到脚本在后台请求过页面 或向服务器发送过数据 AjaxHTTP请求2 XMLHttpRequest对象 通过使用XMLHttpRequest对象 web开发者可以做到在页面已加载后从服务器更新页面 在2005年AJAX被Google推广开来 GoogleSuggest Google建议使用XMLHttpRequest对象来创建一种动态性极强的web界面 当您开始在Google的搜索框中输入查询时 JavaScript会向某个服务器发出这些字词 然后服务器会返回一系列的搜索建议 XMLHttpRequest对象得到下列浏览器的支持 InternetExplorer5 0 Safari1 2 Mozilla1 0 Firefox Opera8 以及Netscape7 Ajax实例 为了理解AJAX的工作原理 我们将创建一个小型的AJAX应用程序 首先 我们需要一个带有两个文本框的HTML表单 用户名和时间 用户名文本框由用户填写 而时间文本框使用AJAX进行填写 此HTML文件名为 ajaxtest htm 请注意这个HTML表单没有提交按钮 用户 时间 Ajax实例 浏览器支持 AJAX的要点是XMLHttpRequest对象 不同的浏览器创建XMLHttpRequest对象的方法是有差异的 IE浏览器使用ActiveXObject 而其他的浏览器使用名为XMLHttpRequest的JavaScript内建对象 如需针对不同的浏览器来创建此对象 我们要使用一条 tryandcatch 语句 您可以在我们的JavaScript教程中阅读更多有关try和catch语句的内容 让我们用这段创建XMLHttpRequest对象的JavaScript来更新一下我们的 ajaxtest html 文件 ajaxtest html增加的关键代码 functionajaxFunction varxmlHttp try Firefox Opera8 0 SafarixmlHttp newXMLHttpRequest catch e InternetExplorertry xmlHttp newActiveXObject Msxml2 XMLHTTP catch e try xmlHttp newActiveXObject Microsoft XMLHTTP catch e alert 您的浏览器不支持AJAX returnfalse Ajax实例 实例解释 首先声明一个保存XMLHttpRequest对象的xmlHttp变量 然后使用XMLHttp newXMLHttpRequest 来创建此对象 这条语句针对Firefox Opera以及Safari浏览器 假如失败 则尝试针对InternetExplorer6 0 的xmlHttp newActiveXObject Msxml2 XMLHTTP 假如也不成功 则尝试针对InternetExplorer5 5 的xmlHttp newActiveXObject Microsoft XMLHTTP 假如这三种方法都不起作用 那么这个用户所使用的浏览器已经太过时了 他或她会看到一个声明此浏览器不支持AJAX的提示 Ajax实例 实例解释 注释 上面这些浏览器定制的代码很长 也很复杂 不过 每当希望创建XMLHttpRequest对象时 这些代码就能派上用场 因此可以在任何需要使用的时间拷贝粘贴这些代码 上面这些代码兼容所有的主流浏览器 InternetExplorer Opera Firefox以及Safari 接下来展示如何使用XMLHttpRequest对象与服务器进行通信 AJAX XMLHttpRequest对象1 onreadystatechange属性onreadystatechange属性存有处理服务器响应的函数 下面的代码定义一个空的函数 可同时对onreadystatechange属性进行设置 xmlHttp onreadystatechange function 我们需要在这里写一些代码 readyState属性readyState属性存有服务器响应的状态信息 每当readyState改变时 onreadystatechange函数就会被执行 这是readyState属性可能的值 AJAX XMLHttpRequest对象2 我们要向这个onreadystatechange函数添加一条If语句 来测试我们的响应是否已完成 意味着可获得数据 xmlHttp onreadystatechange function if xmlHttp readyState 4 从服务器的response获得数据 AJAX XMLHttpRequest对象3 responseText属性可以通过responseText属性来取回由服务器返回的数据 在我们的代码中 我们将把时间文本框的值设置为等于responseText xmlHttp onreadystatechange function if xmlHttp readyState 4 document myForm time value xmlHttp responseText Ajax 请求服务器 AJAX 向服务器发送一个请求要想把请求发送到服务器 需要使用open 方法和send 方法 open 方法需要三个参数 第一个参数定义发送请求所使用的方法 GET还是POST 第二个参数规定服务器端脚本的URL 第三个参数规定应当对请求进行异步地处理 send 方法可将请求送往服务器 假设HTML文件和ASP或JSP文件位于相同的目录 那么代码是这样的 xmlHttp open GET time jsp true xmlHttp send null 现在 必须决定何时执行AJAX函数 当用户在用户名文本框中键入某些内容时 令函数 在幕后 执行 functionajaxFunction varxmlHttp try Firefox Opera8 0 SafarixmlHttp newXMLHttpRequest catch e InternetExplorertry xmlHttp newActiveXObject Msxml2 XMLHTTP catch e try xmlHttp newActiveXObject Microsoft XMLHTTP catch e alert 您的浏览器不支持AJAX returnfalse xmlHttp onreadystatechange function if xmlHttp readyState 4 document myForm time value xmlHttp responseText xmlHttp open GET time asp true xmlHttp send null 用户 时间 服务程序time jsp 什么是Ajax框架 什么是框架 框架 即framework 其实就是某种应用的半成品 就是一组组件 供开发者选用完成自己的系统 简单说就是使用别人搭好的舞台 你来做表演 而且 框架一般是成熟的 不断升级的软件 什么是Ajax框架 为什么要使用框架 因为软件系统发展到今天已经很复杂了 特别是服务器端软件 设计到的知识 内容 问题太多 在某些方面使用别人成熟的框架 就相当于让别人帮开发者完成一些基础工作 开发者只需要集中精力完成系统的业务逻辑设计 而且框架一般是成熟 稳健的 它可以处理系统很多细节问题 比如 事务处理 安全性 数据流控制等问题 还有框架一般都经过很多人使用 所以结构很好 所以扩展性也很好 而且它是不断升级的 开发者可以直接享受别人升级代码带来的好处 框架一般处在低层应用平台 如J2EE 和高层业务逻辑之间的中间层 什么是Ajax框架 Ajax框架前面我们学习了使用XMLHttp或者使用Iframe来加载数据的方法 可以体会的到使用纯XMLHttp来请求服务和得到响应的痛苦 所以开发人员转向了使用了框架技术 与其它的框架类似 在ajax领域中有ajax框架 Ajax框架的分类 客户端的Ajax框架服务端的Ajax框架 1 Dojo2 Rico3 Tibet4 Flash Javascript集成框架5 GoogleAjaxXLT6 libXmlRequest7 RSLite8 sack9 sarrise10 XHConn11 JQuery 1 CPAINT2 Sajax3 JSON JSON RPC4 DirectWebRemoting5 SWATO6 JavaBluePrints7 AjaxNet8 Microsoft的Atlas项目9 RubyonRails 如何引用Ajax框架 若是 jar文件 则将下载的框架文件添加到项目中的lib文件夹中若是 js文件 则将 js文件直接添加到存放js文件夹中 function input text mouseover focusSelect input password mouseover focusSelect functionfocusSelect this focus this select 使用框架的步骤 下载框架文件将框架文件拷贝到指定的文件夹中在文件中引用框架 使用jquery框架示例 将下载好的jquery库文件放置到js文件夹中创建文件userJQuery h