Ajax/JS

Door Jacco Engel, 20 jaar geleden, 8.601x bekeken

Uitleg van een basisje met Ajax/JS

Gesponsorde koppelingen

Inhoudsopgave

  1. Wat zit er in?
  2. Inleiding
  3. |Javascript beginsels
  4. Functies
  5. JS en input
  6. Ajax request zonder reactie
  7. Ajax request met reactie

 

Er zijn 18 reacties op 'Ajaxjs'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jelmer -
Jelmer -
20 jaar geleden
 
0 +1 -0 -1
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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    }
});


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!
Simon Blok
Simon Blok
20 jaar geleden
 
0 +1 -0 -1
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.
K i p
K i p
20 jaar geleden
 
0 +1 -0 -1
Is een ; in het eerste codeblok van pagina 6 achteraan lijn 3 niet netter?
- -
- -
20 jaar geleden
 
0 +1 -0 -1
Mooi, alleen ga ik zelf voor mijn zelfgescripte AJAX, met de tut van Jelmer als hulp.
Rudie dirkx
rudie dirkx
20 jaar geleden
 
0 +1 -0 -1
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 :)
Jelmer -
Jelmer -
20 jaar geleden
 
0 +1 -0 -1
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 >:)
Jurgen assaasas
Jurgen assaasas
20 jaar geleden
 
0 +1 -0 -1
Ik krijg javascript errors:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


$ is not defined localhost/ajax/pages/ regel: 8

Het gaat hierover:

alert($("testDiv").innerHTML)
Arjan Schuurman
Arjan Schuurman
20 jaar geleden
 
0 +1 -0 -1
Leuke tut, maar waar dient prototype.js nou precies voor... kan ik deze ook gewoon weglaten?
- -
- -
20 jaar geleden
 
0 +1 -0 -1
Nee, prototype doet alles, de 2 regels die je zelf tupt sturen prototype aan.
Remy Brokke
Remy Brokke
20 jaar geleden
 
0 +1 -0 -1
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. :)
Koos-Bert
Koos-Bert
20 jaar geleden
 
0 +1 -0 -1
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.

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.
ScrapZz nl
ScrapZz nl
15 jaar geleden
 
0 +1 -0 -1
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?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
Function voorbeeld($var){
  return $var;
}

?>
Jurgen Meijer
Jurgen Meijer
15 jaar geleden
 
0 +1 -0 -1
Ik heb je ge-PM't Darkwell, topic is oud.
Wouter J
Wouter J
15 jaar geleden
 
@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.
- Ariën  -
- Ariën -
15 jaar geleden
 
0 +1 -0 -1
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.
Kris Peeters
Kris Peeters
15 jaar geleden
 
0 +1 -0 -1
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.
Wouter J
Wouter J
15 jaar geleden
 
0 +1 -0 -1
@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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Kris Peeters
Kris Peeters
15 jaar geleden
 
0 +1 -0 -1
Ja, kan ook

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. Wat zit er in?
  2. Inleiding
  3. |Javascript beginsels
  4. Functies
  5. JS en input
  6. Ajax request zonder reactie
  7. Ajax request met reactie

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.