PHP Ajax-zelfstudie met voorbeeld

Wat is Ajax?

AJAX volledige vorm is asynchroon 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 pagina. De asynchrone interacties worden geïnitieerd door JavaScript. Het doel van AJAX is om kleine hoeveelheden gegevens met de server uit te wisselen zonder dat de pagina wordt vernieuwd.

JavaScript is een scripttaal aan de clientzijde. Het wordt aan de clientzijde uitgevoerd door de webbrowsers die dit ondersteunen JavaScript.JavaScriptcode werkt alleen in browsers die JavaScript 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 stelt u in staat om uw eigen tags te maken. Voor meer informatie over XML, zie het artikel op 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 dropdown-box te vullen, afhankelijk van de waarde van een andere dropdown-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 tekstvak hebben waarin gebruikers de namen van het framework kunnen 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 het JavaScriptfunctie showName telkens wanneer een toets in het tekstvak wordt getypt. 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

Typ de letter C in het tekstvak. U krijgt dan de volgende resultaten.

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

Samenvatting

AJAX is de afkorting voor Asynchronous 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, Operaen Safari gebruiken XMLHttpRequest.

Je houdt misschien van: