PHP Ajax-opplæring med eksempel

Hva er Ajax?

AJAX står for asynkron JavaScript & XML. Det er en teknologi som reduserer interaksjonene mellom serveren og klienten. Den gjør dette ved å bare oppdatere en del av en nettside i stedet for hele siden. De asynkrone interaksjonene initieres av JavaSkript. Hensikten med AJAX er å utveksle små mengder data med serveren uten at siden må oppdateres.

JavaScript er et skriptspråk på klientsiden. Det kjøres på klientsiden av nettlesere som støtter JavaManus. JavaSkriptkode fungerer bare i nettlesere som har JavaSkript aktivert.

XML er akronymet for Extensible Markup Language. Det brukes til å kode meldinger i både menneskelig og maskinlesbare formater. Det er som HTML, men lar deg lage dine egne tilpassede tagger. For mer informasjon om XML, se artikkelen om XML.

Hvorfor bruke AJAX?

• Det tillater utviklingping rike, interaktive webapplikasjoner akkurat som skrivebordsapplikasjoner.
• Validering kan utføres når brukeren fyller ut et skjema uten å sende det inn. Dette kan oppnås ved hjelp av automatisk fullføring. Ordene som brukeren skriver inn sendes til serveren for behandling, og serveren svarer med nøkkelord som samsvarer med det brukeren skrev inn.
• Den kan brukes til å fylle ut en rullegardinboks avhengig av verdien til en annen rullegardinboks.
• Data kan hentes fra serveren, og bare en viss del av en side kan oppdateres uten å laste inn hele siden. Dette er veldig nyttig for deler av nettsider som laster inn ting som:
  • Tweets
  • Kommentar
  • Brukere som besøker nettstedet, og lignende livedata.

Slik lager du en PHP Ajax-applikasjon

Vi vil lage en enkel applikasjon som lar brukere søke etter populære PHP MVC-rammeverk.

Applikasjonen vår vil ha en tekstboks der brukerne skriver inn navnene på rammeverkene.

Deretter bruker vi AJAX til å søke etter et treff, og viser deretter rammeverkets fulle navn rett under søkeskjemaet.

Trinn 1) Opprette indekssiden

index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

<script type="text/javascript" src="auto_complete.js"></script>

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

HER,

• "onkeyup="showName(this.value)"" utfører JavaSkriptfunksjonen showName hver gang en nøkkel skrives inn i tekstboksen. Denne funksjonen kalles autofullføring.

Trinn 2) Opprette rammeverksiden

frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>

Trinn 3) Opprette JS-skriptet

auto_complete.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

HER,

• «if (str.length == 0)» sjekker lengden på strengen. Hvis den er 0, blir ikke resten av skriptet utført.
• «hvis (window.XMLHttpRequest)…» Internet Explorer versjon 5 og 6 bruker ActiveXObject for AJAX-implementeringen. Andre versjoner og nettlesere som Chrome og Firefox bruk XMLHttpRequest. Denne koden sikrer at applikasjonen vår fungerer i både IE 5 og 6 og moderne nettlesere.
• «xmlhttp.onreadystatechange=function…» sjekker om AJAX-interaksjonen er fullført og statusen er 200, og oppdaterer deretter txtName-spennet med de returnerte resultatene.

Trinn 4) Tester vår PHP Ajax-applikasjon

Forutsatt at du har lagret filen index.php i phptuts/ajax, bla til URL http://localhost/phptuts/ajax/index.php

Skriv bokstaven C i tekstboksen. Du vil få følgende resultater.

Eksemplet ovenfor demonstrerer konseptet AJAX og hvordan det kan hjelpe oss med å lage rike, interaktive applikasjoner.

Moderne AJAX med Fetch API

XMLHttpRequest-objektet ovenfor fungerer fortsatt, men ActiveXObject-grenen for den gamle Internet Explorer er ikke lenger nødvendig. Moderne nettlesere tilbyr det promise-baserte Fetch API-et, som foretar den samme forespørselen med mye mindre kode.

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

Denne versjonen gjør den samme jobben: den sender den skrevne teksten til frameworks.php og legger svaret inn i txtName-spennet. Den bruker også encodeURIComponent for å unnslippe input på en sikker måte, og løftekjeden er enkel å utvide med feilhåndtering ved hjelp av en catch-blokk.

Spørsmål og svar