Total Followers 132,503
Hey guys and gurls! Today we are going to take a look at different asynchronous technologies. There are many variations of them over the net. They’re AJAX, AJAH, AHAH, and AJAJ.
AJAX (Asynchronous Javascript and XML) – is a technology for asynchronous data transmission between the browser and the server. Asynchrony implies the data transfer without reloading the page. In other words, you can respond to user actions more quickly, making your applications more interactive. For example, in the sign-up form checking login for employment can be performed immediately after the login is entered without updating the page (I think all have met with such).
Before we get started, i’ll tell you a little bit more about data transfer solutions… The title AJAX referred to XML, although at present, for asynchronous data transmission, it is used less frequently (in pure form, at least). In addition to XML, there are HTML (a technology called AJAH), HTML + HTTP (AHAH) and Javascript + JSON (AJAJ).
I will lead examples using jQuery JS framework. jQuery supports all three types of asynchronous data transfer.
There is a lot of features to work with AJAX in jQuery, but the main ones being. get () and. gost (). Their syntax looks like:
$.post(url[, params[, callback]]) $.get(url[, params[, callback]])
where, url – the address where we should send the POST (GET) request to,
params – the parameters (param1: value1, param2: value2),
callback – function to be executed after the page returns the answer for the query (as an argument it is passed the answer).
index.html
function LoadPhpVersion() {
$.post('version.php', {}, show_version);
}
function show_version(version) {
$('#version_box').html(version);
}
AJAX it!
Your php version is :
version.php
echo phpversion();
Also in the directory with these files we should have jQuery library: jquery.js.
In this example, we just sent a POST request without parameters to the version.php script, which returned in response to our request your PHP version. A show_version() function displayed her to the html page.
As you can see everything is very simple. But in our case, everything can be even simpler :)
In the previous example, the result of our request was received by the html-code (just text), which just lead to the desired location. This operation is very frequently used when templater and AJAX are working together (ie AHAH).
To use it with AHAH jQuery has a method called load().
Let’s get rewrite the previous example, but this time we will use the AHAH.
index.html
function ShowVersion(elem_id) {
$('#'+elem_id).load('version.php');
}
AJAX it!
Your php version is :
version.php
echo phpversion();
In this example, the javascript code is considerably reduced. As you can see, for the method load(), we should simply specify the element where we fetch the result and give him the name of the script that will send a request to.
Things got even easier.
Finally we consider another, very convenient data format – JSON.
Using this format and technology (AJAJ in jQuery), it is possible to transmit data to the PHP is not one piece, as object fields. So, you can return multiple variables at a time.
Working with AJAJ in jQuery is implemented through the method called getJSON();
A quick example
index.html
function GetVersion() {
$.getJSON('version.php', {}, function(obj){
$('#version_box').html(obj.version);
$('#text_box').html(obj.text);
});
}
AJAX it!
Your php version is :
Text :
version.php
version: '',
text: 'Hello'
In this example, on server side two variables are generated in JSON format: version, text and displayed.
On the client side (browser side), this block is transformed into an object (via the function eval() ) with two fields – obj.version and obj.text.
By the way, jQuery has an other useful method: getScript(), which looks like:
$.getScript(‘script.js’);
This code loads script.js file from the server and executes its code in the browser.
P.S. When developing applications using AJAX, I strongly recommend using Firefox with the Firebug plugin (very easy and comfortable to track the headers sent from the browser to the client asynchronously).
Feel free to download the example files by clicking [HERE].
That’s all; I hope you enjoyed this article, and thanks for reading! As always, your comments and questions are welcome!
Get The Only Freelancer crash course you will ever need to read!
Hi there! My name is Nick Plekhanov. I'm a passionate web developer and user interface designer from Russia, experienced in PHP, and MySQL along with the beautiful XHTML and CSS under jQuery stuff. I've been doing web development for 3 years. Here, I'll be your PHP coder, sometimes designer, and SEO expert. My own web development blog is coming really soon. If you’d like to connect with me, follow me on Twitter.
Wednesday, October 27th, 2010 20:05
Kinda going overboard with those acronyms. Did you make those other ones up?
Wednesday, October 27th, 2010 17:55
Red it as *POST!
Wednesday, October 27th, 2010 11:41
this language was really hard to me and reading about it did help me a lot and im improving , thank you , i will be following details !!! :)
Tuesday, October 26th, 2010 21:31
… There is a lot of features to work with AJAX in jQuery, but the main ones being. get () and. “gost” (). Their syntax looks like: … look at gost #lol :P
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Boris Aguilar
Tuesday, October 26th, 2010 21:31
… There is a lot of features to work with AJAX in jQuery, but the main ones being. get () and. “gost” (). Their syntax looks like: … look at gost #lol :P
Rahul
Wednesday, October 27th, 2010 11:41
this language was really hard to me and reading about it did help me a lot and im improving , thank you , i will be following details !!! :)
Nick Plekhanov
Wednesday, October 27th, 2010 17:55
Red it as *POST!
William Saunders
Wednesday, October 27th, 2010 20:05
Kinda going overboard with those acronyms. Did you make those other ones up?