Ajax/JS
Uitleg van een basisje met Ajax/JS
Gesponsorde koppelingen
Inhoudsopgave
- Wat zit er in?
- Inleiding
- |Javascript beginsels
- Functies
- JS en input
- Ajax request zonder reactie
- Ajax request met reactie
18 reacties op 'Ajax/JS'
0 
-0 
-0 Op zich een best goeie instap-tutorial, zeker als je die laatste 4 regels op pagina 7 nog even weghaalt ;)
Paar opmerkingen over je gebruik van Prototype:
- In plaats van postBody kan je ook gewoon parameters meegeven, dat is nog makkelijker want dan doet prototype het werk.
- In plaats van onComplete kan je ook onSuccess gebruiken. onComplete wordt ook uitgevoerd bij een pagina met een error (404 not found bijvoorbeeld). onSuccess wordt alleen uitgevoerd waneer alles goed is verlopen en hij statuscode 200 heeft teruggekregen. onFailure is de voor zich sprekende tegenhanger.
En voor innerHTML bijwerken kan je ook 'update' aanroepen. Deze zorgt ook meteen voor javascript (dat bij innerHTML niet wordt uitgevoerd) en werkt om wat foutjes in IE6 heen. In sommige gevallen wel handig.
En misschien leuk om nog even een link naar de prototype documentatie te plaatsen ;)
Er is hier trouwens ook nog een iets uitgebreidere tutorial die ingaat op de werking van XMLHTTPRequest zelf. Maar daar is wel wat kennis van Javascript voor vereist, wat bij jouw versie echt tot een miniem niveau nodig is.
Ideaal voor instappers!
Paar opmerkingen over je gebruik van Prototype:
- In plaats van postBody kan je ook gewoon parameters meegeven, dat is nog makkelijker want dan doet prototype het werk.
- In plaats van onComplete kan je ook onSuccess gebruiken. onComplete wordt ook uitgevoerd bij een pagina met een error (404 not found bijvoorbeeld). onSuccess wordt alleen uitgevoerd waneer alles goed is verlopen en hij statuscode 200 heeft teruggekregen. onFailure is de voor zich sprekende tegenhanger.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
new Ajax.Request('backend.php', {
method: 'post',
parameters: {
naam1: 'value 1',
naam2: $('formElement').value
},
onSuccess: function(transfer)
{
alert(transfer.responseText);
}
});
method: 'post',
parameters: {
naam1: 'value 1',
naam2: $('formElement').value
},
onSuccess: function(transfer)
{
alert(transfer.responseText);
}
});
En voor innerHTML bijwerken kan je ook 'update' aanroepen. Deze zorgt ook meteen voor javascript (dat bij innerHTML niet wordt uitgevoerd) en werkt om wat foutjes in IE6 heen. In sommige gevallen wel handig.
En misschien leuk om nog even een link naar de prototype documentatie te plaatsen ;)
Er is hier trouwens ook nog een iets uitgebreidere tutorial die ingaat op de werking van XMLHTTPRequest zelf. Maar daar is wel wat kennis van Javascript voor vereist, wat bij jouw versie echt tot een miniem niveau nodig is.
Ideaal voor instappers!
0 -0
-0 Prototype is een beetje lomp om alleen de $() functie en Ajax.Request class te gebruiken, denk je niet?
De $() functie maak je ff zelf, en dan gebruik je SACK (google ff dan!). Dan heb je slanke nette ajax library.
Vind het een beetje een kleine tutorial. Paar voorbeeldjes erbij had wel gemogen. En misschien hoofdstukje wijden aan de voor en nadelen van de X in ajaX (XML dus).
Maar het punt is duidelijk... Ajax is lache :)
De $() functie maak je ff zelf, en dan gebruik je SACK (google ff dan!). Dan heb je slanke nette ajax library.
Vind het een beetje een kleine tutorial. Paar voorbeeldjes erbij had wel gemogen. En misschien hoofdstukje wijden aan de voor en nadelen van de X in ajaX (XML dus).
Maar het punt is duidelijk... Ajax is lache :)
0 -0
-0 X in ajax, prototype uitplooien, dat zijn naar mijn idee allemaal dingen die in een gevorderde tutorial voor moeten komen, maar niet in zo'n simpele. Dit is leuk voor hele simpele dingen zoals een shoutbox, maar als je ook maar iets ingewikkelders wilt gaan maken kom je al uit bij heel wat meer Javascriptwerk, en dan zal je ook kennis van events en DOM moeten hebben. Dat is allemaal buiten het bereik van deze tutorial. Gelukkig hebben we daar mijn tutorial voor >:)
0 -0
-0 Ik krijg javascript errors:
$ is not defined localhost/ajax/pages/ regel: 8
Het gaat hierover:
alert($("testDiv").innerHTML)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script src="./js/prototype.js" type="text/javascript"></script>
</head>
<body>
<div id="testDiv" name="testDiv">Voorbeeldje</div>
<script type="text/javascript">
alert($("testDiv").innerHTML)
</script>
</body>
</html>
<head>
<script src="./js/prototype.js" type="text/javascript"></script>
</head>
<body>
<div id="testDiv" name="testDiv">Voorbeeldje</div>
<script type="text/javascript">
alert($("testDiv").innerHTML)
</script>
</body>
</html>
$ is not defined localhost/ajax/pages/ regel: 8
Het gaat hierover:
alert($("testDiv").innerHTML)
0 -0
-0 Niet echt een tutorial! Als je echt AJAX wilt gaan leren kun je beter deze tut gebruiken:"
http://www.wmcity.nl/artikelen.php?actie=bekijk&id=718
Beste Nederlandse AJAX tutorial die er is. :)
http://www.wmcity.nl/artikelen.php?actie=bekijk&id=718
Beste Nederlandse AJAX tutorial die er is. :)
0 -0
-0 Kleinigheid toevoegen ...
Het gebeurt dat je een knop/link/... hebt die enkel bedoeld is om met javascript te gebruiken (ik zeg maaar wat: een knopje 'detecteer of de user-naam nog beschikbaar is' bij het registreren; een javascript slideshow; ...).
Laat die knop genereren door javascript. Wie javascript uit zet, zou toch niets hebben aan die knop ... dan ziet die ze ook niet.
Het gebeurt dat je een knop/link/... hebt die enkel bedoeld is om met javascript te gebruiken (ik zeg maaar wat: een knopje 'detecteer of de user-naam nog beschikbaar is' bij het registreren; een javascript slideshow; ...).
Laat die knop genereren door javascript. Wie javascript uit zet, zou toch niets hebben aan die knop ... dan ziet die ze ook niet.
0 -0
-0 @aar, jQuery, ik heb liever MooTools... :)
@Kris, dat is wel een handig idee. Nog nooit over na gedacht, maar ik denk dat het beter is om de tag wel in je broncode te zetten, maar dan te hiden. En doormiddel van JS de buttons zichtbaar te maken:
@Kris, dat is wel een handig idee. Nog nooit over na gedacht, maar ik denk dat het beter is om de tag wel in je broncode te zetten, maar dan te hiden. En doormiddel van JS de buttons zichtbaar te maken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html class="no-js">
<head>
<meta charset=utf-8>
<title>Hello World</title>
<script>
var elem = document.getElementsByTagName('html')[0];
elem.className = elem.className.replace(/no-js/, 'js');
</script>
<script>.no-js .only-js { display: none; }</script>
</head>
<body>
<button class="only-js">Hello</button>
<html class="no-js">
<head>
<meta charset=utf-8>
<title>Hello World</title>
<script>
var elem = document.getElementsByTagName('html')[0];
elem.className = elem.className.replace(/no-js/, 'js');
</script>
<script>.no-js .only-js { display: none; }</script>
</head>
<body>
<button class="only-js">Hello</button>
Om te reageren heb je een account nodig en je moet ingelogd zijn.
- Details
Door:
Jacco Engel- 6 jaar geleden
- 1.518 x bekeken
- PHP tutorials opties
- Overig
- Nieuwste PHP tutorials
- PHP tutorial toevoegen
PHP hulp
0 seconden vanaf nu