Don't be scared of AJAX :)
If you're like me at all, then you've probably looked into integratin ajax into your applications or scripts and gotten scared off by things like prototype.js or, scared off by thinking ajax is a totally new language.
In actual fact it's incredibly easy to utilize ajax without the use of external libraries using real easy javascript in conjuncton with some even more basic php code.
I wrote the following to show someone on another forum how exactly to use ajax on pages to do whatever you want, hopefully someone here can find it usefull also.
Filename : index.html ( or php doesn't matter )
Filename : AjaxProcess.php (exactly like that)Code:<!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>Ajax Usage Example</title> <!-- This next part is javascript, you can put this in a seperate file, or not, it's up to you --> <script language="javascript"> function processAjax(ElementId, AjaxProcess, Input) { xmlHttp=GetXmlHttpObject() // Create xmlHTTP Object /** * This switch controls what the xmlHTTP object is doing * it's probably not needed for your use, but it's not a * bad way of doing things, so take note of how it works **/ switch(AjaxProcess) { // Begin : switch(AjaxProcess); /** * Form Process **/ case 'FormsExample': var url="AjaxProcess.php" // Begin to build the url to the proccessing script url=url+"?process=forms&name="+ encodeURI( document.getElementById(Input).value ) url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=StateChangedForms // Discover state changes break; /** * Content Process **/ case 'ContentExample': var url="AjaxProcess.php" // Begin to build the url to the proccessing script url=url+"?process=content&input="+Input url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=StateChangedContent // Discover state changes break; } // End : switch(AjaxProcess); xmlHttp.open("GET",url,true) // Open object at the url specified xmlHttp.send(null) // Send the AJAX request } /** * Detecting if a state has changed ( FORMS EXAMPLE ) **/ function StateChangedForms() { //document.write(ElementId); if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById('exampleForm').innerHTML=xmlHttp.responseText } } /** * Detecting if a state has changed ( CONTENT EXAMPLE ) **/ function StateChangedContent() { //document.write(ElementId); if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById('exampleContent').innerHTML=xmlHttp.responseText } } /** * This function calls an xmlHTTP object for use to do whatever.... **/ function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp } </script> </head> <body> <h2>Forms usage</h2> Enter your name in the box, if your name is joe, you'll be congragtulated : <!-- You'll notice in the form below there is an id tag, this is needed on most elements --> <input type="text" id="name" onkeyup="javascript: processAjax('examlpeForm', 'FormsExample', 'name');" name="name" /> <br /> <span id="exampleForm"></span> <h2>Content Usage</h2> <div > Click the links below to swap dynamic content<br /> <a href="javascript: processAjax('exampleContent', 'ContentExample', 1);">Show Content 1</a> <a href="javascript: processAjax('exampleContent', 'ContentExample', 2);">Show Content 2</a></div> <span id="exampleContent"></span> </body> </html>
DEMO : http://ex.krakjoe.info/AjaxExample/example.htmlPHP Code:<?
switch ($_GET['process'])
{
case "forms":
if ( strlen($_GET['name']) > 2 )
{
if ($_GET['name'] == "Joe" || $_GET['name'] == "joe")
{
$responseText = "Yay, congratulations, you're me";
}
else {
$responseText = "You'll never be me ";
}
}
break;
case "content":
switch($_GET['input'])
{
case 1:
$responseText = "Content 1 I could be anything";
break;
case 2:
$responseText = "Content 2 I could be anything";
break;
}
break;
}
echo $responseText;
?>
The above effects can be achieved without the use of ajax entirely, all it gives you is dynamic content instead of static js vars.
NOTE : Please note, the above php is not necessarily secure, nor is it meant to be, it's meant to be simple, remember that!!
Bookmarks