Easily Interact between Server and Client using these jQuery with Ajax Snippets

Feb 15, 2011

0 46860

Ajax with jQuery – several interactive samples
Ajax – this is group of technologies using in web development to create interactive applications. Ajax is client-server technology which allow to web page to retrieve data asynchronously from server without reloading page. All this allow to achieve really nice and good results. jQuery library will help us greatly with it. All just because it have all methods to work with Ajax.

Here are samples and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Firstly lets check syntax of calling ajax method

This is or $.ajax or jQuery.ajax of course. Used params can be different:

$.ajax(Map properties) or $.ajax(String url [, Map properties])

Second param set was added in version 1.5 of jQuery.

url – Requested page URL address.

properties – Array of properties for your request.

Commonly, array of properties very big, you can about all of them here

I will tell you just about most useful params

success (function) – this function will called when the request succeeds. The function passing us 1-3 params (depends on used version of library). But first param is always returned data from server. We will using it.

data (object/string) – your custom data which will passed to requested page.

dataType (string) – possible values: xml, json, script, or html. This describing which data type we expecting from server response.

type (string) – request type. possible values GET or POST. By default – GET.

url (string) – Url address to request.

So, lets start creating our samples !

sample 1 – most easy sample: is just retrieving of some text information.

$.ajax({
  url: 'response.php?action=sample1',
  success: function(data) {
    $('.results').html(data);
  }
});

I created that .results DIV to accept our responses.

awaiting for response

What did server? – easy – just return text value:

echo 'Sample 1 - success';

sample 2 – we will send custom values to our PHP script

$.ajax({
  type: 'POST',
  url: 'response.php?action=sample2',
  data: 'name=Andrew&nickname=Aramis',
  success: function(data){
    $('.results').html(data);
  }
});

What did our server? – just return text value – with printed income variables:

echo 'Sample 2 - success, name = ' . $_POST['name'] . ', nickname= ' . $_POST['nickname'];

sample 3 – we will use dataType = script.

$.ajax({
  dataType: 'script',
  url: 'response.php?action=sample3',
})

As you see, we doing nothing on success here, instead this we will able to do it at server side:

echo "$('.results').html('Sample 3 - javascript evaluating');";

sample 4 – we will use dataType = xml. This is useful to work with external XML, as example RSS feeds

$.ajax({
  dataType: 'xml',
  url: 'response.php?action=sample4',
  success: function(xmldata){
    $('.results').html('');
    $(xmldata).find('item').each(function(){
        $('

').html( $(this).text() ).appendTo('.results');
    });
  }
});

Our XML provider just should return XML to us:

header ('Content-Type: application/xml; charset=UTF-8');
echo <<
Item 1
Item 2
Item 3
Item 4
Item 5
XML;

sample 5 – we will use dataType = json. This is interesting too, just because we will able to use income params as attributes of received object

$.ajax({
  dataType: 'json',
  url: 'response.php?action=sample5',
  success: function(jsondata){
    $('.results').html('Name = ' + jsondata.name + ', Nickname = ' + jsondata.nickname);
  }
});

Our XML provider just should return XML to us:

$aRes = array('name' => 'Andrew', 'nickname' => 'Aramis');
require_once('Services_JSON.php');
$oJson = new Services_JSON();
echo $oJson->encode($aRes);