10-14-2009, 10:05 AM
The goal of this tutorial is to learn you a bit about Ajax langage, and make quickly something working.
First of all, I'm going to quote the definition about Ajax in Wikipedia.
Definition :
AJAX (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With AJAX, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.
In other term : You can retrieve data from server, without reloading your page.
Let's see some code :
Here is my Ajax function, coded in Javascript :
The code is not that hard to understand : We create an HttpRequest or ActiveXObject depending of the browser, we send the data via POST, and we get the new informations and write it on the page.
Well, you don't really need to know how everything works in this function, let's see now the parameters :
function ajax_request(data,div,file)
You want an example ?
ajaxfunction.js : (you already know it !)
Index.html : (a form which asking your name ...)
phpanswer.php (php will receive data and will answer !)
So, let's take a look into the code :
onSubmit="ajax_request('promptbox='+document.getElementById('promptbox').value,'answer','phpanswer.php')"
You can take quiclky a look on this link, i've copied / paste the code :
http://supportforum.alwaysdata.net/Ajax-demo/
Too hard to copy/paste it all ?
You can download all the sources here :
http://supportforum.alwaysdata.net/Ajax-...x-demo.zip
Thanks for reading this tutorial
Hope it helps!
PS : I didn't really know where to post it, there wasn't any Javascript section ... so i've posted it into PHP ...
First of all, I'm going to quote the definition about Ajax in Wikipedia.
Definition :
AJAX (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With AJAX, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.
In other term : You can retrieve data from server, without reloading your page.
Let's see some code :
Here is my Ajax function, coded in Javascript :
Quote:<script type="text/javascript">
function ajax_request(data,div,file) {
var XHR = null;
if (window.XMLHttpRequest) // Firefox, Safari, Opera, most of browsers.
XHR = new XMLHttpRequest();
else if (window.ActiveXObject) // Internet Explorer
XHR = new ActiveXObject("Microsoft.XMLHTTP");
else { // The browser does not support XMLHttpRequest
alert("Error : Your browser does not support XMLHttpRequest.");
return false;
}
XHR.onreadystatechange = function waiting() {
if (XHR.readyState == 4){
document.getElementById(div).innerHTML = XHR.responseText;
}
}
XHR.open("POST",file, true);
XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XHR.send(data);
return false;
}
</script>
The code is not that hard to understand : We create an HttpRequest or ActiveXObject depending of the browser, we send the data via POST, and we get the new informations and write it on the page.
Well, you don't really need to know how everything works in this function, let's see now the parameters :
function ajax_request(data,div,file)
- data : It is the post data which we are going to send to the php script. You have to write it like that : "var1=v1&var2=v2&var3=v3...etc"
- div : It is the container where the response will be written
- file : It is the php file which will be requested for the process.
You want an example ?
ajaxfunction.js : (you already know it !)
Quote:function ajax_request(data,div,file) {
var XHR = null;
if (window.XMLHttpRequest) // Firefox, Safari, Opera, most of browsers.
XHR = new XMLHttpRequest();
else if (window.ActiveXObject) // Internet Explorer
XHR = new ActiveXObject("Microsoft.XMLHTTP");
else { // The browser does not support XMLHttpRequest
alert("Error : Your browser does not support XMLHttpRequest.");
return false;
}
XHR.onreadystatechange = function waiting() {
if (XHR.readyState == 4){
document.getElementById(div).innerHTML = XHR.responseText;
}
}
XHR.open("POST",file, true);
XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XHR.send(data);
return false;
}
Index.html : (a form which asking your name ...)
Code:
<html>
<head>
<title>Ajax -- Support Forums Tutorial</title>
<script type="text/javascript" src="ajaxfunction.js"></script>
</head>
<body>
<form name="form" onSubmit="ajax_request('promptbox='+document.getElementById('promptbox').value,'answer','phpanswer.php');return(false);">
Enter your name > <input type="text" id="promptbox">
</form><br />
<div id="answer">
Php is sleeping.
</div>
</body>
</html>phpanswer.php (php will receive data and will answer !)
PHP Code:
<?php
if (isset($_POST['promptbox'])){
echo "PHP says : Hello ".$_POST['promptbox']." ! *yawns*";
}
?>So, let's take a look into the code :
onSubmit="ajax_request('promptbox='+document.getElementById('promptbox').value,'answer','phpanswer.php')"
- The first parameter send "promptbox="+the value into the promptbox
- It will send the data into the div id = "answer"
- And it will request the phpanswer.php file !
You can take quiclky a look on this link, i've copied / paste the code :
http://supportforum.alwaysdata.net/Ajax-demo/
Too hard to copy/paste it all ?
You can download all the sources here :
http://supportforum.alwaysdata.net/Ajax-...x-demo.zip
Thanks for reading this tutorial
Hope it helps!
PS : I didn't really know where to post it, there wasn't any Javascript section ... so i've posted it into PHP ...
