Come funziona AJAX?


87

Qual è l'essenza di AJAX? Ad esempio, desidero avere un collegamento sulla mia pagina in modo tale che quando un utente fa clic su questo collegamento, alcune informazioni vengono inviate al mio server senza dover ricaricare la pagina corrente. Quello è AJAX?

Sono stato in grado di ottenere questo comportamento utilizzando isoframes. Più in dettaglio metto un link (diciamo una piccola immagine) in un piccolo isoframe. Quando l'utente fa clic su questo collegamento, il browser ricarica solo la pagina nell'isoframe.

Tuttavia, penso che non sia un modo elegante per raggiungere l'obiettivo. Penso di dover usare AJAX. Come funziona? Un utilizzo di XHTML può risolvere il problema considerato in modo elegante? O devo usare JavaScript?

Non mi serve molto. Voglio solo avere un piccolo collegamento che (dopo aver cliccato) invia alcune informazioni al server. Diciamo che ho una "immagine da star" vicino a un messaggio. Se un utente fa clic sulla stella (il messaggio gli piace), cambia il colore e il database di aggiornamento del mio server (per ricordare a quell'utente piace il messaggio).


8
Link obbligatorio a wikipedia: en.wikipedia.org/wiki/Ajax_(programming)
Jon B

Per la risposta, visita il link: w3schools.com/php/php_ajax_intro.asp

Risposte:


121

Se sei totalmente nuovo in AJAX (che sta per Asynchronous Javascript And XML), la voce AJAX su wikipedia è un buon punto di partenza:

Come DHTML e LAMP, AJAX non è una tecnologia in sé, ma un gruppo di tecnologie. AJAX utilizza una combinazione di:

  • HTML e CSS per la marcatura e lo stile delle informazioni.
  • Il DOM a cui si accede con JavaScript per visualizzare e interagire dinamicamente con le informazioni presentate.
  • Un metodo per lo scambio di dati in modo asincrono tra browser e server, evitando così il ricaricamento della pagina. Di solito viene utilizzato l'oggetto XMLHttpRequest (XHR), ma a volte viene invece utilizzato un oggetto IFrame o un tag aggiunto dinamicamente.
  • Un formato per i dati inviati al browser. I formati comuni includono XML, HTML preformattato, testo normale e JavaScript Object Notation (JSON). Questi dati potrebbero essere creati dinamicamente da una qualche forma di scripting lato server.

Come puoi vedere, da un punto di vista puramente tecnologico, qui non c'è nulla di veramente nuovo. La maggior parte delle parti AJAX erano già presenti nel 1994 (1999 per l' XMLHttpRequestoggetto). La vera novità è stata quella di utilizzare insieme queste parti come ha fatto Google con GMail (2004) e Google Maps (2005). In realtà, entrambi i siti hanno contribuito notevolmente alla promozione di AJAX.

Un'immagine che vale più di mille parole, sotto un diagramma che illustra la comunicazione tra il client e il server remoto, nonché le differenze tra le applicazioni classiche e quelle alimentate da AJAX:

testo alternativo

