[AJAX] Meerdere requests

[Scotix]

Hallo Tweakers,

Ik ben nu net bezig met Ajax. Het lukt al aardig.
Alleen, nu ga ik meerdere requests doen naar php paginas die mijn uiteindelijk eind pagina genereren.
Ik heb het volgende stukje javascript:
Ik gebruik de functie OnLoad().
Als ik daar alleen GetMenu() of alleen GetPage() uitvoer doet hij het goed.
Alleen als ik ze allebei tegelijk uitvoer (zoals in voorbeeld).
Dan plaats hij bij GetMenu() wel de indicator maar verder doet hij niks.
Ik weet niet wat ik fout heb gedaan,
Ik kan niet echt een goeie oplossing vinden in de search.

JavaScript: 1

var xmlHttp
<!-- Plaats een Indicator -->
function SetIndicator()
{
 document.getElementById(DivName).innerHTML='<center><img src="images/indicator.gif"></center>'  
}
<!-- Zorgt voor de XML requests (IE ready ) -->
function GetXmlHttpObject()
{ 
 var objXMLHttp=null
 if (window.XMLHttpRequest)
 {
  objXMLHttp=new XMLHttpRequest()
 }
 else if (window.ActiveXObject)
 {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
 return objXMLHttp
} 
xmlHttp=GetXmlHttpObject()
<!-- XML request klaar. plaats de content met deze functie-->
function VeranderDiv() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
  document.getElementById(DivName).innerHTML=xmlHttp.responseText 
 } 
} 
<!-- Functies die moeten worden geactiveerd bij hetlanden van de pagina-->
function OnLoad()
{
 GetPage(1)
 GetMenu()
}
<!-- Zorgt voor de menu -->
function GetMenu()
{
 var url="menu.php"
 url=url+"?sid="+Math.random()
 DivName = 'menu'
 xmlHttp.onreadystatechange=SetIndicator
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 xmlHttp.onreadystatechange=VeranderDiv 
}
<!-- Zorgt voor de main paginas -->
function GetPage(pagina_ID)
{
 var url="pagina.php"
 url=url+"?pagina_ID="+pagina_ID
 url=url+"&sid="+Math.random()
 DivName = 'rechts'
 xmlHttp.onreadystatechange=SetIndicator
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 xmlHttp.onreadystatechange=VeranderDiv 
}

[BasieP]

ten eerste is dat wat je nu doet geen ajax..
ajax stuurt xml terug om data in op te slaan. jij stuurt text terug (gewoon plain)

om op je vraag in te gaan:
je hebt maar 1 xmlHttp object. die roep je 2x aan. Je xmlhttp object krijgt niet direct antwoord, maar moet wachten tot de readystate goed is. Ondertussen heb jij al een 2de request gedaan, en daarmee wordt de eerste overschreven..
als het 'goed' is zal in jouw voorbeeld het menu wel laden, maar de pagina niet

er zijn 2 manieren om dit op te lossen:
1: zorg dat je wacht met je 2de request tot je eerste afgelopen is.
2: zorg ervoor dat je xmlHttp object meerdere requests tegelijk kan doen
edit:
lees dit eens:
http://javascript.about.com/library/blajax13.htm
http://ajax.phpmagazine.n...s_versus_asynchronou.html
http://ajaxblog.com/archi.../synchronous-requests-bad

