Basic ajax probleempje
Ik ben vandaag eens begonnen met ajax leren, en moet zeggen het ziet er mooi uit. Maar ik stuit nu op een probleempje: Als ik in een form wat tik krijg ik om de zoveel tijd een alert met "forbidden" erin. Ik zie dat in dat script ook staat datie telkens een alert geeft als er een fout komt. Maar ik snap echt niet hoe het zou komen dat er een fout is, maarja, ik kan het natuurlijk ook nog niet. Dit is wat ik heb.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type = "text/javascript" src = "../ajax.js"></script>
<script type = "text/javascript">
function getLastname()
{
var url = "lastname.php?qrnd=" + Math.random() + "&sFirstname=" + document.getElementById('sFirstname').value;
xmlHttp = GetXmlHttpObject(changeLastname);
xmlHttp.open("GET", url , true);
xmlHttp.send(null);
}
function changeLastname()
{
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
{
if(xmlHttp.status == 200)
{
document.getElementById('sLastname').innerHTML = xmlHttp.responseText;
}
else
{
alert( xmlHttp.statusText);
}
}
}
</script>
<strong>Voer je voornaam in:</strong>
<br />
<input type = "text" id = "sFirstname" onkeyup="getLastname()" /><a href = "#" onclick = "getLastname()">Wat is mijn achternaam?</a>
<br /><br />
<strong>Je achternaam is:</strong>
<br />
<span id = "sLastname"> </span>
<script type = "text/javascript">
function getLastname()
{
var url = "lastname.php?qrnd=" + Math.random() + "&sFirstname=" + document.getElementById('sFirstname').value;
xmlHttp = GetXmlHttpObject(changeLastname);
xmlHttp.open("GET", url , true);
xmlHttp.send(null);
}
function changeLastname()
{
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
{
if(xmlHttp.status == 200)
{
document.getElementById('sLastname').innerHTML = xmlHttp.responseText;
}
else
{
alert( xmlHttp.statusText);
}
}
}
</script>
<strong>Voer je voornaam in:</strong>
<br />
<input type = "text" id = "sFirstname" onkeyup="getLastname()" /><a href = "#" onclick = "getLastname()">Wat is mijn achternaam?</a>
<br /><br />
<strong>Je achternaam is:</strong>
<br />
<span id = "sLastname"> </span>
http://freshcreations.be/ajax/lastname/ Tik er maar eens op los, je ziet wel wat ik bedoel :)
Heeft iemand een idee waarom ik telkens de alert "forbidden" krijg? Ik zou het graag weten en zou graag kunnen verder leren met ajax ;)
Edit:
Het script dat ik hier gebruik om te oefenen komt van hier: http://www.tbforum.nl/artikel/75346.html Ik heb wel wat accolades toegevoegd, want die klopten volgens mij niet...
Het script dat ik hier gebruik om te oefenen komt van hier: http://www.tbforum.nl/artikel/75346.html Ik heb wel wat accolades toegevoegd, want die klopten volgens mij niet...
Gewijzigd op 01/01/1970 01:00:00 door Cedric
Je moet wel een voornaam invullen
ja man, ben ej stooooooooooooooooned ofzooooooooooooooooooo??
gistere ochtend was ik dronke man.. iedereen midden in de nacht bellen enzo, en onzichtbarebootmobiel roepen :S laag nivo xD
Cedric, wat krijg jij te zien waneer je lastname.php direct aanroept? Zou het kunnen dat een htaccess-bestand jouw ip-adres/browser blokkeert? Hier gaat alles prima (Safari 3.0.3, MacOS)
Probeer ook eens met Firefox + Firebug na te gaan wat er precies gebeurt. Hiermee kan je XMLHttpRequest precies volgen, en eventuele foutmeldingen opvangen.
Ook merk ik dat als ik snel F5 druk op lastname.php dat ik ook een 403 error krijg. (Dit is wat het ajax gedeelte ook doet) Maar waarom gebeurt dit?
Cedric schreef op 29.10.2007 19:57:
Ook merk ik dat als ik snel F5 druk op lastname.php dat ik ook een 403 error krijg. (Dit is wat het ajax gedeelte ook doet) Maar waarom gebeurt dit?
Dat komt omdat je bij iedere keer dat je op een toets drukt, dus een letter intikt je script gaat zoeken naar de achternaam. Heb je een naam van 10 letters, dan wordt de site 10 keer aangevraagd. Typ je een beetje snel, dan heb je 10 verbindingen tegelijk met de site. Misschien dat je webhoster maatregelen heeft genomen tegen een boel requests vanaf 1 computer tegelijkertijd, en zie je daarom die foutmelding.
Probeer met setTimeout() een timeout in te bouwen, zodat hij pas gaat zoeken waneer jij twijfelt of klaar bent met typen.
Ik denk niet dat het aan de hoster ligt, aangezien er mensen zijn waar alles wel goed gaat... Een Timeout() zal wel in JS moeten, en dat is precies wat ik nu probeer te leren... :S
Of een extended versie:
Mootools --> http://www.mootools.net
Is stukken makkelijker dan zelf je XMLHTTP requests, te schrijven
Jelmer schreef op 29.10.2007 19:53:
Tommy, al jouw posts zijn van laag niveau... Je had je de moeite kunnen besparen het bij deze post apart te vermelden.
...
...
l*l..
mare ik heb het topic niet gelezen, is er gezegt dat je een javascript framework nodig hebt? want dat is denk ik wat je eerst moet gaan uitzoekn, of zelf iets zoiets maken..
best hoog nivo nou hè.. :P
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
window.onload = function() {
var inputNode = document.getElementById('sFirstname');
var timeout = null;
inputNode.onKeyDown = function()
{
if(timeout)
clearTimeout(timeout);
timeout = setTimeout(getLastName, 500);
}
}
var inputNode = document.getElementById('sFirstname');
var timeout = null;
inputNode.onKeyDown = function()
{
if(timeout)
clearTimeout(timeout);
timeout = setTimeout(getLastName, 500);
}
}
Als je je 'onkeydown' attribuut weglaat, en het bovenstaande scriptje toevoegd aan het stuk script dat je al hebt, zou het beter moeten gaan.
Jelmer schreef op 29.10.2007 20:35:
Als je je 'onkeydown' attribuut weglaat, en het bovenstaande scriptje toevoegd aan het stuk script dat je al hebt, zou het beter moeten gaan.
Als ik onkeydown weglaat in mijn html pagina, op wat moet ik dan de functie getLastname(); triggeren in het form?
of kalle, zelfde reden
Edit:
Hier kan je live meevolgen: http://freshcreations.be/ajax/lastname/
Gewijzigd op 01/01/1970 01:00:00 door Cedric
http://www.twilightuniverse.com/projects/sack/
Kan je deze tutorials bij gebruiken:
http://www.dhtmlgoodies.com/index.html?page=ajax