coolpro Posted July 19, 2008 Share Posted July 19, 2008 Anybody can make super simple example, written by Ajax way. For example, it is a time: time.php <? echo date("H:i"); //hours and minutes ?> I have index.html, with 2 lines, "Update the time", and "Time is:". I want to do, that when i click on "Update the time", AJAX check time.php, and respond it to index.html file Quote Link to comment Share on other sites More sharing options...
corbin Posted July 19, 2008 Share Posted July 19, 2008 Ahhh here it goes. Just giving example code isn't my style, so I'm going to explain everything first. First off, I have a function (really a class) that I like to use to get an AJAX object. function GetAjax() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { } if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); } throw new Exception('No AJAX support'); } Why do it in a class? I like it because it returns an AJAX class as long as the browser has support for AJAX (and the support is looked for in that class). What I mean is that I never have to know what object I'm dealing with, since they all have the same methods (functions). So, the usage of this so far would be: var aobj = new GetAjax(); Now, that doesn't exactly do much by its self. All of the AJAX objects have the same methods with the same parameters. The methods/variables you will need to know are: open(method, url, asynch) send(content) onreadystatechange open takes a method (POST or GET for example), then a URL (somepage.php for example) and onreadystatechange is a variable. When the readyState of the object changes, the onreadystatechange function will be fired off. Send is simply used to send the actual request, along with any content if needed (usually only needed on POST requests). So, assuming you have time.php as: <?php echo date("H:i"); ?> Your Javascript for what you're trying to do could look something like this: <!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" xml:lang="en" lang="en" dir="ltr"> <head> <title>AJAX Example</title> <script language="javascript"> function GetAjax() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { } if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); } throw new Exception('No AJAX support'); } function GetTime() { try { var aobj = new GetAjax(); aobj.open("GET", "time.php", true); aobj.onreadystatechange = HandleSendResponse; aobj.send(null); } catch (E) { alert('Bah!'); //worst error handling ever. EVER! } } function HandleSendResponse() { //hopefully you get this concept because i't's hard to explain.... HandleSendRequest() will be executed //inside of the XMLHttpRequest class, so, this responds to 'this' instance of that class if(this.readyState == 4) { //it's done! if(this.status == 200) { //everything is (assuming the data was passed/processed correctly) good document.getElementById("time").innerHTML = this.responseText; } else { //something went wrong x.x } } } window.onload = GetTime; </script> </head> <body> <h1>AJAX Example</h1> The time is: <div id="time" style="display: inline">N/A</div> <br /> <br /> </body> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.