jQuery开发基础第7章Ajax在jQuery中的应用.ppt

本章要求:第7章Ajax在jQuery中的应用? Ajax技术简介? Ajax的开发模式?安装Web运行环境?使用Load()方法载入HTML文档?使用$.get()和$.post()方法请求数据?$.getScript()方法以及$.getJSON()方法?使用$.ajax()方法请求数据?使用serialize()方法序列化表单? Ajax的全局事件主要内容1. ——AppServ3. 通过JavaScript应用Ajax 4. jQuery中的Ajax应用5. Ajax的全局事件6. 综合实例: Ajax概述AJAX是Asynchronous JavaScript and XML的缩写,意思是异步的JavaScript和XML。AJAX并不是一门新的语言或技术,它是JavaScript、XML、CSS、DOM等多种已有技术的组合,可以实现客户端的异步请求操作,从而实现在不需要刷新页面的情况下与服务器进行通信,减少了用户的等待时间,减轻了服务器和带宽的负担,提供更好的服务响应。在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理(获得数据、运行与不同的系统会话)后,返回一个HTML页面给客户端。Web应用的传统模型如图7-1所示。 Ajax开发模式图7-1 Web应用的传统模型而在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置。Web应用的Ajax模型如图7-2所示。图7-2 Web应用的Ajax模型从图7-1和图7-2中可以看出,对于每个用户的行为,在传统的Web应用模型中,将生成一次HTTP请求,而在Ajax应用开发模型中,将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模型中可以通过JavaScript实现在不刷新整个页面的情况下,对部分数据进行更新,从而降低网络流量,给用户带来更好的体验。(1)可以把一部分以前由服务器负担的工作转移到客户端,利用客户端闲置的资源进行处理,减轻服务器和带宽的负担,节约空间和成本。(2)无刷新更新页面,从而使用户不用再像以前一样在服务器处理数据时,只能在死板的白屏前焦急的等待。AJAX使用XMLHttpRequest对象发送请求并得到服务器响应,在不需要重新载入整个页面的情况下,就可以通过DOM及时将更新的内容显示在页面上。(3)可以调用XML等外部数据,进一步促进页面显示和数据的分离。(4)基于标准化的并被广泛支持的技术,不需要下载插件或者小程序,即可轻松实现桌面应用程序的效果。(5)AJAX没有平台限制。AJAX把服务器的角色由原本传输内容转变为传输数据,而数据格式则可以是纯文本格式和XML格式,这两种格式没有平台限制。 Ajax技术的优点(1),scape等浏览器支持XMLHttpRequest的时间更加在其后。为使Ajax在各个浏览器中都能够正常运行,开发者必须花费大量精力去编码,从而实现各个浏览器兼容,这样就使得Ajax开发难度高于普通Web开发。(2)破坏浏览器“前进”、“后退”按钮的正常行为传统页面中,用户经常会****惯性使用浏览器自带的“前进”、“后退”按钮,但使用Ajax改变了这个Web浏览****惯。在动态更新页面的情况下,用户无法回到前一个页面的状态,因为浏览器仅能记下历史记录中的静态页面。用户通常希望单击后退按钮取消他们的前一次操作,在Ajax中,可能无法这样做。 Ajax技术的缺点 Ajax方法需要与Web服务器端进行交互,因此本节讲解安装PHP的运行环境---AppServ,它是PHP网页架站工具组合包,可以方便初学者快速完成建站,AppServ所包含的软件有Apache、PHP、MySQL、phpMyadmin等。AppServ的下载地址为:,-dev,不是稳定版,。应用AppServ集成化安装包搭建PHP开发环境的操作步骤如下:(1)双击appserv-win32-,打开如图7-3所示的AppServ启动页面。 安装Web运行环境