像专业人员一样开发Ajax应用程序，第2部分:使用ScriptaculousJavaScript库和script.aculo.us资源-CSDN文库

183 浏览量 2021-02-21 23:36:47 上传评论收藏 363KB PDF 举报

资源推荐

资源详情

资源评论

像专业人员一样开发像专业人员一样开发Ajax应用程序，第应用程序，第2部分部分:使用使用

ScriptaculousJavaScript库和库和script.aculo.us

火龙果软件工程技术中心

本文内容包括：

Scriptaculous 简介

拖放控件

运行示例

结束语

下载

参考资料

您正在构建 Web 应用程序吗？这个应用程序是像 cragislist，还是更像 flickr？如果答案是前者，那么您可以跳过

本文了。如果是后者，本文正适合您。在这个包含三部分的系列文章的第 2 部分中，学习如何用 Scriptaculous

JavaScript 库增强 Web 应用程序。

本文是包含三部分的系列文章的第 2 部分，这个系列讨论可以用来创建 Ajax 应用程序的流行的 JavaScript 库。在第 1 部分

中，学习了如何用 Prototype 库创建一个用来管理歌曲的 Web 应用程序。在本文中，将使用 Scriptaculous 库构建一个用来管

理照片的 Web 应用程序。

本文使用的是 Scriptaculous 的最新版本 1.8.1（参见参考资料中的链接）。Scriptaculous 使用 Prototype 1.6 库。您必须熟

悉 JavaScript、HTML 和 CSS。本文演示 Scriptaculous 在 Ajax 方面的应用。在后端，结合使用 Ruby on Rails 2.0 和

MySQL 5.0.4（参见参考资料）。只需稍微调整，就可以改用其他后端技术。

Scriptaculous 简介简介

Scriptaculous JavaScript 库是目前最流行的库之一。它用来在基于 HTML 的 Web 站点中添加丰富的交互功能。它提供了许多

视觉效果和行为，帮助开发人员在 Web 应用程序中添加交互功能。Scriptaculous 是在 Prototype 库的基础上构建的。

图图 1. Scriptaculous 和和 Prototype 的关系的关系

如果您阅读了第 1 部分，应该已经见过 Prototype 提供的 Ajax 抽象示例。Scriptaculous 并不自行创建相似的功能，而是使用

Prototype 并在其上添加效果和行为。Scriptaculous 提供拖放元素等大量控件。还提供可以与控件结合使用的非常出色的视觉

效果。

拖放控件拖放控件

最有用、视觉上最吸引人的 Scriptaculous 特性之一是拖放。拖放特性在桌面应用程序中非常常见，但是在 Web 应用程序不

常见。在 Web 应用程序中添加这种特性可以提供丰富的用户体验。这个任务看起来很困难，但是 Scriptaculous 大大简化了

它。为了演示这个特性，我们将构建一个示例应用程序，通过分析它了解使用 Scriptaculous 的好处。

示例应用程序：照片管理器

我们将创建一个用来管理照片的应用程序作为示例应用程序。我们的应用程序允许通过拖放操作在照片集中添加或删除照片。

在后端，我们将使用 Ruby on Rails 和 MySQL。Ruby on Rails 实际上默认包含 Scriptaculous 并提供 API，可以在应用程序

中自动使用 Scriptaculous。我们并不从 Rails 使用这些特性；我们只使用 Rails 提供数据服务后端。

照片管理器后端

我们不打算花费太多时间讨论后端，对后端的认识只需足以理解前端操作的意义就够了。本文的下载部分提供所有代码。首

先，我们使用 rails pix 创建一个 Rails 应用程序。接下来，需要按照 Rails 命名约定创建一个称为 pix_development 的数据

库。需要修改 config/database.yml 文件，根据这个数据库修改配置参数（主机、名称、密码）。

下一步是最重要的步骤：为应用程序创建 scaffold。在一般情况下，创建 scaffold 仅仅是开发的基础；但是，在这个示例应用

