AJAX -funktioner tillåter webbsidor för att uppdatera HTML-innehåll utan att användaren behöver uppdatera sidan eller bläddra till en annan sida . Den HTML-kod för en sida kan ringa en JavaScript -funktion , vilket i sin tur kan ringa ett PHP-skript . Den PHP-skript kan hämta ytterligare data , ibland från en databas och formaterade i XML-koden , återvänder här till JavaScript -funktionen . Den JavaScript -koden kan sedan skriva dessa nya data i HTML , vilket gör nya uppgifter visas när användaren interagerar med webbsidan . Instruktioner
Skapa ett nytt HTML- dokument . Skriv följande kod i en tom fil i din textredigerare och ge filen en förlängning när du sparar den " html ". :
< Script type = " text /javascript " > funktionen processData ( ) { //hämta nya data } < /script > < /head >
Visst innehåll < /div > < input type = " button" value = " trycker mig " onclick = " processData ( ) " /> < /body> < /html >
När användaren klickar på knappen visas på denna sida , kommer webbläsaren anropa JavaScript-funktionen i huvudet delen av sidan .
2
Skapa ett XMLHttpRequest objekt . Lägg till följande kod i JavaScript-funktionen :
var XMLHTTP ; if ( window.XMLHttpRequest ) { XMLHTTP = new XMLHttpRequest ( ) ;} else { XMLHTTP = ny ActiveXObject ( " Microsoft.XMLHTTP " ) ; }
Detta gör att webbsidan för att hantera olika webbläsare .
3
Skicka din förfrågan om data till ett PHP-skript . Lägg till följande kod i JavaScript-funktionen , vilket lämnar utrymme för kod innan det :
Xmlhttp.open ( " GET " , " get_data.php " , true); xmlHTTP.send ( ) ;
Detta instruerar webbläsaren att begära ytterligare information från den angivna PHP-skript .
4
Skapa din PHP-skript . Öppna en ny fil i en textredigerare och spara den som " get_data.php " att matcha parameter till den sändningsmetod som du använt i din JavaScript -kod . Skriv in följande exempelkod : < ? ? Phpecho " Nya uppgifter " ; >
Detta är ett enkelt exempel för demonstration , men du kan lägga till PHP behandling du behöver , inklusive databasfrågor . Du kan även bygga din respons text i XML-koden om det passar din webbplats .
5
Hantera svar från din PHP-skript . I din JavaScript -funktion , innan linjen som du öppnar objektet XMLHttpRequest , lägg till följande kod :
xmlHTTP.onreadystatechange = function ( ) {if ( xmlHTTP.readyState == 4 && xmlHTTP.status == 200 ) { //hantera svarsdata } }
När JavaScript mottar ett svar från PHP-skript , kommer denna kod köras . Koden kontrollerar , att reaktionen är giltigt. Inuti denna villkorliga påstående , kan du lägga till kod för att skriva nya data till din sida HTML .
6
Uppdatera innehållet på din sida . I JavaScript svar villkorlig uppgift , lägg till följande kod : .
Document.getElementById ( " update " ) innerHTML = xmlHTTP.responseText ;
här koden identifierar div-element i sidan och sedan skriver svaret text från PHP-kod i det .
7
Spara dina filer och ladda upp dem till din server . Bläddra till sidan och klicka på knappen för att kontrollera att funktionen fungerar . Du bör se innehållet i div-element förändring .
