PHP Ajax Tutorial med eksempel

Hvad er Ajax?

AJAX fuld form er Asyncærefuld 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 sidensynchøflige 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. Den udføres på klientsiden af ​​de webbrowsere, der understøtter JavaScript. 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 mennesker og maskiner readable formater. Det er ligesom HTML, men giver dig mulighed for at oprette dine brugerdefinerede tags. For mere details 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.
  • Det kan bruges til at udfylde en dropdown box afhængig af værdien af ​​en anden dropdown box
  • 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 ansøgning vil have en tekst box at 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-funktionen showName hver gang en nøgle indtastes i tekstenbox.Denne funktion kaldes automatisk fuldfø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

Test af vores PHP Ajax-applikation

Skriv bogstavet C i teksten box Du får folloenwing resultater.

Test af vores PHP Ajax-applikation

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

Resumé

  • AJAX er forkortelsen for Asyncærefuld 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.