一、Ajax 库

在本章中，我们将介绍：

  • 使用 jQuery 设计简单导航
  • 创建选项卡导航
  • 使用 extjs 设计组件
  • MochiKit 中的事件处理
  • 使用 Dojo 构建选项卡导航
  • 使用 YUI 库构建图表应用程序
  • 使用 jQuery 滑块加载动态内容
  • 使用 MooTools 创建 Ajax 购物车
  • 使用 prototype.js 构建 Ajax 登录表单

在本章中，我们将学习如何使用最著名的 JavaScript 库和具有 Ajax 功能的框架。这些库是根据我们的主观意见选择的，我们不想说哪个库/框架更好或更差。它们各有优缺点。

使用 jQuery 设计简单导航

jQuery是一个开发框架，允许我们在 HTML 文档中使用 JavaScript。现在，我们将使用基本 jQuery 特性构建一个简单的导航。

准备好了吗

在开始之前，我们需要包括最新的 jQuery 库。我们可以从www.jquery.com的下载部分下载。我们将把它保存在名为 js的 JavaScript 文件夹中，位于 HTML 文档的根目录中，例如 cookbook。

本书中提到的所有库也可以在在线缓存中使用，如http://code.google.com/apis/libraries/ 。

注

您可以下载您从账户购买的所有 Packt 书籍的示例代码 fleshttp://www.PacktPub.com 。如果您在其他地方购买了本书，您可以访问http://www.PacktPub.com/support 并注册，让 fles 直接通过电子邮件发送给您。

怎么做。。。

现在，我们可以开始编写 task1.html页面了。我们将把它放在 cookbook文件夹中。

<!doctype html>
<html>
<head>
<title>Example 1</title>
</head>
<body>
<ul id="navigation">
<li id="home"><a href="#">Home</a></li>
<li class="active"><a href="#">Our Books</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div id="placeHolder">
<!-- our content goes here -->
</div>
<script src=js/jquery.min.js></"></script>
<script>
$(document).ready(function(){
$('#navigation li a').each(function(){
var $item = $(this);
$item.bind('click',function(event){
event.preventDefault();
var title = $item.html();
var html = title + ' was selected.';
$('#placeHolder').html(html);
});
});
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
});
</script>
</body>
</html>

它是如何工作的。。。

现在，让我们解释一下在前面的代码片段中我们做了什么。我们脚本的主要思想是找到文档中的每个超链接<a>，阻止其默认功能，并在 placeHolder中显示超链接内容。从一开始，我们就从 doctype和主要的 HTML 布局开始。页面主体包含用于动态内容的 navigation和 placeholder元素。

jQuery 功能最重要的部分是包含我们的 jQuery 库。让我们把它放在结束标记之前。这将允许首先加载页面的 HTML:

<script src="js/jquery.min.js"></script>

加载 HTML 页面后，当文档准备就绪时，我们可以在 $(document).ready()函数中定义 JavaScripts:

<script>
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>

这也可以缩短为 $():

<script>
$(function(){
alert("Hello jQuery!");
});
</script>

美元符号 $()表示 jQuery()工厂函数的别名。在这个函数中，我们可以使用所有 CSS 选择器，如 ID、类或确切的标记名。例如：

  • $('a'):选择我们文档中的所有超链接
  • $('#myID'):选择具有此 ID 的元素
  • $('.myID'):选择该类的所有元素

在我们的例子中，我们选择 navigation <div>中的所有超链接，并使用 click事件的事件处理程序定义它们自己的功能：

$item.bind('click',function(event){
// prevent default functionality
event.preventDefault();
// here goes the rest
});

我们示例的最后一步是创建 titleVAR 和 HTML 字符串，该字符串指向 placeHolder:

var title = $(this).html();
var html = title + ' was selected.';
$('#placeHolder').html(html);

还有更多。。。

前面的例子非常简单。但是 jQuery 可以为我们提供更多。这包括特殊选择器、效果、DOM 操作或 Ajax 功能。

