PHP Ajax-zelfstudie met voorbeeld

Wat is Ajax?

AJAX volledige vorm is Asynckroniek JavaScript & XML. Het is een technologie die de interacties tussen de server en de client vermindert. Dit gebeurt door slechts een deel van een webpagina bij te werken in plaats van de hele paginasyncroneuze interacties worden geïnitieerd door JavaScript. Het doel van AJAX is om kleine hoeveelheden gegevens uit te wisselen met de server zonder dat de pagina wordt vernieuwd.

JavaScript is een scripttaal aan de clientzijde. Het wordt aan de clientzijde uitgevoerd door de webbrowsers die JavaScript ondersteunen. JavaScript-code werkt alleen in browsers waarin JavaScript is ingeschakeld.

XML is de afkorting voor Extensible Markup Language. Het wordt gebruikt om berichten te coderen in zowel door mensen als machines leesbare formaten. Het lijkt op HTML, maar u kunt uw aangepaste tags maken. Voor meer details over XML, zie het artikel over XML

Waarom Ajax gebruiken?

  • Het maakt het mogelijk rijke interactieve webapplicaties te ontwikkelen, net als desktopapplicaties.
  • Validatie kan worden uitgevoerd terwijl de gebruiker een formulier invult zonder het in te dienen. Dit kan worden bereikt door automatisch aanvullen. De woorden die de gebruiker typt, worden ter verwerking naar de server gestuurd. De server reageert met trefwoorden die overeenkomen met wat de gebruiker heeft ingevoerd.
  • Het kan worden gebruikt om een ​​vervolgkeuzelijst in te vullen box afhankelijk van de waarde van een andere vervolgkeuzelijst box
  • Gegevens kunnen van de server worden opgehaald en slechts een bepaald deel van een pagina worden bijgewerkt zonder dat de hele pagina wordt geladen. Dit is erg handig voor webpagina-onderdelen die dingen laden zoals
  • Tweets
  • Commens
  • Gebruikers die de site bezoeken enz.

Hoe u een PHP Ajax-applicatie maakt

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

Onze applicatie zal een tekst bevatten box dat gebruikers de namen van het raamwerk zullen typen.

We zullen dan mvc AJAX gebruiken om naar een overeenkomst te zoeken en vervolgens de volledige naam van het raamwerk net onder het zoekformulier weergeven.

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 de JavaScript-functie showName uit telkens wanneer een sleutel in de tekst wordt getyptbox.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)” controleer de lengte van de string. Als deze 0 is, wordt de rest van het script niet uitgevoerd.
  • “if (window.XMLHttpRequest)…” Internet Explorer versies 5 en 6 gebruiken ActiveXObject voor AJAX-implementatie. Andere versies en browsers zoals Chrome, FireFox gebruik XMLHttpRequest. Deze code zorgt ervoor dat onze applicatie zowel in IE 5 & 6 als in andere hogere versies van IE en browsers werkt.
  • "xmlhttp.onreadystatechange=function..." controleert of de AJAX-interactie voltooid is en de status 200 is en werkt vervolgens de txtName-reeks bij met de geretourneerde resultaten.

Stap 4) Onze PHP Ajax-applicatie testen

Ervan uitgaande dat u het bestand index.php hebt opgeslagen, bladert u in phututs/ajax naar de URL http://localhost/phptuts/ajax/index.php

Onze PHP Ajax-applicatie testen

Typ de letter C in de tekst box Je krijgt het vervolgwing resultaten.

Onze PHP Ajax-applicatie testen

Het bovenstaande voorbeeld demonstreert het concept van AJAX en hoe het ons kan helpen rijke interactietoepassingen te creëren.

Samengevat

  • AJAX is de afkorting voor Asynckroniek JavaScript en XML
  • AJAX is een technologie die wordt gebruikt om rijke interactietoepassingen te creëren die de interacties tussen de client en de server verminderen door slechts delen van de webpagina bij te werken.
  • Internet Explorer versie 5 en 6 gebruiken ActiveXObject om AJAX-bewerkingen te implementeren.
  • Internet explorer versie 7 en hoger en browsers Chrome, Firefox, Opera en Safari gebruiken XMLHttpRequest.