Ajax niet werkend
Ik ben bezig met het leren Ajax te gebruiken. Ik volg daarom een voorbeeld die heb verkregen via een website. Nou heb ik deze opdracht helemaal gemaakt maar krijg deze niet werkend. Doe ik iets verkeerd of staat er een fout in de code.
Index.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Ajax 101</title>
<link rel=”stylesheet” href=”boxy.css”>
<script type=”text/javascript” src=”prototype.js”></script>
<script language=’javascript’>
//handle the Ajax response …
function handleResponse(transport)
{
$(‘hello’).innerHTML = transport.responseText;
}
//creates a prototype Ajax object, sends a request, and registers the callback function ‘handleResponse’
function callAjax(s)
{
var myAjax = new Ajax.Request(‘server_script.php’,
{method: ‘get’, parameters: {state: s},
onComplete: handleResponse});
}
</script>
</head>
<body>
<p>
<span id=’hover_span’ onmouseover=”callAjax(‘do’)” onmouseout=”callAjax(‘undo’)”> <b>Hover here to trigger Ajax call:</b> </span>
</p>
<span id=’hello’> boring pre-Ajax-call text … </span>
</body>
</html>
server_script.php
Code (php)
boxy.css
#hover_span
{
font-size: 12pt;
}
#hover_span:hover
{
cursor: crosshair;
background-color: yellow;
}
Gesponsorde koppelingen:
Gewijzigd op 21/08/2010 10:48:40 door Opolo Webdesign
Probeer dit eens (juiste" en '):
Index.html
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax 101</title>
<link rel="stylesheet" href="boxy.css">
<script type="text/javascript" src="prototype.js"></script>
<script language='javascript'>
//handle the Ajax response …
function handleResponse(transport)
{
$('hello').innerHTML = transport.responseText;
}
//creates a prototype Ajax object, sends a request, and registers the callback function 'handleResponse'
function callAjax(s)
{
var myAjax = new Ajax.Request('server_script.php',
{method: 'get', parameters: {state: s},
onComplete: handleResponse});
}
</script>
</head>
<body>
<p>
<span id='hover_span' onmouseover="callAjax('do')" onmouseout="callAjax('undo')"> <b>Hover here to trigger Ajax call:</b> </span>
</p>
<span id='hello'> boring pre-Ajax-call text … </span>
</body>
</html>
<html>
<head>
<title>Ajax 101</title>
<link rel="stylesheet" href="boxy.css">
<script type="text/javascript" src="prototype.js"></script>
<script language='javascript'>
//handle the Ajax response …
function handleResponse(transport)
{
$('hello').innerHTML = transport.responseText;
}
//creates a prototype Ajax object, sends a request, and registers the callback function 'handleResponse'
function callAjax(s)
{
var myAjax = new Ajax.Request('server_script.php',
{method: 'get', parameters: {state: s},
onComplete: handleResponse});
}
</script>
</head>
<body>
<p>
<span id='hover_span' onmouseover="callAjax('do')" onmouseout="callAjax('undo')"> <b>Hover here to trigger Ajax call:</b> </span>
</p>
<span id='hello'> boring pre-Ajax-call text … </span>
</body>
</html>
server_script.php
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
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
<?php
$state = $_REQUEST['state'];
if ($state == 'do')
{
echo '<h1>exciting text retrieved from server!</h1>';
}
else if ($state == 'undo')
{
echo 'reset to boring …';
}
else
{
echo 'unknown state parameter passed to server!!';
}
?>
boxy.css
#hover_span
{
font-size: 12pt;
}
#hover_span:hover
{
cursor: crosshair;
background-color: yellow;
}
$state = $_REQUEST['state'];
if ($state == 'do')
{
echo '<h1>exciting text retrieved from server!</h1>';
}
else if ($state == 'undo')
{
echo 'reset to boring …';
}
else
{
echo 'unknown state parameter passed to server!!';
}
?>
boxy.css
#hover_span
{
font-size: 12pt;
}
#hover_span:hover
{
cursor: crosshair;
background-color: yellow;
}
Gewijzigd op 21/08/2010 11:38:51 door P Lekensteyn
Toevoeging op 22/08/2010 12:12:59:
Ok uitgeprobeerd en het werkt super. Dank je wel.
