Az AJAX egy olyan technika, amellyel hozzáférhetünk a szerverhez a weboldalunk használatával. A neve az Asynchronous Javascript And XML akronímja. Használatának előnye, hogy:

• Frissíthetjük a weboldalt, annak újra töltése nélkül
• Kérhetünk le adatot a szervertől – miután az oldal betöltött
• Fogadhatunk adatot a szervertől – miután az oldal betöltött
• Küldhetünk adatot a szervernek – a háttérben

Az AJAX a böngészőbe épített XMLHttpRequest objektumot hazsnál, hogy adatot kérjen le a szervertől, és JavaScript, és HTML DOM -ot használ, hogy a kapott adatot megjelenítse. Az adat továbbításához lehet használni XML, és JSON fájlokat. Lehetőségünk van továbbá az oldal aszinkron frissítésére, vagyis a háttérben adatot cserélhetünk a szerverrel. E miatt a funkció miatt megtehetjük, hogy csak bizonyos részeit frissítjük az oldalnak, nem pedig az egészet.

Egy AJAX folyamat menete:

• Egy esemény bekövetkezik az oldalon
• A JavaScript létrehoz egy XMLHttpRequest objektumot
• Az XMLHttpRequest objektum küld egy kérést a szervernek
• A szerver feldolgozza a kérést
• A szerver visszaküld egy választ az oldalnak
• A választ beolvassa a JavaScript
• A megfelelő esemény, mint mondjuk az oldal frissítése végrehajtódik a JavaScript által

Az XMLHttpRequest objektumot a következő képpen lehet létrehozni abban a forméban, hogy támogassa a korábbi böngésző típusokat is:

var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// kód az IE6, IE5 -nak
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Az XMLHttpRequest objektumnak különböző eljárás variációi vannak:

• new XMLHttpRequest() új objektum létrehozására
• abort() megszakítja a jelenlegi kérést
• getAllResponseHeaders() header információ viszaadása
• open(method,url,sync,user,psw) specifikálja a kérés típusát (GET, POST, file hely, igaz/hamis, felhasználónév, jelszó)
• send() elküldi a kérést a szervernek, GET kéréseknél használjuk
• send(string) elküldi a kérést a szervernek, POST kéréseknél használjuk
• setRequestHeader() a küldendő header -hez ad egy címke/érték párost

Az XMLHttpRequest objektumnak vannak tulajdonságai is:

• onreadystatechange: egy az állapot változáshoz kötött eljárást ír le
• readyState: az objektum állapotát tartalmazza, ez lehet:
  • 0: kérés nem inicializált
  • 1: szerver kapcsolat létrejött
  • 2: kérés fogadva
  • 3: kérés feldolgozása
  • 4: kérés kész, válasz kész
• responseText: a válasz adatot adja vissza szövegként
• responseXML: a válasz adatot adja vissza XML formátumban
• status: az állapo számát adja vissza a kérésnek:
  • 200: „OK”
  • 403: „Forbidden”
  • 404: „Not Found”
  • …
• statusText: Az állapot szöveget adja vissza

Egy egyszerűbb példa az AJAX használatára adatbázis esetében:

function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.asp?q="+str, true);
xhttp.send();
}

A metódus a legördülő menüből kiválasztva az értéket, elindít egy kérést a szerver felé (ezt itt most egy sima asp reprezentál), majd amikor az állapot változik a válaszból lekéri az információkat. Az asp fájlunkban SQL kód található, ami a kérésnek megfelelő adatokat gyűjti össze a válaszba.

Egy rövid példa AJAX, és JSON használatára:

function loadJSON(){
var data_file = "data.json";
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("error!");
return false;
}  }  }
http_request.onreadystatechange = function(){
if (http_request.readyState == 4  ){
// Javascript eljárás JSON.parse a JSON adatt elemzésére
var jsonObj = JSON.parse(http_request.responseText);
// jsonObj mostmár tartalmazza az adat struktúrát
// hozzáférhetunk az adathoz jsonObj.name és jsonObj.country -val.
document.getElementById("Name").innerHTML = jsonObj.name;
document.getElementById("Country").innerHTML = jsonObj.country;
}
}
http_request.open("GET", data_file, true);
http_request.send();  }

Ebben a példában betöltjük a data.json fájlt, majd egy update eseményre, ez lehet egy gombnyomás, frissülnek a megjelenített adatok.

JSON

A JSON, vagy JavaScript Object Notation egy egyszerű szöveg alapú nyílt szabvány, amit arra terveztek, hogy könnyen olvasható legyen emberek által is. Ahogy a nevében is látható a JavaScriptből lett kiterjesztve. A fájlnév kiterjesztése .json. A JSON -t struktúrált adatok szerializálására, és hálózaton keresztül való továbbítására használjuk, főként a szerver és web applikáció közötti kommunikációnál. A különböző web API -k is a JSON -t használják, hogy publikus adatot szolgáltassanak. Sok modern programozási nyelvnél lehet használni.

A főbb előnyei, hogy egyszerű írni, és olvasni, valamint nyelv független. Egy egyszerű példa a JSON struktúrára:

{
"Contacts": [
{
"id":"01",
"language": "English",
"birth": "1981.11.11",
"name": "Herbert Schildt"
} ] }

A JSON szintaxisa:

• Adatokat név/érték párosok alkotják
• {} zárójelek között objektumok vannak, „név” : „formában”
• [] tárójelek tömböket tárolnak, melyek értékei , -vel vannak elválasztva

Az adat struktúra lehet név/érték, vagy rendezett értékek listája is. Támogatja a legtöbb változó típust is (number, string, boolean, array, value, object, whitespace, null). A Whitespace típust token -ek között lehet használni. A tulajdonságainak vizsgálatára is lehetőségünk van, mint pl. a cím, séma, leírás, maximum hossz, minimum hossz, és még egyéb tulajdonságok. Egy JSON objektumot a következő képpen hozhatunk létre:

var JSONObj = { "contactname ":"Gideon", "Age":56 };