Per la parte arancione, puoi fare tutto a mano (con l' XMLHttpRequestoggetto) oppure puoi usare famose librerie JavaScript come jQuery , Prototype , YUI , ecc. Per "AJAXify" il lato client della tua applicazione. Tali librerie mirano a nascondere la complessità dello sviluppo JavaScript (ad esempio la compatibilità cross-browser), ma potrebbero essere eccessive per una semplice funzionalità.

Lato server, possono essere d'aiuto anche alcuni framework (es. DWR o RAJAX se stai usando Java), ma tutto quello che devi fare è fondamentalmente esporre un servizio che restituisce solo le informazioni richieste per aggiornare parzialmente la pagina (inizialmente come XML / XHTML - la X in AJAX - ma oggigiorno spesso si preferisce JSON ).


17

L'essenza di AJAX è questa:

Le tue pagine possono navigare sul Web e aggiornare i propri contenuti mentre l'utente fa altre cose .

Cioè, il tuo javascript può inviare richieste GET e POST asincrone (di solito tramite un XMLHttpRequestoggetto), quindi utilizzare i risultati di tali richieste per modificare la sua pagina (tramite la manipolazione del Document Object Model ).


Qualche esempio a cui puoi pensare di fuori mano in cui posso vedere questo "aggiornamento da solo" in azione?
Daniel Springer

17

AJAX in genere implica l'invio di richieste HTTP dal client al server e l'elaborazione della risposta del server, senza ricaricare l'intera pagina. (In modo asincrono).

Javascript generalmente esegue l'invio e riceve la risposta dei dati dal server (tradizionalmente XML, spesso altri formati meno dettagliati come JSON)

Il Javascript può quindi aggiornare dinamicamente il DOM della pagina per aggiornare la visualizzazione dell'utente.

Quindi "Javascript asincrono e XML".

Ci sono altre opzioni per aggiornare la visualizzazione dell'utente senza ricaricare la pagina, cose come Flash e Applet, ma queste non sembrano buone soluzioni per il tuo caso. Sembra che Javascript sia la strada da percorrere. C'è un sacco di buon supporto per le librerie in giro, come jQuery usato su questo sito, quindi non è necessario scrivere molto Javascript da soli.


Mi piace questa risposta. @Verrtex tutto quello che devi sapere è su XMLHttpRequest.
enguerran

13

Ajax è più che ricaricare solo una parte della pagina. Ajax è l'acronimo di Asynchronous Javascript and Xml.

L'unica parte di Ajax di cui hai bisogno è l' oggetto XMLHttpRequest da javascript. Devi usarlo per caricare e ricaricare una piccola parte del tuo html come div o qualsiasi altro tag.

Leggi che esempio e sarete pro presto come si pensa!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

1
Nonostante il nome, AJAX non richiede XML, ma la X nella parola / acronimo AJAX sta per XML perché storicamente è il modo di comunicare tra server e client.
enguerran

5

AJAX è l'acronimo di Asynchronous Javascript e XML. AJAX supporta aggiornamenti parziali delle pagine senza dover inviare l'intera pagina al server.

Ci sono molte opzioni per AJAX. I due più notevoli (probabilmente) sono ASP.NET AJAX di Microsoft (ex Atlas) e jQuery.

ASP.NET AJAX è relativamente facile da configurare se si ha già familiarità con ASP.NET. jQuery è utile se conosci già javascript e consente un controllo molto granulare sull'interrogazione e l'aggiornamento della tua pagina.

HTH


2

Se sei interessato, IBM ha una serie di 10 (forse più) parti su Ajax: Mastering Ajax part 1

Sebbene abbia pochi anni ormai è una buona introduzione, (anche se hai appena letto la prima parte!)

Penso che l'intera serie dovrebbe essere elencata qui , anche se il sito è un po 'lento per me al momento ...

Sommario:

Ajax, che consiste in HTML, tecnologia JavaScript ™, DHTML e DOM, è un approccio eccezionale che ti aiuta a trasformare le goffe interfacce Web in applicazioni Ajax interattive. L'autore, un esperto di Ajax, dimostra come queste tecnologie lavorano insieme - da una panoramica a uno sguardo dettagliato - per rendere lo sviluppo Web estremamente efficiente una facile realtà. Svela anche i concetti centrali di Ajax, compreso l'oggetto XMLHttpRequest.


1

questo è ajax. non puoi usare ajax senza javascript. dovresti guardare esempi di jquery e prototipi per avere un'idea dell'uso.


Puoi fare AJAX con VBScript, secondo alcune fonti. Nessuna buona ragione per farlo, però. :-)
Nosredna

No, non puoi. Puoi fare AVAX con VBScript.
Stefan Kendall

6
Eh. Ho sentito che AJAX è JavaScript e XML asincrono. Tranne che non deve essere asincrono, non deve essere JavaScript e non deve essere XML.
Nosredna

0

Quello che stai cercando di fare è tecnicamente ajax. Ajax crea transazioni di frammenti xhtml per aggiornare le sezioni di una pagina. Javascript rende queste richieste di ricezione piacevoli e chiare.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.