Hvordan å gjøre AJAX med PHP og HTML

Hvordan å gjøre AJAX med PHP og HTML


AJAX funksjoner tillate websider for å oppdatere HTML-innhold uten at brukeren trenger å oppdatere siden eller bla til en annen side. HTML markup for en side kan kalle en Javascript-funksjon, som i sin tur kan kalle et PHP-skript. PHP-script kan hente flere data, noen ganger fra en database og formatert i XML markup, returnerer dette til Javascript-funksjonen. Javascript-koden kan deretter skrive disse nye dataene inn i HTML, slik at ny informasjon vises som brukeren kommuniserer med websiden.

Bruksanvisning

1 Opprett en ny HTML-dokument. Skriv inn følgende kode i en tom fil i en teksteditor og gi filen en ".html" forlengelse når du lagrer det:

<Html>
<Head>
<Script type = "text / javascript">
fungere processData () {
// Hente nye data
}
</ Script>
</ Head>
<Body>
<Div id = "update"> Noe innhold </ div>
<Input type = "button" value = "trykke meg" onclick = "processData ()" />
</ Body>
</ Html>

Når brukeren klikker på knappen som vises på denne siden, vil nettleseren kaller Javascript-funksjonen i hodet delen av siden.

2 Lag en XMLHttpRequest-objektet. Legg til følgende kode i Javascript-funksjonen:

Var XMLHTTP;
if (window.XMLHttpRequest) {XMLHTTP = new XMLHttpRequest (); }
else {XMLHTTP = new ActiveXObject ( "Microsoft.XMLHTTP"); }

Dette gjør at websiden til å håndtere forskjellige nettlesere.

3 Send en forespørsel om data til et PHP-skript. Legg til følgende kode i Javascript-funksjonen, slik plass for kode før det:

xmlHTTP.open ( "GET", "get_data.php", true);
xmlHTTP.send ();

Dette ber nettleseren for å be om ytterligere informasjon fra PHP skriptet oppgitt.

4 Lag din PHP-skript. Åpne en ny fil i en tekst editor og lagre det som "get_data.php" for å matche parameter til sende metoden du brukte i Javascript-koden. Skriv inn følgende eksempelkode:

<? Php
echo "Nye data";
?>

Dette er et enkelt eksempel for demonstrasjon, men du kan legge til PHP behandlingen du trenger, inkludert databasespørringer. Du kan også bygge din reaksjon tekst i XML markup hvis dette passer ditt nettsted.

5 Håndtere responsen fra din PHP-skript. I Javascript-funksjonen, før linjen der du åpner XMLHttpRequest objektet, legger du til følgende kode:

xmlHTTP.onreadystatechange = function () {
if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
// Håndtere responsen data
}}

Når Java mottar et svar fra PHP-skript, vil denne koden kjøres. Koden sjekker at responsen er gyldig. Inne i denne betinget utsagn, kan du legge kode for å skrive de nye dataene inn i siden HTML.

6 Oppdatere innholdet på siden din. I Javascript respons betinget utsagn, legge til følgende kode:

document.getElementById ( "oppdater") innerhtml = xmlHTTP.responseText.;

Denne koden identifiserer div element på siden, og deretter skriver responsen teksten fra PHP-koden inn i den.

7 Lagre filene dine og laste dem opp til serveren din. Bla til siden og klikk på knappen for å kontrollere at funksjonen fungerer. Du bør se innholdet i div-elementet endringen.

Hint

  • Du kan sende data fra Javascript-funksjonen til PHP script samt motta data.
  • AJAX-skript noen ganger får problemer med nettleseren caching. For å omgå dette, kan du legge et tilfeldig tall variabel til Javascript-kode på slutten av PHP-script URL-strengen.