Come sincronizzare le chiamate Ajax

May 6

Come sincronizzare le chiamate Ajax


AJAX, acronimo di Asynchronous JavaScript and XML, è un metodo di fare richieste da un server senza ricaricare l'intera pagina web. Permette il multitasking e il rapido reperimento delle informazioni. Facendo lo stesso tipo di richieste in modo sincrono può sembrare per sconfiggere lo scopo, perché si perde la capacità di multitasking e il browser resta in attesa fino a quando la richiesta è completa. Tuttavia, questo può essere esattamente quello che si vuole fare, come quando si vuole finalizzare una transazione o garantire che una richiesta è stata completata prima di eseguire un'altra.

istruzione

1 Creare una pagina web in un editor di testo che non fa la formattazione del testo. All'interno dei tag head, digitare un tag script di apertura, un commento HTML di apertura e l'apertura di una funzione JavaScript per fare richieste AJAX sincrone. Ad esempio, digitare:

<Script language = tipo "javascript" = "text / javascript">

<! -

Funzione syncCall () {

2 Inizializzare una variabile per l'oggetto della richiesta, la struttura dei dati che è necessario specificare quando si chiama altre funzioni AJAX. I browser moderni utilizzano l'oggetto "XMLHttpRequest", ma fare in modo che il browser supporta prima di creare l'oggetto. Se non è supportato, creare un "ActiveXObject." Ad esempio, digitare:

var XMLHTTP; // inizializzare variabile di richiesta-oggetto

if (window.XMLHttpRequest) {

XMLHTTP = new XMLHttpRequest (); // creare l'oggetto

} altro {

XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP"); // codice per vecchi browser

}

3 Invia la richiesta al server utilizzando "aperti" e "invia" le funzioni di JavaScript. Il primo parametro per la funzione aperta è il tipo di richiesta, per esempio, "GET" o "POST". Utilizzare POST se è necessario inviare i dati al server. Il secondo parametro è l'URL dello script di richiesta del gestore, e il terzo parametro è un valore booleano per specificare se la richiesta è asincrona o meno. Per una richiesta sincrona, impostare questo parametro su false.

Se stai facendo la richiesta con il metodo POST, impostare l'intestazione della richiesta e impostare il parametro della funzione di invio di una stringa contenente i dati che si desidera inviare. Esso utilizza la stessa sintassi utilizzata quando si passa attraverso variabile URL, come "cognome = Smith & firstname = Tyler." Ad esempio, digitare:

xmlhttp.open ( "POST", "http://www.yourdomain.com/output.php", false);

xmlhttp.setRequestHeader ( "Content-Type", "application / x-www-form-urlencoded");

xmlhttp.send ( "name = Joe");

Per il metodo GET, impostare il parametro di invio su null. Ad esempio, digitare:

xmlhttp.open ( "GET", "http://www.yourdomain.com/output.php", false);

xmlhttp.send (null);

4 Elaborare i dati ricevuti dalla richiesta. Per l'esempio attuale, inserire i dati in un elemento HTML specificato da un ID univoco, tramite la funzione "responseText". Chiudere la funzione, il commento HTML e il tag script:

document.getElementById ( "output") innerHTML = xmlhttp.responseText.;

}

->

</ Script>

5 Includere nel markup della tua pagina web un gestore di eventi JavaScript che chiamerà la funzione che hai scritto. Aggiungere il markup in cui verranno visualizzati i dati restituiti, e salvare il file. Ad esempio, digitare:

<a href="#" target="_self" onClick="syncCall()"> Clicca qui </a>

<Div id = "uscita"> </ div>

Questo crea un link di testo, che chiama la funzione quando si fa clic. Quando si riceve la risposta, l'output viene visualizzato all'interno dei tag div etichettati "uscita".

6 Aprire una nuova pagina nell'editor di testo, e creare uno script di richiesta-gestore. Lo script deve semplicemente per visualizzare l'output, come ad esempio con la funzione di PHP "echo" o la funzione "scrittura" di ASP. Se si invia i dati mediante il metodo POST, recuperare i dati con l'array "$ _POST". Salvare lo script, e caricarlo sul server. Ad esempio, digitare:

<? Php

if (isset ($ _ POST [ 'name'])) {

$name = $_POST['name'];

} altro {

$name = "World";

}

echo "Ciao" $ nome. ".";

?>

7 Apri la tua pagina web in un browser, e innescare il gestore di eventi. Nell'esempio riportato, che coinvolge semplicemente cliccando sul link. I risultati della richiesta devono apparire dove specificato.

Consigli e avvertenze

  • Qualsiasi problema con il server può causare il browser per appendere, in modo da non utilizzare le chiamate sincrone se non strettamente necessario.