offtopic:
waarom gebruik je html escape tekens ( <!-- --> ) voor JS? in JS is het dubbel slash voor een regel zetten ( // )

[ Voor 24% gewijzigd door BasieP op 28-10-2006 00:24 ]

[Verwijderd]

Om eerlijk te zijn vind ik je code zo nogal verwarrend. Ik heb zelf een ajax site (nog in ontwikkeling overigens) die gebruikt een zelfgeschreven object die requests regelt. Voor elke nieuwe verzoek naar de server maakt de script een nieuwe instance aan van het contentloader object. Dit is vooral nodig omdat het object moet wachten op de reactie van de server, als je dan twee verzoeken op dezelfde object gooit zoals jij doet schop je ze door de war.

Je zet nu ook code dat bijvoorbeeld de getPage functie helemaal niet hoeft te weten in zijn functie. Ik zou als ik jou was de code voor de request zelf onderbrengen in een contentloader object en dan een callback functie als parameter meegeven. Zo kan je zoals je hier doet toch ervoor zorgen dat de antwoord van de server goed verwerkt wordt zonder dat je je code onnodig vervuilt.

Dit zou ik dus onderbrengen in een generieke object samen met het aanmaken van het xmlHTTP object:

code:

 xmlHttp.onreadystatechange=SetIndicator 
 xmlHttp.open("GET",url,true) 
 xmlHttp.send(null) 
 xmlHttp.onreadystatechange=VeranderDiv

Variabelen zoals de url en callback kun je makkelijk doorgeven als parameters.

Doe je comments voortaan ook met // text of /* text */, wat je nu gebruikt is html style.

[ Voor 49% gewijzigd door Verwijderd op 28-10-2006 00:37 ]

[Verwijderd]

BasieP schreef op zaterdag 28 oktober 2006 @ 00:18:
ten eerste is dat wat je nu doet geen ajax..
ajax stuurt xml terug om data in op te slaan. jij stuurt text terug (gewoon plain)

Dat is dus niet waar, AJAX is het herladen van een gedeelte van de pagina zonder de hele pagina te herladen.
En er zijn verschillende manieren om daar gegevens uit te halen (3 of 4 volgens mij)
XML is er daar 1 van maar alleen text kan ook! Het is gewoon simpelder

[Leftblank]

Verwijderd schreef op zaterdag 28 oktober 2006 @ 17:51:
[...]


Dat is dus niet waar, AJAX is het herladen van een gedeelte van de pagina zonder de hele pagina te herladen.
En er zijn verschillende manieren om daar gegevens uit te halen (3 of 4 volgens mij)
XML is er daar 1 van maar alleen text kan ook! Het is gewoon simpelder

Strikt genomen niet natuurlijk, AJAX staat voor Asynchronous Javascript And XML, je zou de andere versies bijv. AJAH of AJAT kunnen noemen, maar AJAX is niet de juiste term

[Verwijderd]

Asynchronous Javascript and XML ...

Als je meerdere requests op hetzelfde moment wil afvuren moet je ook meerdere xmlHttpRequest objecten aan gaan maken, of opeenvolgende requests in een queu zetten en met behulp van events de andere logica op de hoogte brengen dat ze met het resultaat aan de gang kunnen gaan. Zie hier oa observer pattern voor.

[Blaise]

Als je meerdere requests op hetzelfde moment wil afvuren moet je ook meerdere xmlHttpRequest objecten aan gaan maken

Pas dan op dat je niet meer dan 2 requests tegelijk doet want Internet Explorer en Firefox hebben maximaal 2 connecties.

[Verwijderd]

Blaise schreef op zondag 29 oktober 2006 @ 00:49:
[...]
Pas dan op dat je niet meer dan 2 requests tegelijk doet want Internet Explorer en Firefox hebben maximaal 2 connecties.

Ik weet niet in hoeverre dat actueel is en of dat met nieuwe Gecko releases is aangepast, want voorheen was IE de enige die zich aan deze HTTP spec hield, en mocht je gewoon naar hartelust requests afvuren. Wellicht dat het in FF2 al is gefixed, ik heb het nog niet getest maar als iemand tijd over heeft ben ik benieuwd.

[Juup]

Blaise schreef op zondag 29 oktober 2006 @ 00:49:
Pas dan op dat je niet meer dan 2 requests tegelijk doet want Internet Explorer en Firefox hebben maximaal 2 connecties.

Je kunt gerust 10+ asynchrone requests tegelijk hebben lopen hoor, de browser zal ze mooi na elkar afvuren met max 2 parallel.
Als je het jezelf gemakkelijk wilt maken kun je het beste voor elk request een nieuw XmlHttpRequest aanmaken.