[AJAX] XMLHttpRequest object en live search
Deze tutorial is bedoeld om AJAX op z'n eenvoudigst uit te leggen en zo snel mogelijk resultaat te boeken.
1. Inleiding
2. XMLHttpRequest object
3. Request functie maken
4. live search
1. Inleiding
AJAX is hot! Je hoort het de laatste tijd constant, AJAX hier, AJAX daar. Nu is de vraag 'wat is AJAX?'.
AJAX staat voor "Asynchronous JavaScript and XML". Dit gezegdzijnde zijn we niets verder. Dit mag je nu ook vergeten.
Het is een technologie die gebruik maakt van een bepaald object binnen javascript. Dit object bestaat al jaren maar wordt de laatste tijd meer en meer op 'amateuristisch' niveau gebruikt.
Het object laat je toe POST of GET data naar een andere pagina via javascript te verzenden. Ik ga in dit artikel enkel gebruikmaken van GET data, maar de syntaxis is dezelfde.
Nadat deze data is verzonden is het mogelijk de output op te vragen in 2 vormen, XML of blank text formaat.
Ik zal enkel de blank text formaat hier bespreken maar een leuk voorbeeld van XML formaat is bv een rss reader live uitlezen.
Het bekendste voorbeeld van een website waar gebruik wordt gemaakt van AJAX is gmail en news.google.com.
2. XMLHttpRequest object
Het object dat we hiervoor nodig hebben heet XMLHttpRequest (vanaf nu XHR). Met elke browser kunnen we dit object zo aanroepen behalve met IE.
Daarom moeten we dus eerst een functie maken die het juiste object ter beschikking stelt. Deze functie ziet er als volgt uit.
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}
|
Dit is een algemene functie en moet je gewoon kopiëren in elke applicatie waar je AJAX gebruikt. Hierdoor kan je gemakkelijk het XHR object aanmaken.
Uitleg is heel simpel.
Bestaat het XHR onder de naam "XMLHttpRequest" dan stuurt de functie dit object terug. Bestaat het onder de naam "ActiveXObject" dan sturen we dit object terug.
Anders geven we een error weer.
3. Request functie maken
Nadat we het object hebben aangemaakt is het tijd om data te leren verzenden naar een andere pagina.
Het principe is heel simpel: we maken een functie die wordt aangeroepen wanneer er iets gebeurd (er wordt op een button geklikt, er wordt over een tekstveld gegaan met de muis, ...).
De functie zal dan een pagina open en GET data doorzenden. De pagina zal deze data verwerken en de output wordt opgeslagen in een variabele.
Met deze variabele kunnen we heel veel doen: alerten, in een div laten weergeven, meer requests aanroepen, ...
Een voorbeeld functie ziet er als volgt uit.
/*
* het aanmaken van het object
*/
var http = createRequestObject();
/*
* de sendRequest functie: we maken een script aan en in de header wordt het argument meegegeven
* als de pagina 'klaar is' moet er een bepaalde functie uitgevoerd worden: 'handleResponseTest'
* vervolgens 'sluiten' we deze pagina
*/
function sendRequestTest(wat) {
http.open('get', 'script.php?iets='+wat);
http.onreadystatechange = handleResponseTest;
http.send(null);
}
/*
* de handleResponse functie: deze zal kijken of de pagina daadwerkelijk 'klaar is'
* als dit zo is, EN er is output, dan zal deze ge-alert worden
*/
function handleResponseTest() {
/*
* http.readyState heeft vijf verschillende mogelijke waarden: 0 = niet geset, 1 = aan het laden, 2 = geladen,
3 = actief, 4 = afgehandeld (de situatie die we willen)
* http.status heeft er velen, een bekender voorbeeld is 404 (page not found). 200 betekend dat de pagina 'OK' is
*/
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
alert(http.responseText);
}
}
}
|
De commentaar zegt alles eigenlijk. De tekst die wordt geoutput door de pagina wordt opgeslagen in http.responseText.
Een 'werkend' voorbeeld is hier wel op zijn plaats lijkt me.
4. live search
We gaan een 'live search' applicatie maken die er als volgt uitziet.
Een voorbeeld van wat we gaan maken vind je hier:
live search.
We beginnen met de HTML.
We maken gebruik van een 'input' element en een 'div' element. We plaatsen deze in een tabel en roepen bij het intypen van een teken de functie 'handleRequestSearch' aan.
<table width="100%">
<tr>
<td valign="top" width="301">
<input type="text" size="50" name="zoek" onkeyup="sendRequestSearch(this.value);" />
</td>
<td valign="top">
<div id="zoek_resultaten" style="border:1px solid #000000"></div>
</td>
</tr>
</table>
|
Vervolgens gaan we de 'request' functie schrijven. (de functie voor het XHR object is dezelfde als hiervoor)
Deze zal de ingevulde waarde verwerken en doorsturen naar een extern bestand 'search.php'.
function sendRequestSearch(iets) {
http.open('get', 'search.php?zoek='+iets);
http.onreadystatechange = handleResponseSearch;
http.send(null);
}
|
Voor we search.php gaan aanmaken ga ik nog even laten zien 'hoe' we de data die search.php terugstuurt laten tonen.
Dit gebeurt via de functie handleResponseSearch. Deze zal de 'div' vullen met de mogelijke resultaten.
function handleResponseSearch() {
if(http.readyState == 4 && http.status == 200){
if(http.responseText) {
document.getElementById("zoek_resultaten").innerHTML = http.responseText;
} else {
document.getElementById("zoek_resultaten").innerHTML = " ";
}
} else {
document.getElementById("zoek_resultaten").innerHTML = " ";
}
}
|
Nu zou ieder 'beetje php programmeur' verder kunnen maar om toch de 'niet zekeren' onder ons een duwtje in de rug te helpen volgt hieronder de code die de GET waarde zal verwerken.
<?php
/*
* Dit kan natuurlijk ook gewoon een database record zijn,
* maar om een snel 'werkend' voorbeeld te geven doe ik het maar even via een array
*/
$gegevens = array(
'test', 'test2', 'foo', 'bar', 't'
, 'help', 'hello', 'dit is fijn', 'ford',
'etc', 'enzovoort', '...', 'en zo zijn er veel woorden',
'dit is een lange tekst', 'lalalala', 'tralala', 'PHP',
'OOP', 'JavaScript', 'AJAX power!', 'w00t',
'ik ben koen', 'koen', 'speelmeijer', 'is',
'de', 'naam', 'Koen Speelmeijer is de naam', 'enzovoort'
, 'hehe');
if(isset($_GET['zoek']) && $_GET['zoek'] != "") {
foreach($gegevens as $v) {
if(strstr($v, $_GET['zoek'])) {
echo '<a href="http://www.sitemasters.be/tutorials/27/1/433/AJAX/AJAX_XMLHttpRequest_object_en_live_search#">'. $v .'</a><br />';
}
}
}
?>
|
AJAX kan natuurlijk samenwerken met welke andere Server Side Scripting taal dan ook (asp, asp.NET, jsp, ...).
Ik heb als voorbeeld php genomen omdat hiermee het snelst een voorbeeld was geschetst en omdat 95% van de leden hier toch enkel met PHP werken.
Ik hoop dat je iets aan deze tutorial hebt gehad. Door gebruik te maken van AJAX ben ik veel over javascript te weten gekomen.
Denk er wel aan dat je geen overdosis aan AJAX gaat gebruiken. Gebruik het wanneer het nodig is en niet omdat het een beetje cool lijkt.
Handige links
Dynamisch div en pagina instellen
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.36) 