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.