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.
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.
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
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.
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
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; ?>
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(); }
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.