Description
Basic tutorial of how AJAX works.
Snippet
ajax.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PHP Code Snippets</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(URL){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong (User Probably Doesn't have JS or JS is turned off)
alert("You Browser Doesn't support AJAX.");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
//This if satement will check if the status of the script
//If the readyState is not equal to 4 (The request is complete)
//It will display text that says loading...
if(ajaxRequest.readyState < 4){
//AJAX in the prenthacies, is what id element in the body will be changed.
document.getElementById('AJAX').innerHTML = "<h2>Loading...</h2>";
}
//Once the readyState is equal to four, this means that the request was sent,
//and successfully processed.
if(ajaxRequest.readyState == 4){
//This is where the output of the file we called and it will be placed
//in the div where we named the ID = AJAX
document.getElementById('AJAX').innerHTML = ajaxRequest.responseText;
}
}
//This section processes the data
ajaxRequest.open("GET", URL, true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<!-- This is the link to the ajax function
It should always start with javascript:
after that is the function name ajaxFunction
inside the parenthacies, is the file we want,
this file can look like any URL you would make in a
normal href. Examples:
date.php
date.php?page=1
date.php?page=1&name=fred
-->
<a href="javascript:ajaxFunction('date.php')">What Time Is It?</a>
<div id="AJAX"></div>
</body>
date.php
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
$AntePost = date("A");
$time = date("g:i:s");
if($AntePost == "AM"){
echo 'Good Morning!';
}else{
echo 'Good Evening!';
}
?>Comments.
Ozon Tedavisi May 20th (Website)
DislikeLike
I think so, it seems well. Thanks. :)Julian Young July 8th 2009 (Website)
DislikeLike
Thanks for this, my Ajax skills are getting lax due to JQuery! :)