Articles
Archive for the ‘jquery’ tag
Simple jQuery AJAX Tutorial
I'm a huge jQuery fan and use it any time I need to write JavaScript. It's extremely easy to use, more logical than straight JavaScript and can be separated out of HTML allowing for external scripts and easier updates.
If you've ever ran a PHP/Ruby/Python/Perl web script that takes a considerable amount of time to load (5 seconds or more), then you might want to look into AJAX. AJAX essentially allows a page to load while asynchronously loading other scripts, allowing users to navigate to another page or view content on that one page while waiting for another section to load.
It increases usability and eases user frustration dramatically.
Install jQuery
Firstly, we'll load jQuery from Google's caching server, allowing for fast-transfer speeds, lower bandwidth usage on our server and since many other sites use it, the script may already be cached in the user's browser, again saving bandwidth and transfer time.
To add jQuery to your website, add this inside your <head></head> tags:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"
charset="utf-8"></script>
Add an AJAX Request
The AJAX is extremely simple in jQuery and looks something like this:
$.ajax(
{
type: 'POST',
url: 'path/to/php/scripts/script.php',
data: 'data=this_is_some_data&another_variable='+dynamic_variable,
success: function(msg){
$('#result').html(msg)
}
});
How the AJAX Works
First you load the .ajax method, then tell it you want to use POST, then the URL to the PHP script, any data you want to send to it (you can omit this part if you don't accept any variables) and then the success function essentially dumps the return data to <div id="result"></div>. The function also uses the .html method instead of .text so that the HTML is loaded in the browser's DOM and doesn't look like garbage.
Increasing Usability
In between the <div id="result"></div> tag, you may want to add an animated GIF and the text 'Loading...' so the user knows something is about to load. When the AJAX request is complete, the 'Loading...' text and the animated GIF will be overwritten by the results of your script. Not difficult to implement, but gives the user a better indication of what is being performed.
Example
Loading...
(Nothing is actually going to load here, so don't wait for anything. However, do feel free to copy the image and use it within your own website or go to ajaxload.info to find different styles and colours!)
Security
Also, since the URL to your script is now available to the public, make sure you use a different folder path than your other PHP scripts or make sure they're programmed for no direct access.
e.g. index.php (or any directly accessed file) would have:
define('INDEX', true);
while your scripts included from this file would start with:
<?php defined('INDEX') OR die('No direct access allowed.');
That way, if it's a security concern, no one can execute your script directly.
