[Tutorial JS] Introducere in Ajax

[Tutorial JS] Introducere in Ajax

#1 de BoGdY

Nume Tutorial: Introducere in Ajax
Descriere: Introducere in Ajax
Download:
Autor: Anonim
Sursa (Link-ul oficial):

Afiseaza Textul

Propria parere: Folositor.
Tutorialul:

Ce ar trebui de ştiut pe scurt despre Ajax:
- este prescurtarea de la "Asynchronous JavaScript and XML"
- termenul a fost introdus de către Jesse James Garrett în februarie 2005
- nucleul său îl reprezintă obiectul XMLHttpRequest care este folosit pentru a schimba date asincron cu serverul web
- nu este o tehnologie, ci termenul se referă la un grup de tehnologii

Avantaje ale folosirii Ajax-ului:
- în primul rând elimină refresh-ul paginii web, ceea ce face ca aplicaţia web să semene cu una desktop şi astfel duce la o îmbunătăţire a interfeţei utilizator
- îmbunătăţire a lungimii de bandă
- o separare a datelor, funcţionalităţii şi a formatării paginii

Dezavantaje
- nu rulează pe versiuni vechi ale browserelor
- lipsa funcţionalităţii a butoanelor de back şi forward (deşi mai nou s-au găsit work - around uri)
- la timpi de răspuns foarte mari utilizatorul are impresia că cererea lui nu este procesată (acest lucru poate fi evitat introducând un preloader)
- unele dezavantaje în privinţa SEO
- nu rulează dacă Javascript-ul este oprit de către utilizator (sau browser-ul nu cunoaşte limbajul javascript, cum sunt browserele text only)

Un "Hello World" al Ajax-ului

De obicei acest lucru este realizat printr-o aplicaţie care adună două numere. Adunarea va fi realizată de către un script php care va fi "chemat de către Ajax"

hello.html

Pagina are două input-uri care au asignate două id-uri nr1 respectiv nr2 şi un buton de submit care atunci când este apăsat se execută funcţia calculeaza definita în fişierul ajax.js inclus în head-ul paginii.

Cod: Selectaţi tot

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <title>Hello World Ajax</title>  
 <script type="text/javascript" src="js/ajax.js"></script>
 </head>  
 <body>  
 Nr 1 = <input type="text" id="nr1" />
 Nr 2 = <input type="text" id="nr2" />
 <br />
 <input type="submit" value="Calculeaza" onclick="javascript:calculeaza();" />  
 <div id="rezultat" />  
 </body>  
 </html>

ajax.js

În acest fişier se creează obiectul XMLHttpRequest care este "inima" Ajax-ului şi funcţiile care lucrează cu acesta

Cod: Selectaţi tot

var xmlHttp = creazaXmlHttp();  
 /*
 Returneaza obiectul XMLHttpRequest creat
 */
 
 function creazaXmlHttp() {  
    var xmlHttp;  
    // pentru IE  
    if(window.ActiveXObject) {  
       try {  
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       }  
       catch (e) {  
          xmlHttp = false;  
       }  
    }  
    //Pt Mozilla sau alte browsere
    else {  
       try {  
          xmlHttp = new XMLHttpRequest();  
       }  
       catch (e) {  
          xmlHttp = false;  
       }  
    }
 
    if (!xmlHttp)
       alert("Nu s a putut crea obiectul XMLHttpRequest .");  
    else  
       return xmlHttp;  
 }
 
 /*
 Acesta functie preia numerele introduse in input-uri si le trimite php-ului pentru calculare
 */
 
 function calculeaza() {  
    // verificam daca xmlHttp este liber  
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {  
       //obtinem cele doua valori ale numerelor
       var nr1 = document.getElementById('nr1').value;
       var nr2 = document.getElementById('nr2').value;
       // executam script-ul php de adunare trimitand cele doua numere ca paramentri prin get
       xmlHttp.open("GET", "php/calculeaza.php?nr1=" + nr1+"&nr2="+nr2, true);
       //definim functia care se va ocupa de manipularea rezultatului primit de la script-ul php  
       xmlHttp.onreadystatechange = gestioneazaRezultat;
       // trimitem cererea catre server  
       xmlHttp.send(null);  
    }  
 }
 /*
 Acesta este functia de "callback" care primeste rezultatul de la php
 */
 function gestioneazaRezultat() {  
    // daca rezultatul este obtinut  
    if (xmlHttp.readyState == 4) {  
       // status = 200 arata faptul ca cerea a fost rezoltata cu success  
       if (xmlHttp.status == 200) {  
          // extragem rezultatul  
          raspuns = xmlHttp.responseText;
          //modificam div-ul rezultat cu rezultatul  
          document.getElementById("rezultat").innerHTML = '<b> Suma =' + raspuns + '</b>';
       }  
       // daca statusul este diferit avem o problema
       else {  
          alert("Problema la accesare: " +xmlHttp.statusText);  
       }  
    }  
 }

calculeaza.php

În acest script pur şi simplu se adună ceea ce se primeşte prin get şi este trimis spre procesare

Cod: Selectaţi tot

 <?php
 echo $_GET['nr1']+$_GET['nr2'];
 ?>

[Tutorial JS] Introducere in Ajax

[Tutorial JS] Introducere in Ajax

Cine este conectat