XmlHttpRequest en javascript
Ik ben met een script bezig dat een php pagina oproept die met de database communiceert en een resultaat geeft zonder de hele pagina te moeten herladen.
Dit doe ik natuurlijk met een XmlHttpRequest.
Het probleem is alleen dat, wat de php pagina teruggeeft alleen uit html kan lijken te bestaan. En het javascript dat ertussen zit niet uitgevoert kan worden door de browser.
Dit is de xmlhttp-code:
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
33
34
35
36
37
38
39
40
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
33
34
35
36
37
38
39
40
<?
// BROWSER COMPATIBLE FUNTIE (XMLHTTP)
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function delete_mssg(id)
{
// roep browser-compatible funtie aan
xmlHttp=GetXmlHttpObject()
// url van bestand dat wordt ingeladen
var url="scripts/delete.php?mssgID="+id
// wanneer de status verandert -> voer dan stateChanged() uit
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
// wanneer het XMLHttpRequest is voltooid, ...
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// ... wordt het resultaat van delete.php geprint
document.getElementById("page").innerHTML=xmlHttp.responseText
}
}
?>
// BROWSER COMPATIBLE FUNTIE (XMLHTTP)
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function delete_mssg(id)
{
// roep browser-compatible funtie aan
xmlHttp=GetXmlHttpObject()
// url van bestand dat wordt ingeladen
var url="scripts/delete.php?mssgID="+id
// wanneer de status verandert -> voer dan stateChanged() uit
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
// wanneer het XMLHttpRequest is voltooid, ...
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// ... wordt het resultaat van delete.php geprint
document.getElementById("page").innerHTML=xmlHttp.responseText
}
}
?>
Dit is een klein deel van de php pagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
require("mysqlConnect.php");
$id = $_GET["mssgID"];
if ($id == NULL)
{
echo "<script type='text/javascript'>alert('Er is geen bericht selecteerd om te worden verwijderd.')</script>";
}
else ..........enz.......
[/code]
Ik hoop niet dat het te veel leeswerk is, maar het probleem is hier dus dat er geen alert wordt uitgevoerd.
Het gaat om deze regel:
[code]echo "<script type='text/javascript'>alert('Er is geen bericht selecteerd om te worden verwijderd.')</script>";[/code]
Iig alvast bedankt!
Edwin
require("mysqlConnect.php");
$id = $_GET["mssgID"];
if ($id == NULL)
{
echo "<script type='text/javascript'>alert('Er is geen bericht selecteerd om te worden verwijderd.')</script>";
}
else ..........enz.......
[/code]
Ik hoop niet dat het te veel leeswerk is, maar het probleem is hier dus dat er geen alert wordt uitgevoerd.
Het gaat om deze regel:
[code]echo "<script type='text/javascript'>alert('Er is geen bericht selecteerd om te worden verwijderd.')</script>";[/code]
Iig alvast bedankt!
Edwin
Gewijzigd op 01/01/1970 01:00:00 door Edwin
Gehehe, geintje.
Nee, maar helaas is het normaal dat scripts in content die via innerHTML worden geinsert niet worden uitgevoerd. Er zijn wel workarounds voor prototype heeft er eentje in zich, maar die zijn niet ideaal.
Wat je ook kan doen is berichten, alleen veranderende informatie opsturen. Deze verwerk je dan in je stateChanged-functie. Zo zou je bijvoorbeeld met codes kunnen werken:
Quote:
200:berichten verwijderd
400:geen berichten geselecteerd
401:geen rechten om berichten te verwijderen
400:geen berichten geselecteerd
401:geen rechten om berichten te verwijderen
enzovoord. Zo hoef je geen Javascript op te sturen.
Een andere aanpak is voorafgaande een type mee te geven. Dit zou kunnen via headers, maar je kan er ook bijvoorbeeld de eerste 4 karakters voor gebruiken:
Quote:
html:dit is een bericht
eval:alert('hello world');
eval:alert('hello world');
Met responseText.substr(0, 4) zou je dan een switch kunnen maken en de juiste actie ondernemen. Dus of innerHTML of eval() in dit geval.
En als laatste is er nog de prototype-oplossing: met een regular expression alle <script/>-tags eruit vissen en de code erin 'handmatig' uitvoeren met eval(). Dit is een verreweg van ideaal oplossing, aangezien je niet precies kan voorspellen wat er gaat gebeuren. Het is goed mogelijk dat als je bijvoorbeeld document.write() opstuurt middenin je responseText deze wordt uitgevoerd voordat de responseText in de div wordt gezet met innerHTML. Zo ook met alert() en dingen als getElementById, waarbij het heel erg essentieel is dat eerst het element met het ID bestaat voordat je het probeert aan te roepen.
Kortom: probeer zoveel mogelijk javascript in je javascript te houden en niet op te sturen. Stuur alleen variabele waarden.
En nog een aanrader: JSON. Hiermee hoef je niet te exploden of je data na te bewerken, aangezien je gewoon een object terug krijgt. Lekker makkelijk en snel.