home  :: Home/Artikels/Webdesign enzo/Webdevelopment en scripting/Ajax POST en Ajax GET request

Ajax POST en Ajax GET request


door: JorisO 
March 18 2007
ajax

Hieronder een voorbeeld javascriptje van een POST en een GET request dmv een XMLHttpRequest. Een POST request heb je in je Ajax code in ieder geval nodig wanneer je querystring of verzonden data langer wordt dan 2083 karakters gezien MS internet explorer dit niet aankan: zie hier voor meer info - support.microsoft.com

Voorbeeld Javascript functies voor POST en GET requests:

<script language="javascript">

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
 
function GETRequest(query) {
    createXMLHttpRequest();
          
    var queryString = "whatever.php?" + query;
    
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}

function POSTRequest(query) {
    createXMLHttpRequest();
    
    var url = "whatever.php";
   
    xmlHttp.open("POST", url, true);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    
    xmlHttp.send(query);
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults();
        }
    }
}

function parseResults() {
     alert(xmlHttp.responseText);
    // document.getElementbyId('whatever').innerHTML = xmlHttp.responseText;
}

</script>

Voorbeeld PHP script dat verzonden waardes opvangt/retourneert:

<?php
foreach ($_REQUEST as $variablename => $value){
echo $variablename.' = '.$value;
echo "\n <br>";
}
?>

Naarmate de webtechnologieen die aangeduid worden met de term Ajax in populariteit groeien, lijkt de betekenis deze verzamelterm ook steeds veelomvattender te worden. Veel javascript/html/css/ combinaties die vroeger onder de noemer DHTML werden gevat, en ook zo'n beetje elke vorm van asynchroon data opvangen van de http server wordt tegenwoordig met het buzz-woord 'Ajax' aangeduid. 


Traditioneel staat Ajax als afkorting echter voor Asynchronous JavaScript and XML. Waarschijnlijk de meest interessante uitvinding van Microsoft sinds MSDOS was de 'XMLHttpRequest' (geintroduceerd met Office 2000). D.m.v. het XMLHttpRequest object (javascript) kan de weppagina/applicatie zonder de pagina te verversen (asynchroon) data (XML) uitwisselen met de webserver. Gezien de data in den beginne meestal in XML vorm werd uitgewisseld heet Ajax nu niet Aja maar Ajax. Maar het XMLHttpRequest request kan evengoed worden gebruikt om HTML, plain text of bijv. JSON uit te wisselen.



Commentaar van bezoekers:
van: Wouter
03:27:53, 13th-Apr-07
Mja ik weet dat dit allemaal mooi werkt maar ik zit met een keivervelend en keiraar probleem!
Ik doe namelijk een post, voor een login formulier naar een phpscript. Dit script doet een echo true of false... naargelang de login gelukt is of niet...
Dan vergelijk ik de ResponseText met true of false... dit werkt nog allemaal...
Maar dan wil ik dat ie een boolean zou returnen (naar een vorige functie).

<pre>
function getLoginState(uname, pwd){
var xmlhttp = createXMLHttpRequest();
var bool = false;
xmlhttp.open('POST', './scripts/login.php', true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(xmlhttp.responseText == "true"){
bool = true;
}else {
bool = false;
}
}
}
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send('username=' + uname + '&pwd=' + pwd);
//alert(bool);

return bool;
}
</pre>

Deze functie werkt perfect OP VOORWAARDE dat ik de laatste alert laat uitvoeren... anders krijg ik gewoon undefined ?!
Ik kan er niet aan uit waarom ie nu zo zeer die alert nodig heeft...
Enig ID ?

alvast bedankt

van: joriso
08:28:53, 13th-Apr-07
Je moet 'return bool' in de onreadystatechange eventhandler zetten

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(xmlhttp.responseText == "true"){bool = true;
}else {bool = false;}
}
return bool;
}
en niet aan het eind van de functie

van: Wouter
14:55:57, 13th-Apr-07
Ook al geprobeerd werkt niet...
Hij doet het enkel als ik die alert uit commentaar haal, snap het echt niet !

van: joriso
23:26:29, 13th-Apr-07
Je moet de return weghalen uit het eind van je functie (onder de xmlhttp.send).
Het gaat mis omdat je returned voordat de xmlhttp.readyState de kans krijgt om op 4 te komen.

Wanneer je eerst alert geef je de server wel de tijd om een response te sturen daarom gaat het dan wel goed. De return moet dus alleen gegeven worden in de onreadystate event handler

van: Shadowstyle
17:31:02, 28th-Aug-07
op die manier werkt POST niet.. je haalt GET en POST door elkaar. Bekijk je code nog eens goed ;)

van: joriso
12:43:34, 29th-Aug-07
idd!

van: Barend
22:37:25, 10th-Oct-07
bool is alleen bekent binnen de functie.
if(bool)
return true;
else
return false;

van: Justin
17:52:11, 26th-Dec-08
Leuk, maar hoe stuur je een array mee? Stel dat je een array met waardes hebt uit een formulier (b.v.: <input type=\'checkbox\' name=\'values[ ]\'/>) Hoe stuur je die allemaal mee als array? Niet in ieder geval door ze met een komma te scheiden, want als er ook een komma in een record voorkomt gaat ie dat record ook splitsen.

Waar ik nu ook al 2 dagen tijd aan besteed heb is hoe je xml kan doorsturen en verwerken. Doorsturen lukt nog enigzins maar hoe vang je dit op aan de php kant?

Respect voor diegene die dit weet want na 100 websites en 2 dagen zoeken ben ik het een beetje beu.

van: Codingmissy
15:46:48, 22nd-Feb-09
@Justin, ik hoop dat je het inmiddels hebt gevonden. Een checkbox wordt bij een post of get automatisch een variabele waarin alleen de geselecteerde waarde als value meegestuurd wordt. Kan iemand bijv. kiezen voor appels, peren en bananen en hij kiest voor appels. Dan krijg je in je Request object checkboxname=appels door. Als je meerdere opties toestaat, krijg je checkboxname=appels,bananen door.
Dat wordt dan automatisch een array. Kijk anders even op devguru.com of www.w3schools.com.

van: WzK
23:05:57, 17th-Jun-09
Jullie missen het punt. Het versturen van data middels een GET of POST methode betekend dat gegevens buiten de programmatuur-structuur worden vervoerd. Je kunt dan ook geen boolean of array meenemen middels deze methode\'s. Je kan ze ofwel middels een sessie meenemen, ofwel door de data plat te versturen.

Voorbeeld voor een boolean is om een 0 of 1 te versturen en die op de doelpagina weer te vertalen naar een boolean.

De array kan je als tekst meenemen door alle elementen uit te schrijven in een string. Bijvoorbeeld \"aap|noot|mies\" en deze op die doelpagina weer te splitsen.

Het gebruik van POST of GET is geen programmeer functie maar een browser functie, je kunt dus GEEN programmatuur letterlijk meenemen zoals booleans en arrays.

Commentaar toevoegen:
Naam:
Link:(niet verplicht)
Commentaar:
<-- code:
  


Gerelateerde Artikels :
webdevelopment:
Ajax POST en Ajax GET request

Snel zoeken:



Sterke man
50 Euro

Toevallig
passerende
cartoon
:




All content copyleft 2008 Joris Osterhaus - www.hardcode.nl