PHP Ajax handledning med exempel

Vad är Ajax?

AJAX står för asynkron JavaScript & XML. Det är en teknik som minskar interaktionerna mellan servern och klienten. Den gör detta genom att bara uppdatera en del av en webbsida istället för hela sidan. De asynkrona interaktionerna initieras av JavaSkript. Syftet med AJAX är att utbyta små mängder data med servern utan att sidan behöver uppdateras.

JavaScript är ett skriptspråk på klientsidan. Det körs på klientsidan av webbläsare som stöder JavaManus. JavaSkriptkod fungerar bara i webbläsare som har JavaSkript aktiverat.

XML är förkortningen för Extensible Markup Language. Det används för att koda meddelanden i både mänskliga och maskinläsbara format. Det är som HTML men låter dig skapa dina egna anpassade taggar. För mer information om XML, se artikeln om XML.

Varför använda AJAX?

• Det tillåter utvecklingping rika, interaktiva webbapplikationer precis som skrivbordsapplikationer.
• Validering kan utföras när användaren fyller i ett formulär utan att skicka in det. Detta kan uppnås med hjälp av automatisk ifyllning. Orden som användaren skriver in skickas till servern för bearbetning, och servern svarar med nyckelord som matchar det som användaren angav.
• Den kan användas för att fylla i en rullgardinsmeny beroende på värdet i en annan rullgardinsmeny.
• Data kan hämtas från servern och endast en viss del av en sida uppdateras utan att hela sidan laddas. Detta är mycket användbart för webbsidedelar som laddar saker som:
  • Tweets
  • Kommentarer
  • Användare som besöker webbplatsen och liknande livedata.

Hur man skapar en PHP Ajax-applikation

Vi kommer att skapa en enkel applikation som låter användare söka efter populära PHP MVC-ramverk.

Vår applikation kommer att ha en textruta där användare skriver in namnen på ramverken.

Vi använder sedan AJAX för att söka efter en matchning och visar sedan ramverkets fullständiga namn precis under sökformuläret.

Steg 1) Skapa indexsidan

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>

HÄR,

• "onkeyup="showName(this.value)"" kör JavaSkriptfunktionen showName varje gång en tangent skrivs i textrutan. Den här funktionen kallas autokomplettering.

Steg 2) Skapa ramverkssidan

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;

?>

Steg 3) Skapa 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();

}

HÄR,

• "if (str.length == 0)" kontrollerar strängens längd. Om den är 0, körs inte resten av skriptet.
• ”if (window.XMLHttpRequest)…” Internet Explorer version 5 och 6 använder ActiveXObject för AJAX-implementeringen. Andra versioner och webbläsare som Chrome och Firefox använd XMLHttpRequest. Denna kod säkerställer att vår applikation fungerar i både IE 5 och 6 och moderna webbläsare.
• ”xmlhttp.onreadystatechange=function…” kontrollerar om AJAX-interaktionen är klar och statusen är 200, och uppdaterar sedan txtName-spannet med de returnerade resultaten.

Steg 4) Testar vår PHP Ajax-applikation

Om du har sparat filen index.php i phptuts/ajax, bläddra till URL http://localhost/phptuts/ajax/index.php

Skriv bokstaven C i textrutan. Du får följande resultat.

Exemplet ovan visar konceptet AJAX och hur det kan hjälpa oss att skapa rika, interaktiva applikationer.

Modern AJAX med Fetch API

XMLHttpRequest-objektet ovan fungerar fortfarande, men dess ActiveXObject-gren för gamla Internet Explorer behövs inte längre. Moderna webbläsare tillhandahåller det promise-baserade Fetch API:et, vilket gör samma begäran med betydligt mindre kod.

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

Den här versionen gör samma jobb: den skickar den inskrivna texten till frameworks.php och placerar svaret i txtName-spannet. Den använder också encodeURIComponent för att säkert undvika inmatningen, och dess löfteskedja är enkel att utöka med felhantering med hjälp av ett catch-block.

Vanliga frågor