Slik bruker POST-metoden i AJAX

Slik bruker POST-metoden i AJAX


Når utviklerne inkluderer AJAX funksjoner i websider, dette gjør at brukeren kan se nye elementer av data fra serveren uten å måtte oppdatere siden. En AJAX-funksjonen bruker Javascript for å ringe en server side script, så å behandle resultatet av dette skriptet samtale når serveren skriptet returnerer den. Eventuelt kan Javascript-kode sende data til serveren script, som kan være nyttig hvis skriptet spørre en datakilde. AJAX kan bruke enten GET eller POST-metoden for å sende data til serveren.

Bruksanvisning

1 Lag din HTML-kode for å ringe AJAX-funksjonen. Følgende eksempelkode demonstrerer:
<Input type = "button" value = "få mer" onclick = "GetData ( 'innhold')" />
<Div id = "innhold"> Nye data her </ div>

Dette omfatter et element for å skrive nye data inn i, samt en knapp for å ringe AJAX behandling. Når brukeren klikker på knappen, vil Javascript-funksjonen er angitt utføre. Koden kan eventuelt fange opp informasjon fra brukerundersøkelser.

2 Implementere Javascript-funksjonen til å sette i gang AJAX behandling. Følgende eksempel funksjon disposisjon demonstrerer:
funksjon GetData (elemId) {
Var xmlHTTPObject;
if (window.XMLHttpRequest) {xmlHTTPObject = new XMLHttpRequest (); }
else {xmlHTTPObject = new ActiveXObject ( "Microsoft.XMLHTTP"); }
// Setup svar
xmlHTTPObject.open ( "POST", "? retrieve_data.php var = hallo", true);
xmlHTTPObject.send ();
}

Denne koden demonstrerer ringer side script-server, i dette tilfellet et PHP-skript, passerer det en vilkårlig variabel for demonstrasjon. Hvis koden fanger data fra brukeren, kan du inkludere det i stedet for "var = hallo" -delen. Den "setup svar" linjen er der koden vil spesifisere hva som skal skje når serveren svarer.

3 Lag din server side script. Funksjonen bruker et PHP-script som heter "retrieve_data.php", men du kan bruke en fil av ditt eget valg og endre Javascript for å gjenspeile det hvis du foretrekker det. Følgende eksempel PHP koden fungerer med prøven Javascript:
<? Php
$ Passed_var = $ _ POST [ 'Var'];
echo "<p>" $ bestått "</ p>"..;
?>

Dette eksemplet skriver rett og slett gått variabel i HTML markup for demonstrasjon. Din egen kode kan spørre en datakilde som en database på server side script og kan eventuelt formatere responsen tekst i XML markup.

4 Be Javascript for å håndtere responsen fra serveren. Legg til følgende kode inni "get_data" Javascript-funksjonen, før linjen åpner XMLHttpRequest objektet:
xmlHTTPObject.onreadystatechange = function () {
if (xmlHTTPObject.readyState == 4 && xmlHTTPObject.status == 200) {
document.getElementById (elemId) .innerHTML = xmlHTTPObject.responseText;
}}

Denne koden bruker parameter HTML element passert når kaller funksjonen for å identifisere elementet til å skrive svaret teksten inn. Du kan eventuelt gjennomføre ytterligere Javascript prosessering på responsen.

5 Lagre filene dine og laste dem opp til webserveren. Bla til siden og klikk på knappen for å teste den. Du skal se det nye innholdet skrevet til "div" element på siden. Avhengig av sammenhengen kan det være en liten forsinkelse. Du kan legge til flere behandlingstrinn til alle deler av koden, inkludert HTML, Javascript og PHP.

Hint

  • AJAX kan bruke ASP skript samt PHP.
  • Det er mange steder der AJAX kode kan gå galt, så sørg for at du tester sidene dine på riktig måte.