使用juqery创建加载消息Using JQuery for an Ajax loading message

askie — Sun, 07 Sep 2008 04:05:00 +0000

这些天我在利用jquery创建一个项目，项目中大量的使用了jquery。在实施的过程中需要利用jquery创建加载内容的对话框，下面是我的实施过程：

1. Build the base page

The base page will be the one that the user visits. It is responsible for showing the loading message, and providing an area for the data to be displayed. The most basic HTML goes something like this:

<html>
<head>
<title>Base page for contenttitle>
head>
<body>
<div id="contentLoading" class="contentLoading">
<img src="loading.gif" alt="Loading data, please wait...">
div>
<div id="contentArea">
div>
body>
html>

The key sections here are the

tags on lines 06 and 09 above. The

on line 06 is the one that displays the loading message. In this case it is an image I downloaded from the Ajaxload website. The

on line 09 is the one that will be where the content that we get will be displayed.

2. Build the page that provides the content

The second page is the one that will be provide the content to be displayed in the

tag in the base HTML page. For my web development I use PHP, but it could be any server based language that is used. A simple PHP page to confirm that the Ajax is working is as follows:

// get the start time
$start_time = microtime(true);

// sleep for four seconds
sleep(4);

// get the end time
$end_time = microtime(true);

// print out a message
print "Call to secondary PHP page worked!
"
print "Elapsed time: " $end_time - $start_time . "
"

The key line here is line 05. The call to the sleep() function will mean that the execution of the page is suspended for four seconds. In this way you can see if the Ajax is working because you will see the loading message for no more than four seconds. If it is longer, or shorter, you know something bad happened.

3. Tying it all together with JQuery and Ajax

To tie the two pages together using JQuery and Ajax the first thing we need to do is modify the base page slightly so the JQuery library is loaded. This is simply achieved by line 04 in the source code below:

<html>
<head>
<title>Base page for contenttitle>
<script src="/jquery.js" type="text/javascript">script>
head>
<body>
<div id="contentLoading" class="contentLoading">
<img src="loading.gif" alt="Loading data, please wait...">
div>
<div id="contentArea">
div>
body>
html>

We then need to add the following JavaScript code as well:

1:

The code above adds three functions. Their jobs are as follows:

When the page is ready to be manipulated, ie. fully loaded, use Ajax to load the output of the test.php page into the
tag;
When an Ajax call starts, show the
tag; and
When an Ajax call completes, fade out the
tag effectively hiding the message.

In this way the following workflow is achieved:

The users browser loads the base HTML page;
Once the base HTML page is loaded an Ajax call is made to load the test.php page;
When the Ajax call starts the content in the
tag, the loading message, is displayed;
When the Ajax call finishes the output of the test.php page is put into the
tag and displayed to the user. At the same time the content in the
tag is hidden.

This achieved what I needed. The page shows the user that something is happening, the data is being loaded, and therefore hopefully the user is patient enough to wait until it completes and doesn’t click the refresh button or become impatient. There are a couple of caveats with this solution and they are:

If the user doesn’t have JavaScript enabled they won’t see the content returned by the Ajax call because it will never happen. In a closed environment, like the one I’m developing for, this isn’t much of an issue but for a website designed for general consumption an alternative would need to be provided;
The use of Ajax can make it harder to diagnose display issues with your HTML because you can’t see the HTML returned by the Ajax call by using the “view source” functionality of your browser. In my case I use Firefox and to see the HTML I needed to use the “View Generated Source” functionality of the excellent Web Developer add-on; and
The example code uses the global AjaxSend and AjaxStop functions. This means it is not practical to have another different Ajax call on the same page.

I’m sure there are other ways of doing this type of thing, by no means is this the only way. I’m still exploring the capabilities of the JQuery library and will no doubt find different ways of achieving this type of functionality. If I do, I’ll be sure to post about them here.

Google AJAX Libraries API

askie — Fri, 30 May 2008 13:37:30 +0000

Google 最近发布了 AJAX Libraries API。简单说就是 Google 把一些非常流行的 JavaScript 框架放到 Google 的服务器上。这样大家来说可以充分利用 Google 的服务器资源，节省自己的网络带宽，更重要的是 Google 对这些框架进行了压缩，所以在使用 JavaScript 框架的时候速度方面有很大的提高。目前 Google 已经包含了以下的 JavaScript 框架：

jQuery
prototype
script.aculo.us
MooTools
dojo

目前可以有两种调用这些 JavaScript 框架的方法：
第一种，传统的 JavaScript 调用方法：

<script src = "http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"> script>

第二种通过 Google AJAX API Loader 的 google.load() 方法。

<script src="http://www.google.com/jsapi">script>
<script>
// Load jQuery
google.load("jquery", "1");
script>

更多详细介绍请看 AJAX Libraries API 网站。

作者：雪山飞猪
原文链接：Google AJAX Libraries API

记录与PHP的PK经历 » AJAX

使用juqery创建加载消息Using JQuery for an Ajax loading message

Related items

Google AJAX Libraries API

Related items