网页制作技术日新月异,新技术层出不穷,当很多用户还沉浸在web1.0时代乐乐津道时,web 2.0已经走到了我们的面前。AJAX作为web 2.0应用的一个重要组成部分,利用AJAX技术可以创建交互式网页,给用户提供良好的体验,因此,它一出现就受到了广大用户的欢迎,成为网页开发者的热爱。然而AJAX网页的开发需要具备了JavaScript、CSS、XML、XHTML知识,对许多网页开发者来说难度较大。为了解决这个问题,提高网页开发者的效率,adobe公司的网页设计工具Dreamweaver CS6中专门集成了用来开发AJAX网页的构件,利用这些构件,用户不用书写一句代码,只需简单地用鼠标进行拖放操作,就可以设计出令人羡慕的AJAX网页,给你的网站增添光彩。

  Dreamweaver CS6

小技巧-网页设计技巧:用Dreamweaver制作AJAX网页必备知识

  在用Dreamweaver CS6开发AJAX网页之前,首先要了解一些开发AJAX网页的基础知识。

  AJAX是指Asynchromous Javascript and XML的缩写,翻译成中文就是异步Javascript 和XML。所谓异步就是可以经由超文本传输协议(http)向服务器发出请求,并且在等待该响应时继续处理另外的数据。AJAX的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像一些数据验证和数据处理等,都交给AJAX引擎自己来做,只有确定需要从服务器读取新的数据时再由AJAX引擎代为向服务器提交请求。例如,用户以调用一个服务器端脚本来从一个数据库中以XML方式检索数据,把数据发送到存储在一个数据库的服务库脚本,或者简单地装载一个XML文件以填充你的web站点而不需要刷新该页面。

  AJAX图标

  AJAX并不是一门新的语言或技术,它实际上是几项技术按一定方式组合在一起,在共同的协作中发挥各自的作用,每种技术都有其独特之处,合在一起就成了一个功能强大的新技术。

  AJAX主要包含了以下几种技术:

  1.使用基于web标准的XHTML+CSS呈现。

  2.使用文档对象模型(DOM)进行动态显示及交互。

  3.使用XML和XSLT进行数据交换及相关操作。

  4.使用XMLHttpRequest进行异步数据查询、检索。

  5.使用Javascript绑定和处理所有数据。

  AJAX是使用客户端脚本与web服务器交换数据的web应用开发方法。它一个最大的特点是无需刷新页面就可向服务器传输或读写数据(又称无刷新更新页面),这样,web页面不用打断交互流程,进行重新加载,就可以动态地更新。使用AJAX技术,可以把以前的一些服务器负担的工作转嫁到客户端,利用客户端闲置的处理能力来处理,减轻服务器和带宽的负担,达到节约ISP的空间及带宽租用成本的目的,同时,使用AJAX技术,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的web用户界面,因此,AJAX技术大受欢迎,在许多网站得了广泛应用,随着AJAX开发技术的进步,必将会有更多网站使用该技术。

  由于AJAX开发需要具备较多的Javascript知识,而且要手工书写大量的代码,所以不是一般用户就能随便使用的。为了减轻学习的难度,提高AJAX网页的开发效率,adobe开发了一种叫Spry框架的AJAX技术,并且将它集成在Dreamweaver CS6中,这样就可以让普通用户也能迅速开发出具有良好用户体验的AJAX网页。

  Spry框架

  Spry框架是adobe出品的轻量级的支持AJAX的Javascript库,它以HTML为中心,使用最基本的HTML、CSS和Javascript来实现丰富的web页面体验。使用Spry框架可以显示XML数据,并创建用来显示动态数据的交互式页面元素,而无需刷新整个页面。虽然这些文件存放在服务器上,实际上是被加载到浏览器中运行的。框架的用户将所有需要的文件链接到HTML文档中,以使用不同的组件,来获得更丰富的用户体验。

  Spry数据:将XML数据添加到任何web页面上,并且允许以AJAX样式交互显示数据,主要是通过Spry数据集来实现这一功能。

  Spry表单工具:将表单元素,像文本域、列表等,与Javascript验证功能和友好的用户错误信息提示结合起来,它包括验证文本域构件、验证文本区域构件、验证选择构件、验证复选框构件。

  Spry布局工具:提供一系列精致的布局控件,包括选项卡式面板构件、菜单栏构件、可折叠面板构件、折叠构件。

  Spry效果:是一个视觉增强功能,它用新级的功能来交互式的给页面元素添加特殊显示效果,可以将Spry效果应用于使用Javascript 的HTML页面上几乎所有的元素。Spry效果包括显示/渐稳、高亮颜色、向上遮帘/向下遮帘、上滑/下滑、增大/收缩、晃动、挤压。

  为了便于AJAX网页的开发,adobe将构件的概念引进了Spry框架。构件是AJAX框架的基本功能,构件被称为下一代的页面UI的“AJAX”。一个构件是由HTML、CSS、Javascript共同封装的系统用户界面。在Dreamweaver CS6中,Spry构件是一个页面元素,Spry框架支持一组用标准的HTML、CSS和Javascript编写的可重用构件。常用的构件有菜单栏、选项卡式面板、折叠构件等,这些对象很难建立,需要高级的编码能力,adobe公司预先做好这些构件,并且将它们集成在Dreamweaver CS6中,这样就可以让普通用户无需进行复杂的编码操作也能方便快捷地建立起AJAX网页,实现复杂的用户界面。每个构件都关联着唯一的CSS和Javascript文件。CSS文件包含着设置构件样式所需的全部信息,而Javascript文件则赋予构件功能。当用户使用Dreamweaver CS6界面插入构件时,Dreamweaver CS6会自动将这些文件链接到页面,以便构件中包含该页面的功能和样式。

  1.阅后如果喜欢,不妨点赞、评论和关注一下。

  2.如果喜欢玩软件,请关注本头条号阅读相关文章。

  3.在学习中有什么问题,欢迎与我沟通交流,今日头条号搜索:微课传媒,我在这里等你哟!