PHP Ajax Tutorial med eksempel

Af: Fiona Brown Fiona Brown
Hours Opdateret

⚡ Smart opsummering

Ajax i PHP lader en webside udveksle små mængder data med serveren og opdaterer en del af siden uden en fuldstændig genindlæsning. Denne gennemgang opbygger en live framework-søgning, der forklarer den klassiske XMLHttpRequest-tilgang og det moderne Fetch API-alternativ.

  • 🔄 Hvad Ajax er: Ajax, Asynkron JavaScript og XML opdaterer en del af en side ved at udveksle data med serveren uden en fuldstændig opdatering.
  • ⚡ Hvorfor bruge det: Ajax understøtter omfattende, desktop-lignende funktioner såsom autofuldførelse, live validering og afhængige dropdowns.
  • 🖥️ Klient og server: JavaScriptet kører i browseren og kalder et PHP-script, som kun returnerer de data, der er nødvendige for at opdatere siden.
  • 🔍 Livesøgning: En onkeyup-handler sender hvert tastetryk til et PHP-script, der returnerer matchende framework-navne med det samme.
  • 📜 XMLHttp-anmodning: Den klassiske tilgang opretter et XMLHttpRequest-objekt og læser responseText, når anmodningen er fuldført.
  • 🆕 Hent API: Moderne kode erstatter XMLHttpRequest med den promise-baserede fetch-funktion for at opnå renere og mere læsbare anmodninger.
  • 🤖 AI Assist: AI-værktøjer kan konvertere gammel XMLHttpRequest-kode til fetch- eller axios-koder og hjælpe med at fejlfinde fejlende Ajax-anmodninger.
Læs mere

PHP Ajax

Hvad er Ajax?

AJAX står for asynkron JavaScript & XML. Det er en teknologi, der reducerer interaktionerne mellem server og klient. Den gør dette ved kun at opdatere en del af en webside i stedet for hele siden. De asynkrone interaktioner initieres af JavaScript. Formålet med AJAX er at udveksle små mængder data med serveren uden at siden skal opdateres.

JavaScript er et klientsideskriptsprog. Det udføres på klientsiden af ​​webbrowsere, der understøtter JavaManuskript. JavaScript-kode virker kun i browsere, der har JavaScript aktiveret.

XML er akronymet for Extensible Markup Language. Det bruges til at kode beskeder i både menneske- og maskinlæsbare formater. Det er ligesom HTML, men giver dig mulighed for at oprette dine egne brugerdefinerede tags. For flere detaljer om XML, se artiklen om XML.

Hvorfor bruge AJAX?

  • Det tillader udviklingping omfattende, interaktive webapplikationer ligesom desktopapplikationer.
  • Validering kan udføres, når brugeren udfylder en formular uden at indsende den. Dette kan opnås ved hjælp af automatisk udfyldelse. De ord, som brugeren indtaster, sendes til serveren til behandling, og serveren svarer med nøgleord, der matcher det, brugeren har indtastet.
  • Den kan bruges til at udfylde en rullemenu afhængigt af værdien af ​​en anden rullemenu.
  • Data kan hentes fra serveren, og kun en bestemt del af en side kan opdateres uden at indlæse hele siden. Dette er meget nyttigt for websidedele, der indlæser ting som:
    • Tweets
    • Kommentarer
    • Brugere, der besøger webstedet, og lignende livedata.

Sådan opretter du en PHP Ajax-applikation

Vi vil skabe en simpel applikation, der giver brugerne mulighed for at søge efter populære PHP MVC-rammer.

Vores applikation vil have en tekstboks, hvor brugerne skriver navnene på frameworksene.

Vi bruger derefter AJAX til at søge efter et match og viser derefter frameworkets fulde navn lige under søgeformularen.

Trin 1) Oprettelse af 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)"" udfører JavaScriptfunktionen showName hver gang en tast indtastes i tekstfeltet. Denne funktion kaldes autofuldførelse.

Trin 2) Oprettelse af frameworks-siden

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;

?>

RELATEREDE ARTIKLER

Trin 3) Oprettelse af JS-scriptet

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)" kontrollerer strengens længde. Hvis den er 0, udføres resten af ​​scriptet ikke.
  • "if (window.XMLHttpRequest)..." Internet Explorer version 5 og 6 bruger ActiveXObject til AJAX-implementeringen. Andre versioner og browsere som Chrome og Firefox Brug XMLHttpRequest. Denne kode sikrer, at vores applikation fungerer i både IE 5 & 6 og moderne browsere.
  • "xmlhttp.onreadystatechange=function…" kontrollerer, om AJAX-interaktionen er fuldført, og om status er 200, og opdaterer derefter txtName-span'et med de returnerede resultater.

Trin 4) Test af vores PHP Ajax-applikation

Hvis du har gemt filen index.php i phptuts/ajax, skal du gå til URL http://localhost/phptuts/ajax/index.php

Test af vores PHP Ajax-applikation

Skriv bogstavet C i tekstfeltet. Du får følgende resultater.

Test af vores PHP Ajax-applikation

Ovenstående eksempel demonstrerer konceptet bag AJAX, og hvordan det kan hjælpe os med at skabe omfattende, interaktive applikationer.

Moderne AJAX med Fetch API'en

XMLHttpRequest-objektet ovenfor fungerer stadig, men dets ActiveXObject-gren til den gamle Internet Explorer er ikke længere nødvendig. Moderne browsere leverer den promise-baserede Fetch API, som foretager den samme anmodning med langt 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 version gør det samme: den sender den indtastede tekst til frameworks.php og placerer svaret i txtName-span'et. Den bruger også encodeURIComponent til sikkert at undslippe inputtet, og dens promise chain er nem at udvide med fejlhåndtering ved hjælp af en catch-blok.

Ofte Stillede Spørgsmål

En synkron anmodning blokerer browseren, indtil serveren svarer, hvilket fryser siden. En asynkron anmodning kører i baggrunden, så siden forbliver responsiv og opdateres, når dataene ankommer. Ajax bruger den asynkrone model.

Med `fetch` skal du sende en anden argumentindstillingsmetode til POST og en body, og derefter læse $_POST i PHP. Med `XMLHttpRequest` skal du kalde `open('POST', url`, indstille `Content-Type`-headeren og sende de kodede data.

CORS, Cross-Origin Resource Sharing, blokerer browserforespørgsler til et andet domæne, medmindre den server sender den korrekte Access-Control-Allow-Origin-header. Tilføj headeren på PHP-siden, eller kald en same-origin-header. URL at ordne det.

Ja. Indsæt XMLHttpRequest-koden, så kan AI omskrive den ved hjælp af den promise-baserede fetch API eller axios, tilføje fejlhåndtering og beholde den samme adfærd. Test resultatet, da svarhåndteringen er en smule anderledes.

Ja. Del anmodningskoden og browserkonsollen eller netværksfejlen, så kan AI finde en forkert fejl. URL, en CORS-blok, en manglende parameter eller en serverfejl, og foreslå derefter den løsning, du kan prøve.

Opsummer dette indlæg med: