Ajax/JS
Door Jacco Engel, 21 jaar geleden, 9.418x bekeken
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
Er zijn 18 reacties op 'Ajaxjs'
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
Ik vind de tut van Jelmer iets beter, maar het is wel goed om aandacht aan JS/AJAX te besteden. Dit krijgt een steeds grotere invloed in de webwereld.
0 -0
-0
Is een ; in het eerste codeblok van pagina 6 achteraan lijn 3 niet netter?
0 -0
-0
Mooi, alleen ga ik zelf voor mijn zelfgescripte AJAX, met de tut van Jelmer als hulp.
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
Leuke tut, maar waar dient prototype.js nou precies voor... kan ik deze ook gewoon weglaten?
0 -0
-0
Nee, prototype doet alles, de 2 regels die je zelf tupt sturen prototype aan.
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
Quote:
Jonathan schreef op 03.04.2007 20:30
Mooi, alleen ga ik zelf voor mijn zelfgescripte AJAX, met de tut van Jelmer als hulp.
Mooi, alleen ga ik zelf voor mijn zelfgescripte AJAX, met de tut van Jelmer als hulp.
Waarom?
Ik begrijp wel dat je de stof helemaal misschien wilt ontdekken, maar Prototype is harstikke makkelijk en zeker als iets snel af wilt hebben met AJAX.
0 -0
-0
Mooi tutorial om mee te beginnen ja ;) Ben een beetje meer wijs geworden jammer genoeg is wat ik ook nog wilde weten niet echt genoemd
Het liefst zal ik ook nog te weten komen of je een variabel kan toevegen net als bij een php function en hoe dan?
Het liefst zal ik ook nog te weten komen of je een variabel kan toevegen net als bij een php function en hoe dan?
@Jurgen, als je het antwoord nu hier plaatst hebben andere mensen er ook nog wat aan.
En ja, deze tutorial is oud. Maar JS is nauwelijks verandert en daarom is dit nog goed bruikbaar.
En ja, deze tutorial is oud. Maar JS is nauwelijks verandert en daarom is dit nog goed bruikbaar.
0 -0
-0
Het is goed bruikbaar, maar is er niet echt veel support meer op ProtoType, het framework die er hier wordt gebruikt.
Ik raad aan om eens naar jQuery te kijken, en dan met name naar $.ajax, $.post, en $.get.
Ik raad aan om eens naar jQuery te kijken, en dan met name naar $.ajax, $.post, en $.get.
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.
Inhoudsopgave
- Wat zit er in?
- Inleiding
- |Javascript beginsels
- Functies
- JS en input
- Ajax request zonder reactie
- Ajax request met reactie
PHP hulp
0 seconden vanaf nu