我们可以更精确地指定选择器。例如，我们可以根据超链接的 href属性指定哪些超链接应该受到影响：

$('a[href^=mailto:]').addClass('mailto);
$('a[href$=.pdf]').addClass('pdf');
$('a[href^=http] [href*=milan]').addClass('milan');

jQuery 还涵盖所有可能的事件（click、 blur, focus, dblclick等）、视觉效果（hide、 show, toggle, fadeIn, fadeOut等）或 DOM 操作（appendTo、 prependTo等）。它有一整套 AJAX 功能，非常易于使用，例如：

$.get('test.html', function(data) {
$('.result').html(data);
});

但我们将在以后的任务和章节中更好地了解更多 jQuery 特性。

另见

第一章使用 jQuery 的 AJAX

第二章、jQuery UI

第 3 章，使用 jQuery 创建选项卡导航的有用工具

创建标签导航

jQuery UI是从 jQuery 的核心交互插件构建而成。作为一个高级框架，它使每个开发人员都可以轻松地创建效果和动画。现在，我们将使用 jqueryui 构建一个选项卡导航。

准备好了吗

首先，如果我们没有在前面的配方中使用 jQuery 库，那么我们需要包括来自www.jQuery.com的 jQuery 库。然后，我们可以从www.jqueryui.com/download下载 jQuery UI 库。在这个页面上，我们可以下载特定的模块或整个库。我们可以选择自己喜欢的主题，也可以使用高级主题设置创建自己的主题。现在，我们将选择整个具有 ui-lightness主题的图书馆。

怎么做。。。

  1. 现在我们已经准备好编码了。让我们从 HTML 部分开始。本部分将定义一个具有三个标签和一个手风琴的 navigation元素。

    ```php

    ```

  2. 当 HTML 准备好后，我们可以在<head>标记中继续使用 CSS 和 JavaScript CSS 样式，如下代码所示：

    ```php

    ```

  3. 我们将在关闭<body>标记

    ```php $(document).ready(function(){ $('#navigation').tabs(); });

```

之前添加 JavaScript 4. Our result looks like the following:

How to do it...

它是如何工作的。。。

下载的 jQueryUI 包含所选主题的全部 CSS 内容（jQueryUI.custom.CSS）。我们需要做的就是将其包含在<head>标签中：

...
<link href="css/ui-lightness/jquery-ui.custom.css"
rel="stylesheet" />

在 CSS 之后，我们包括 jQuery 和 jQuery UI 库：

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.custom.min.js"></script>

JavaScript 部分非常简单：

$('#navigation').tabs();

重要的是要适合所需的 HTML 结构。每个超链接都以选定的<div>标记中的 HTML 内容为目标。为了在它们之间建立关系，我们将在每个超链接中使用 #id和所选<div>标记的 ID（例如， tabs-1)。

第三个选项卡中有一个异常，它通过 Ajax 加载请求的数据。在这种情况下，我们不定义任何目标区域，因为它将自动创建。如您所见，在 jQueryUI 中使用 Ajax 非常简单和舒适。

还有更多。。。

jQueryUI 为我们提供了很多选项。我们可以只使用前面代码片段中显示的默认功能或一些附加功能：

| 通过 Ajax 的内容： | $( "#navigation" ).tabs({ajaxOptions: {} })； | | 鼠标悬停时打开： | $( "#navigation" ).tabs({event: "mouseover"})； | | 折叠内容： | $( "#navigation" ).tabs({collapsible: true})； | | 可排序： | $( "navigation" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" })； | | Cookie 持久性： | $( "#navigation" ).tabs({cookie: { expires: 1 }})； |

另见

第 3 章，使用 jQuery 设计组件的有用工具

使用 Ext JS 设计组件

ExtJS是一个 JavaScript 框架，提供了大量跨浏览器用户界面小部件。ExtJS 的核心是基于组件的设计，可以很容易地扩展以满足我们的需求。

准备好了吗

我们可以从www.sencha.com的 ExtJS 部分下载最新版本的 ExtJS 框架。现在，我们准备用两列和一个手风琴构建一个经典的 ExtJS 布局。我们还可以准备一个简单的 HTML 文件 ajax/center-content.html来测试 Ajax 功能：

…
<body>
<p>Center content</p>
</body>
…

怎么做。。。

  1. 首先，我们将包括像 CSS 和 ExtJS 库文件这样的强制文件。

    ```php

    ```

  2. 我们将继续使用 onReady函数，该函数将运行我们的脚本：

    ```php Ext.onReady(function(){ var viewport = new Ext.Viewport({ layout:'border', items:[{ region:'west', id:'west-panel', title:'West', split:true, width: 200, layout:'accordion', items: [{ html: 'Navigation content', title:'Navigation' },{ title:'Settings', html: 'Settings content' }] },{ region:'center', layout:'column', autoLoad:{ url: 'ajax/center-content.html', method:'GET' } }] }); });

    ```

  3. Our layout with an accordion navigation is ready:

    How to do it...

它是如何工作的。。。

ExtJS 是为开发人员构建的，目的是让他们的生活更轻松。正如您在源代码中看到的，我们使用一个简单的 JavaScript 对象构建了一个布局。我们有一个包含两个项目的“视口”。一个位于左侧（区域：西），第二个位于右侧（区域：东）。在这种情况下，我们不必处理 CSS。ExtJS 通过 width, margins, cmargins等变量直接处理所有内容。 layout属性非常强大。西侧的内部布局与导航和设置一致。在中间的一栏中，我们可以看到使用 autoLoad方法通过 Ajax 加载的内容。

还有更多。。。

布局的可能选项有：绝对、锚定、卡片、列、拟合、表格、Vbox 和 Hbox。

MochiKit 中的事件处理

本章中的下一个轻量级库是MochiKit。在本任务中，我们将构建一个脚本，用于列出 onkeydown和 onkeypress事件。在每个事件之后，我们将显示按下的键及其键代码和键字符串。

准备好了吗

所有强制性文件、文档和演示均可在www.mochikit.com上获得。我们需要下载整个 MochiKit 库并将其保存在我们的 js文件夹中。小心， MochiKit.js只是包含 MochiKit 中所有必要子模块的主文件（例如， base.js, signal.js, DOM.js等等）。Ajax 请求的登录页将是 ajax/actions.php:

<?php
if($_GET["action"] && $_GET["key"]) {
// our logic for processing given data
} else {
echo "No params provided";
}
?>

怎么做。。。

  1. 让我们从 HTML 代码开始：

    ```php

    Event Key Code Key String
    onkeydown - -
    onkeypress - -

    ```

  2. 包括 MochiKit 框架：

    ```php

    ```

  3. 定义 JavaScript 功能：

    ```php connect(document, 'onkeydown', function(e) { var key = e.key(); replaceChildNodes('onkeydown_code', key.code); replaceChildNodes('onkeydown_string', key.string); doSimpleXMLHttpRequest("ajax/actions.php", { action: "keydown", key: key.code}); }); connect(document, 'onkeypress', function(e) { var key = e.key(); replaceChildNodes('onkeypress_code', key.code); replaceChildNodes('onkeypress_string', key.string); doSimpleXMLHttpRequest("ajax/actions.php", { action: "keypress", key: key.code}); });

    ```

  4. Our result is:

    How to do it...

它是如何工作的。。。

connect()函数将信号（Mochikit.signal API 参考）连接到插槽。在本例中，我们将文档连接到 onkeydown和 onkeypress处理程序以调用 function(e)。当 key()对象引用返回键代码和字符串时，参数 e表示我们的事件对象。

replaceChildNodes(node[, childNode[,...]])是 Mochikit.DOM API 引用的一个函数，它从给定的 DOM 元素中删除所有子元素，然后将给定的 childNode追加到该元素。

在每个 onkeydown和 onkeypress事件之后，我们使用 doSimpleXMLHttpRequest()函数发送一个 Ajax 调用。在我们的示例中，来自页面的请求类似于 ajax/actions.php?action=onkeydown&key=87。

还有更多。。。

通过 disconnect()或 disconnectAll()功能，可以断开任何已连接插槽的对象。如果我们只想使用 connect()一次，我们可以使用 connectOnce()函数，这将在触发信号处理程序后自动断开它的连接。

MochiKit 允许我们充分利用现有的浏览器生成的事件，但其中一些事件并不是所有浏览器都支持的。MochiKit 能够合成这些事件，包括 onmouseenter, onmouseleave和 onmousewheel。

使用 Dojo 构建选项卡导航

现在我们来看看 DojoJavaScript 库。我们将使用Dojo Toolkit （dojoToolKit）的基本功能构建一个简单的选项卡导航。

准备好了吗

我们需要包括来自 Google CDN（等网站的 Dojo 工具包 http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js 或 AOL CDN（http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js.

如果您想下载整个 Dojo SDK，请访问www.dojotoolkit.org/download。

Ajax 请求的登录页将为 ajax/content1.html:

<body>
<h1>Operation completed.</h1>
</body>

怎么做。。。

  1. 我们将包括来自 claro主题的样式（包括在我们文档

    ```php

    ```

    的<head>标签中的 dojoToolKit)） 2. 我们将在文档正文中定义 HTML 代码：

    ```php

    click here to see how it works
    Lorem ipsum - the second
    Lorem ipsum - the last...

    ```

  2. 当 HTML 和 CSS 准备就绪时，我们将包括带有所需模块的 DojoToolkit：

    ```php dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane");

    ```

  3. 添加 JavaScript 功能会给我们带来以下内容：

    ```php dojo.addOnLoad(function() { if (document.pub) { document.pub(); } dojo.query("#showMe").onclick(function(e) { dojo.xhrGet({ url: "ajax/content1.html", load: function(result) { alert("The loaded content is: " + result); } }); var node = e.target; node.innerHTML = "wow, that was easy!"; }); });

    ```

  4. When the preceding code snippet is ready and saved, our result will be a simple tab navigation with three tabs.

    How to do it...

它是如何工作的。。。

正如您在源代码中看到的，我们使用的是 Dijit Dojo UI 组件系统。Dijit包含在 Dojo SDK 中，包括具有四个受支持主题的 UI 组件 (nihilo soria, tundra,and claro)。我们可以通过在<body>标记中选择一个类来设置要使用的主题。在前面的示例中，我们有 class="claro。

当我们包含 dojoToolKit脚本时，我们需要为 djConfig属性提供 parseOnLoad:true。否则，Dojo 将无法找到应该转换为 Dijit 小部件的页面元素。

当我们想要使用一个特定的小部件时，我们需要调用小部件所需的类（dojo.require("dijit.layout.TabContainer")，并提供它的 dojoType属性（dojoType="dijit.layout.TabContainer"。作为在 Dojo 中使用 Ajax 的一个示例，每次单击 showMediv.时，我们都使用 dojo.xhrGet()函数来获取 ajax/content1.html的内容

使用 YUI 库构建图表应用程序

在这个任务中，我们将使用由 Yahoo！绘制图表。

准备好了吗

YUI 库可在 Yahoo！上下载 s 开发者网站（http://developer.yahoo.com/yui/3 。在我们将其保存到 js文件夹后，我们就可以开始编程了。

怎么做。。。

  1. 我们必须首先在文档的<head>标记中包含 YUI 库，以及图表占位符

    ```php

    mychart {

    margin:10px; width:90%; max-width: 800px; height:400px; }

    ```

    的样式 2. 我们将把我们的 HTML 放在<body>标记中，以标记我们的图表将被放置的位置：

    ```php

    ```

  2. 我们的 JavaScript 如下：

    ```php (function() { YUI().use('charts', function (Y){ //dataProvider source var myDataValues = [ {date:"January" , windows:2000, mac:800, linux:200}, {date:"February", windows:3000, mac:1200, linux:300}, {date:"March" , windows:3500, mac:1900, linux:1400}, {date:"April" , windows:3000, mac:2800, linux:200}, {date:"May" , windows:1500, mac:3500, linux:700}, {date:"June" , windows:2000, mac:3000, linux:250} ]; //Define our axes for the chart. var myAxes = { financials:{ keys:["windows", "mac", "linux"], position:"right", type:"numeric" }, dateRange:{ keys:["date"], position:"bottom",type:"category" } }; //instantiate the chart var myChart = new Y.Chart({ type:"column", categoryKey:"date", dataProvider:myDataValues, axes:myAxes, horizontalGridlines: true, verticalGridlines: true, render:"#mychart" }); }); })();

    ```

  3. The results after saving and opening our HTML document are as follows:

    How to do it...

它是如何工作的。。。

YUI 图表在 Chart对象中定义。对于“documentready”函数，我们将使用 (function(){...})()语法。我们需要指定要使用 YUI() 'charts'。

主要部分是创建一个 Y.Chart对象。我们可以定义该图表的呈现方式、网格线的外观、在何处显示图表以及显示哪些数据。我们将使用 myAxes对象定义轴，该对象处理侧面的图例。我们的数据存储在 myDataValues对象中。

还有更多。。。

有许多可能性和方法来设计我们的图表。我们可以将图表拆分为最小的部分并设置每个属性。例如，标签或页边距的旋转：

styles:{
label: {rotation:-45, margin:{top:5}}
}

YUI 还介绍了 Ajax 功能。下面是一个简单的 Ajax 调用的外观：

<div id="content">
<p>Place for a replacing text</p>
</div>
<p><a href="http://ajax/content.html" onclick="return callAjax();">Call Ajax</a></p>
<script type="text/javascript">
//<![CDATA[
function callAjax(){
var sUrl = "http://ajax/content.html";
var callback = {
success: function(o) {
document.getElementById('content')
.innerHTML = o.responseText;
},
failure: function(o) {
alert("Request failed.");
}
}
var transaction = YAHOO.util.Connect
.asyncRequest('GET', sUrl, callback, null);
return false;
}
//]]>
</script>

我们创建了 callAjax()函数，通过点击 Call Ajax超链接触发。Ajax 调用由 YAHOO.util.Connect.asyngRequest()提供。我们使用 success方法定义了 HTTP 方法（GET）、请求的 URL ajax/content.html和 callback功能，该方法在 'content' <div>中显示响应文本。

使用 jQuery 滑块加载动态内容

在本任务中，我们将学习如何使用 jQuery 滑块动态加载页面内容。

准备好了吗

在这个任务中，我们还将使用 jQueryUI 库。我们可以包括中的 jQuery UI 库 http://jqueryui.com/download 或来自某个 CDN。然后我们将为我们的小项目创建一个文件夹，比如说 packt1。我们的 packt1文件夹中会有更多文件夹；这些是用于通过 Ajax 加载 HTML 文件的 ajax文件夹，用于样式的 CSS，以及用于 JavaScript 库的 js。

文件夹结构如下所示：

Packt1/
ajax/
content1.html
content2.html
content3-broken.php
items.html
css/ - all stylesheets
js/
ui/ - all jQuery UI resources
jquery-1.4.4.js
index.html

怎么做。。。

既然一切都安排好了，我们准备开始了。

  1. 我们将从基本的 HTML 布局和内容开始。这一部分已经包含了一个链接，指向 jQueryUI 库中提供的 CSS。我们可以将其保存为 index.html:

    ```php <!DOCTYPE html>

    Ajax using jQuery
    This content is preloaded.

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/7634.html