PHP Ajax Tutorial med eksempel

Hvad er Ajax?

AJAX fuld form er asynkron JavaScript & XML. Det er en teknologi, der reducerer interaktionen mellem serveren og klienten. Det gør det 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 sideopdatering.

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

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

Hvorfor bruge AJAX?

Det giver mulighed for at udvikle rige interaktive webapplikationer ligesom desktopapplikationer.
Validering kan udføres efterhånden som brugeren udfylder en formular uden at indsende den. Dette kan opnås ved hjælp af automatisk fuldførelse. De ord, som brugeren indtaster, sendes til serveren til behandling. Serveren svarer med søgeord, der matcher det, brugeren har indtastet.
Den kan bruges til at udfylde en dropdown-boks afhængigt af værdien af en anden dropdown-boks
Data kan hentes fra serveren og kun en bestemt del af en side opdateres uden at indlæse hele siden. Dette er meget nyttigt til websidedele, der indlæser ting som
Tweets
Commens
Brugere der besøger siden mv.

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, som brugerne vil indtaste navnene på rammen.

Vi vil derefter bruge mvc AJAX til at søge efter et match og derefter vise rammens 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 JavaScript-funktion showName hver gang en nøgle indtastes i tekstboksen. 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;

?>

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)" kontroller længden af strengen. Hvis det er 0, så udføres resten af scriptet ikke.
"if (window.XMLHttpRequest)..." Internet Explorer version 5 og 6 bruger ActiveXObject til AJAX-implementering. Andre versioner og browsere såsom Chrome, FireFox brug XMLHttpRequest. Denne kode vil sikre, at vores applikation fungerer i både IE 5 & 6 og andre høje versioner af IE og browsere.
"xmlhttp.onreadystatechange=function..." kontrollerer, om AJAX-interaktionen er fuldført, og status er 200, opdaterer derefter txtName-spændet med de returnerede resultater.

Trin 4) Test af vores PHP Ajax-applikation

Forudsat at du har gemt filen index.php I phututs/ajax, så browse til URL'en http://localhost/phptuts/ajax/index.php

Indtast bogstavet C i tekstboksen Du får følgende resultater.

Ovenstående eksempel demonstrerer konceptet med AJAX, og hvordan det kan hjælpe os med at skabe rige interaktionsapplikationer.

Resumé

AJAX er forkortelsen for Asynchronous JavaScript og XML
AJAX er en teknologi, der bruges til at skabe omfattende interaktionsapplikationer, der reducerer interaktionen mellem klienten og serveren ved kun at opdatere dele af websiden.
Internet Explorer version 5 og 6 bruger ActiveXObject til at implementere AJAX-operationer.
Internet Explorer version 7 og nyere og browsere Chrome, Firefox, Opera, og Safari bruger XMLHttpRequest.