PHP Ajax-zelfstudie met voorbeeld

Wat is Ajax?

AJAX staat voor Asynchroon JavaScript & XML. Het is een technologie die de interactie tussen de server en de client vermindert. Dit doet het door slechts een deel van een webpagina bij te werken in plaats van de hele pagina. De asynchrone interacties worden geïnitieerd door JavaScript. Het doel van AJAX is om kleine hoeveelheden data met de server uit te wisselen zonder de pagina te vernieuwen.

JavaScript is een client-side scripttaal. Deze wordt aan de clientzijde uitgevoerd door webbrowsers die ondersteunen. JavaScript. JavaScriptcode werkt alleen in browsers die JavaScript ingeschakeld.

XML XML is de afkorting voor Extensible Markup Language. Het wordt gebruikt om berichten te coderen in zowel voor mensen als machines leesbare formaten. Het is vergelijkbaar met HTML, maar stelt je in staat om je eigen aangepaste tags te creëren. Voor meer informatie over XML, zie het artikel over XML.

Waarom Ajax gebruiken?

• Het maakt ontwikkeling mogelijkping Rijke, interactieve webapplicaties, net als desktopapplicaties.
• Validatie kan worden uitgevoerd terwijl de gebruiker een formulier invult, zonder het te verzenden. Dit kan worden bereikt met behulp van automatische aanvulling. De woorden die de gebruiker typt, worden naar de server gestuurd voor verwerking, waarna de server trefwoorden terugstuurt die overeenkomen met wat de gebruiker heeft ingevoerd.
• Het kan worden gebruikt om een ​​keuzelijst te vullen op basis van de waarde van een andere keuzelijst.
• Gegevens kunnen van de server worden opgehaald en slechts een bepaald deel van een pagina kan worden bijgewerkt zonder de hele pagina opnieuw te laden. Dit is erg handig voor webpaginaonderdelen die bijvoorbeeld de volgende elementen laden:
  • Tweets
  • Heb je vragen? Stel ze hier.
  • Gebruikers die de site bezoeken, en vergelijkbare live data.

Hoe maak je een PHP Ajax-applicatie?

We zullen een eenvoudige applicatie maken waarmee gebruikers naar populaire PHP MVC-frameworks kunnen zoeken.

Onze applicatie zal een tekstvak bevatten waarin gebruikers de namen van de frameworks kunnen invoeren.

Vervolgens gebruiken we AJAX om naar een overeenkomst te zoeken en tonen we de volledige naam van het framework direct onder het zoekformulier.

Stap 1) De indexpagina maken

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>

HIER,

• “onkeyup=”showName(this.value)”” voert het JavaDe scriptfunctie showName wordt uitgevoerd telkens wanneer een toets in het tekstvak wordt ingevoerd. Deze functie wordt automatisch aanvullen genoemd.

Stap 2) De frameworkspagina maken

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;

?>

Stap 3) Het JS-script maken

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();

}

HIER,

• “if (str.length == 0)” controleert de lengte van de tekenreeks. Als deze 0 is, wordt de rest van het script niet uitgevoerd.
• “if (window.XMLHttpRequest)…” Internet Explorer versies 5 en 6 gebruiken ActiveXObject voor de AJAX-implementatie. Andere versies en browsers zoals Chrome en Firefox Gebruik XMLHttpRequest. Deze code zorgt ervoor dat onze applicatie werkt in zowel IE 5 & 6 als moderne browsers.
• “xmlhttp.onreadystatechange=function…” controleert of de AJAX-interactie is voltooid en de status 200 is, en werkt vervolgens de txtName-span bij met de geretourneerde resultaten.

Stap 4) Onze PHP Ajax-applicatie testen

Als je het bestand index.php hebt opgeslagen in phptuts/ajax, ga dan naar de map index.php. URL http://localhost/phptuts/ajax/index.php

Typ de letter C in het tekstvak. Je krijgt dan de volgende resultaten.

Het bovenstaande voorbeeld illustreert het concept van AJAX en hoe het ons kan helpen bij het creëren van rijke, interactieve applicaties.

Moderne AJAX met de Fetch API

Het bovenstaande XMLHttpRequest-object werkt nog steeds, maar de ActiveXObject-tak ervan voor oudere versies van Internet Explorer is niet langer nodig. Moderne browsers bieden de op promises gebaseerde Fetch API, die dezelfde aanvraag met veel minder code uitvoert.

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;
        });
}

Deze versie doet hetzelfde: de ingevoerde tekst wordt naar frameworks.php gestuurd en het antwoord wordt in de span txtName geplaatst. Ook wordt encodeURIComponent gebruikt om de invoer veilig te escapen, en de promise-keten is eenvoudig uit te breiden met foutafhandeling via een catch-blok.

Veelgestelde vragen