Hvordan synkronisere Ajax samtaler

March 23

AJAX, som står for Asynchronous Javascript og XML, er en metode for å gjøre forespørsler fra serveren uten å laste en hel nettside. Det gjør at multitasking og rask gjenfinning av informasjon. Gjør samme type forespørsler synkront kan synes å omgå formålet, fordi du mister evnen til å multitaske og leseren forblir på vent til forespørselen er fullført. Men det kan være akkurat hva du vil gjøre, som når du ønsker å fullføre en transaksjon eller sørge for at en forespørsel er komplett før du utfører en annen.

Bruksanvisning

1 Lag en webside i en tekst editor som ikke gjør tekstformatering. I hodet kodene, skriver en åpning skriptmerket, en åpning HTML kommentar og åpningen av en Javascript-funksjon for å gjøre synkrone AJAX forespørsler. For eksempel inn:

<! -

funksjon syncCall () {

2 Initial en variabel for forespørselen objekt, datastrukturen som du må oppgi når du ringer andre AJAX funksjoner. Moderne nettlesere bruke "XMLHttpRequest" objekt, men sørg for at nettleseren støtter det før du oppretter objektet. Hvis det ikke er støttet, skape en "ActiveXObject." For eksempel inn:

Var XMLHTTP; // initial request-objekt variabel

if (window.XMLHttpRequest) {

XMLHTTP = new XMLHttpRequest (); // opprette objekt

} Else {

XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP"); // kode for gamle nettlesere

}

3 Send forespørsel til serveren ved hjelp av Javascript er "åpne" og "sende" funksjoner. Den første parameteren for den åpne funksjon er den type forespørsel, for eksempel, "FÅ" og "POST". Bruk POST hvis du trenger å sende data til serveren. Den andre parameteren er nettadressen til anmodningen-handler script, og den tredje parameteren er en boolsk verdi for å angi om forespørselen er asynkron eller ikke. For en synkron forespørsel, sette denne parameteren til false.

Hvis du gjør forespørselen ved POST-metoden, sett forespørsel header og sette sende funksjonens parameter til en streng som inneholder dataene du vil sende. Den bruker samme syntaks som brukes når du passerer variabel nettadresser, for eksempel "lastname = Smith & firstname = Tyler." For eksempel inn:

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

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

xmlhttp.send ( "name = Joe");

For GET-metoden, satt sende parameter til null. For eksempel inn:

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

xmlhttp.send (null);

4 Behandle dataene mottatt fra forespørselen. For inneværende eksempel sette inn data i en HTML-element som er angitt av en unik ID, ved hjelp av "response" -funksjonen. Lukk funksjon, HTML kommentar og skriptmerket:

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

}

</ Script>

5 Inkluder i nettsidens markup en Javascript-hendelseshåndterer som vil kalle den funksjonen du skrev. Legg markeringen hvor de returnerte dataene vil bli vist, og lagre filen. For eksempel inn:

<a href="#" target="_self" onClick="syncCall()"> Klikk her </a>

Dette skaper en tekst link, som kaller funksjonen når du klikker. Når svaret er mottatt, blir resultatet vises i div-tag merket "output".

6 Åpne en ny side i tekstredigeringsprogram, og lage en forespørsel-behandleren script. Skriptet bare trenger å vise utgang, slik som med PHP er "echo" funksjonen eller ASP er "skrive" -funksjonen. Hvis du sender data ved POST-metoden, hente data med "$ _POST" array. Lagre skriptet, og laste den opp til serveren din. For eksempel inn:

<? Php

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

$name = $_POST['name'];

} Else {

$name = "World";

}

echo "Hello" $ navn. ".!";

7 Åpne websiden i en nettleser, og utløse hendelsesbehandling. I den gitte eksempel som bare involverer å klikke på lenken. Resultatene av forespørselen skal vises der det er spesifisert.

Hint

Ethvert problem med serveren kan føre til at nettleseren til å henge, så ikke bruk synkrone samtaler med mindre nødvendig.