Arduino

PHP Ajax met voorbeeld

Wat is Ajax?

AJAX is het acroniem voor Asynchronous 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.

JavaScript

is een client-side scriptingtaal. Het wordt uitgevoerd aan de clientzijde door de webbrowsers die JavaScript.JavaScript-code ondersteunen, werkt alleen in browsers waarvoor JavaScript is ingeschakeld.

XML

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

Waarom AJAX gebruiken?

Hoe een PHP Ajax applicatie te maken

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

Onze applicatie zal een tekstvak bevatten dat gebruikers in de namen van het framework zullen typen.

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

Stap 1

De indexpagina maken : index.php

<Html>
    <Head>
        <title>PHP MVC Frameworks - Zoekmachine </title>
        <script type="text/javascript" src="/auto_complete.js"> </script>
    </Head>
    <Body>
        <h2>PHP MVC frameworks - Search Engine</h2>
        <p><b>Typ de eerste letter van het 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>

Deze functie wordt automatisch aanvullen genoemd

Stap 2

De raamwerkpagina 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 == "")? 'geen match gevonden': $match;
?>

Stap 3

Het JS script maken : auto_complete.js

function showName (str) {
    if (str.length == 0) { //exit-functie als er niets in het tekstvak is getypt
        document.getElementById("txtName").innerHTML=""; // vorige resultaten wissen
            return;
    }
    if (window.XMLHttpRequest) { // code voor IE7 +, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { // code voor 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();
}

Stap 4

Testen van onze PHP Ajax-applicatie

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

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

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

Samenvatting

Vorige

Bronvermelding