jQuery, Ajax, JSON és PHP

Ajax kérésekhez legtöbbször jQuery-t használok, mert egyszerű, gyorsan elkészíthető és megbízható.
Most gyorsan felvázolnám, hogyan is kell egy egyszerűbb Ajax kérést összedobni jQuery segítségével.

Szerveroldal (PHP):
Ha egyszerű szöveges üzenetet szeretnénk küldeni a kliensoldalra, akkor egy sima echo utasításra lesz szükség.
pl.:

<?php
	echo "foobar";
?>

Ha összetett adatstruktúrát szeretnénk küldeni a kliensoldalra, akkor JSON objektumként küldjük azt.
pl.:

<?php

	$response = array();
	$response['foo'] = 'foo';
	$response['bar'] = 'bar';
	$response['baz'] = 'buz';
	
	echo json_encode($response);
?>

Kliensoldal (JavaScript):

Egyszerű szöveges üzenet esetén a JavaScript kód a következő:

$.ajax({
    // szerveroldali szkript elérési útja
    url: "server.php",
    type: "GET",
    // típus és kódolás
    contentType: "application/text; charset=utf-8",
    // paraméterek
    data: ({
        foo: foo_,
        bar: bar_,
        buz: buz_
    }),
    // kommunikációs adattípus
    dataType: "text",
    beforeSend: function(x) {
        if (x & amp; & amp; x.overrideMimeType) {
            x.overrideMimeType("application/text;charset=UTF-8");
        }
        // kiíratunk egy animált ajax-loader GIF-et amíg a kérés tart
        $('#myDiv').html("<div id="ajax_gif ">);
        $('#myDiv').append("<img />")
        $('#myDiv').append("</div>");
    },
    success: function(data){
        $('#myDiv').html(data); // foobar
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        // ha gond van kiíratjuk a hibát
        alert("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
    }
});

JSON adatszerkezet esetén a JavaScript kód a következő:

var _foo = "foo", _bar = "bar", _buz = "buz";
$.ajax({
    // szerveroldali szkript elérési útja
    url: "server.php",
    type: "GET",
    // típus és kódolás
    contentType: "application/j-son; charset=utf-8",
    // paraméterek
    data: ({
        foo: foo_,
        bar: bar_,
        buz: buz_
    }),
    // kommunikációs adattípus
    dataType: "json",
    beforeSend: function(x) {
        if (x & amp; & amp; x.overrideMimeType) {
            x.overrideMimeType("application/j-son;charset=UTF-8");
        }
        // kiíratunk egy animált ajax-loader GIF-et amíg a kérés tart
        $('#myDiv').html("<div id="ajax_gif ">);
        $('#myDiv').append("<img />")
        $('#myDiv').append("</div>");
    },
    success: function(data){
        // a kapott adatokkal már azt teszünk amit akarunk, pl.kiíratjuk egy DIV - be
        $('#myDiv').html(data.foo + '
'); // foo_resp
        $('#myDiv').append(data.bar + '
'); // bar_resp
        $('#myDiv').append(data.buz); // buz_resp
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        // ha gond van kiíratjuk a hibát
        alert("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
    }
});

A második esetben a GET tömbben küldött adatokkal dolgozunk a szerveroldalon.