程序中，我们将用它创建一个 REST 式的接口，可以使用 Ajax 调用这个接口。命令如下：ruby script/generate scaffold photo thumb

:string caption :string inSet :boolean。这会创建一个模型，其中包含一个 thumb 字段（用于缩略图）、一个 caption 和一个

Boolean（表示照片是否在照片集中）。注意，命令 rake db:migrate 将在数据库中创建我们需要的表。scaffold 生成命令还为应

用程序创建一个控制器。我们需要修改这个控制器，为 Rails 自动创建的 REST 式服务提供 JSON 版本。修改后的控制器见

清单 1：

清单清单 1. 照片照片 Web 控制器控制器

class PhotosController < ApplicationController

# GET /photos

# GET /photos.xml

protect_from_forgery :only => [:create]

def index

@photos = Photo.find(:all)

respond_to do |format|

format.html # index.html.erb

format.xml { render :xml => @photos }

format.json { render :json => @photos }

end

# GET /photos/1

# GET /photos/1.xml

def show

@photo = Photo.find(params[:id])

respond_to do |format|

format.html # show.html.erb

format.xml { render :xml => @photo }

format.json { render :json => @photo }

end

# GET /photos/new

# GET /photos/new.xml

def new

@photo = Photo.new

respond_to do |format|

format.html # new.html.erb

format.xml { render :xml => @photo }

format.json { render :json => @photo }

end

# GET /photos/1/edit

def edit

@photo = Photo.find(params[:id])

end

# POST /photos

# POST /photos.xml

def create

@photo = Photo.new(params[:photo])

respond_to do |format|

if @photo.save

flash[:notice] = 'Photo was successfully created.'

format.html { redirect_to(@photo) }

format.xml { render :xml => @photo, :status => :created,

:location => @photo }

format.json { render :json => @photo, :status => :created,

:location => @photo }

else

format.html { render :action => "new" }

format.xml { render :xml => @photo.errors, :status =>

:unprocessable_entity }

format.json { render :json => @photo.errors, :status =>

:unprocessable_entity }

end

# PUT /photos/1

# PUT /photos/1.xml

def update

@photo = Photo.find(params[:id])

respond_to do |format|

if @photo.update_attributes(params[:photo])

flash[:notice] = 'Photo was successfully updated.'

format.html { redirect_to(@photo) }

format.xml { head :ok }

format.json { head :ok }

else

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38640242

粉丝: 4
资源: 970

像专业人员一样开发Ajax应用程序，第2部分:使用ScriptaculousJavaScript库和script.aculo.u...

最新资源

像专业人员一样开发Ajax应用程序，第2部分:使用ScriptaculousJavaScript库和script.aculo.u...

像专业人员一样开发Ajax应用程序，第1部分:使用PrototypeJavaScript库和script.aculo.us

Prototype.and.script.aculo.us.Dec.2007.pdf

prototype and script.aculo.us框架

《Prototype and script.aculo.us终极揭秘》

Practical.Prototype.and.script.aculo.us.Jun.2008

script.aculo.us实现googleSuggest用例

Practical Prototype and script.aculo.us

Apress.Practical.Prototype.and.script.aculo.us.Jun.2008.pdf

Prototype and script.aculo.us: You Never Knew JavaScript Could Do This

script.aculo.us

Prototype and script.aculo.us

Pragmatic.Prototype.and.script.aculo.us.Dec.2007

Javascript框架Script.aculo.us的英文文档

Script.Aculo.Us开发系列教程

PHP and script.aculo.us Web 2.0 Application Interfaces.pdf.rar

PracticalPrototypeAndScript.aculo.us

ajax框架源码

script.aculo.us web 2.0 javascript

应用最广的十大Javascript框架下载地址

前端项目-scriptaculous.zip

ajax特效框架

Ajax与Java高级程序设计(英文版)

征服ajax实例源代码

prototype使用文档

ajax框架的选择.pdf

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）