+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Coding Support Forums (https://www.supportforums.net/forumdisplay.php?fid=18)
+---- Forum: PHP The Hypertext Preprocessor (https://www.supportforums.net/forumdisplay.php?fid=21)
+---- Thread: PHP ... and his friend AJAX. (/showthread.php?tid=1492)
Pages:
1
2
PHP ... and his friend AJAX. - Spl3en - 10-14-2009
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 :
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-demo/ajax-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 ...
RE: PHP ... and his friend AJAX. - Combo - 10-15-2009
AJAX is the next generation, cheers for this.
RE: PHP ... and his friend AJAX. - Spl3en - 10-15-2009
Yeah, thanks for reply
Once i've learnt how to make it work, i use it everywhere
RE: PHP ... and his friend AJAX. - h1r0n - 10-16-2009
I got some tips from your code mate.... It helped me on my CMS project...
RE: PHP ... and his friend AJAX. - Spl3en - 10-16-2009
Really ?
Glad to help !
RE: PHP ... and his friend AJAX. - immi - 10-16-2009
Great tut. Thankx dude ;)
RE: PHP ... and his friend AJAX. - Gaijin - 01-10-2010
For the sake of Bumping....
I have an tip...
Splitting the main function from your tutorial into 3 different functions...
Will give you more control and better usage possibilities
RE: PHP ... and his friend AJAX. - Spl3en - 01-10-2010
I don't know, i'm not sure to understand ... what do you mean ?
RE: PHP ... and his friend AJAX. - uber1337 - 01-11-2010
great tut. The example page reminds me of CGI, except without the page refreshing! very useful tut!
RE: PHP ... and his friend AJAX. - Gaijin - 01-11-2010
(01-10-2010, 09:19 PM)Spl3en Wrote: I don't know, i'm not sure to understand ... what do you mean ?
What I mean is you have one function to create XMLHttp object, then you create one to handle the request (waiting()) and then the last one to return the response text for further use...
Your function just puts it raw into the div, but sometimes you want to play with the response before showing..
It's just what's on my mind, a beginner would need days to figure out how to use Ajax properly ;)