iGuest 3 Report post Posted November 19, 2007 (edited) Most of you would have heard of AJAX. What is it? Is it a language? No. It's JavaScript. Basically, AJAX lets us get the content from an external page without reloading! It's especially useful when you need to get information from a serverside script (e.g. A php page that gets information from a database), and you don't want the page reloading all the time. So how do you use AJAX? Let's make an example. Make a new html document. Let's call it ajaxexample.htm. Make it look something like this: <html><head><title>AJAX Example</title></head><body><a href="#" onClick="doAjax();">Click here!</a><br><br><span id="ajaxspan"></span></body></html>Note this line:<a href="#" onClick="doAjax();">Click here!</a> We make the href parameter "#", because just plain "" would cause the page to reload when we clicked the link, and not putting the href parameter at all would mean the link wouldn't be coloured/underlined. This doesn't matter all that much, but it makes a nicer effect that just clicking on text. This line: <span id="ajaxspan"></span> Will be used when we actually make the script, which we're doing now! Place this in the head tags of your page: <script language="JavaScript" type="Text/JavaScript">function GetXmlHttpObject(){ var objXMLHttp = null; if (window.XMLHttpRequest) { objXMLHttp = new XMLHttpRequest(); //Checks if the XMLHttpRequest variable should be used } else if (window.ActiveXObject) { objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //Checks if Microsoft.XMLHTTP should be used (For IE) } return objXMLHttp;}function doAjax(){ xmlHttp = GetXmlHttpObject(); //Set the xmlHttp variable url = 'ajaxpage.php'; //Set the url variable to ajaxpage.php. We'll make this page later xmlHttp.open('GET', url, true); //Tell the client what page we want, and how to get it xmlHttp.onreadystatechange = updateSpan; //Tell the client what function to do when the state of xmlHttp changes xmlHttp.send(null); //Sends the request document.getElementById('ajaxspan').innerHTML = 'Loading...'; //Sets the text inside the "ajaxspan" element to "Loading...", so the user knows it's doing something!}function updateSpan(){ if (xmlHttp.readyState==4) //If xmlHttp's state is 4 (the page is loaded) { document.getElementById('ajaxspan').innerHTML = xmlHttp.responseText; //sets the "ajaxspan" element to whatever was on the page }}</script>Big bit of code, isn't it! Basically, it sets the xmlHttp variable to whatever's the best Ajax XmlHttp variable for the browser, then it tells the client to load the page "ajaxpage.php", and puts "Loading..." onto the page while it loads, then when it loads, it replaces the loading text with whatever's on the page! Now for the final bit, ajaxpage.php. You can do this however you want, here's a simple example that just shows "Hello world!" <?phpecho 'Hello, world!';?>Simple, huh? Your final ajaxexample.htm page should look like this: <html><head><title>AJAX Example</title><script language="JavaScript" type="Text/JavaScript">function GetXmlHttpObject(){ var objXMLHttp = null; if (window.XMLHttpRequest) { objXMLHttp = new XMLHttpRequest(); //Checks if the XMLHttpRequest variable should be used } else if (window.ActiveXObject) { objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //Checks if Microsoft.XMLHTTP should be used (For IE) } return objXMLHttp;}function doAjax(){ xmlHttp = GetXmlHttpObject(); //Set the xmlHttp variable url = 'ajaxpage.php'; //Set the url variable to ajaxpage.php. We'll make this page later xmlHttp.open('GET', url, true); //Tell the client what page we want, and how to get it xmlHttp.onreadystatechange = updateSpan; //Tell the client what function to do when the state of xmlHttp changes xmlHttp.send(null); //Sends the request document.getElementById('ajaxspan').innerHTML = 'Loading...'; //Sets the text inside the "ajaxspan" element to "Loading...", so the user knows it's doing something!}function updateSpan(){ if (xmlHttp.readyState==4) //If xmlHttp's state is 4 (the page is loaded) { document.getElementById('ajaxspan').innerHTML = xmlHttp.responseText; //sets the "ajaxspan" element to whatever was on the page }}</script></head><body><a href="#" onClick="doAjax();">Click here!</a><br><br><span id="ajaxspan"></span></body></html> And if it all goes well, when you click the "Click here!" link, the text "loading..." should appear, then once it's loaded, "Hello world!" It should be easy to fiddle around and modify it to suit your needs. I hope you learned a little about AJAX! Edited November 22, 2007 by Habble (see edit history) Share this post Link to post Share on other sites
toby 0 Report post Posted November 19, 2007 http://forums.xisto.com/no_longer_exists/Doesn't work for me. Really good tut though, I do understand it now. Share this post Link to post Share on other sites
jimmy89 0 Report post Posted November 20, 2007 Thats a nice introduction tutorial. Thanks, got anything else for us anytime soon? Share this post Link to post Share on other sites
kelvinmaki 0 Report post Posted November 21, 2007 Nice tutorial. There's also some javascript framework that you don't have to write much code to implement AJAX. If you are interested,1. Prototype2. JQuery3. MootoolsCheers Share this post Link to post Share on other sites
iGuest 3 Report post Posted November 21, 2007 http://forums.xisto.com/no_longer_exists/Doesn't work for me. Really good tut though, I do understand it now. Oops, my bad! JavaScript's case sensitive, it should be responseText, not responsetextI'll change it now! Share this post Link to post Share on other sites
toby 0 Report post Posted November 21, 2007 Thanks.What changes? Is it the ajaxspan, the loading and the xmlhttpopen? What different parameters can be in that last one? Share this post Link to post Share on other sites
iGuest 3 Report post Posted January 8, 2008 Great job...The next step could be the tutorial in this post http://forums.xisto.com/index.php?showtopi502&hl=ajaxRegards. Share this post Link to post Share on other sites
kelvinmaki 0 Report post Posted January 9, 2008 Great job...The next step could be the tutorial in this post http://forums.xisto.com/index.php?showtopi502&hl=ajaxRegards. That's another nice tutorial for those interested in Ajax. If for those who wants to get a feel and some background of it, I found this particular article that cover the whole of Ajax in an overview. Read it in your free time as its 9 pages . http://forums.xisto.com/no_longer_exists/ Share this post Link to post Share on other sites
Jeigh1405241495 0 Report post Posted January 27, 2008 Ajax is one of the few web based tech's I haven't had the chance to try my hand at yet, but luckily I'm in a course now that will be hitting on ajax a bit near the end so that should be a nice treat. I know it seems like a fairly powerful step forward for dynamic webpage generation so I'm excited to see what its capable of once I dig into it a bit. I always enjoy the new technologies they put out on web platforms so this should be entertaining as well. Share this post Link to post Share on other sites
java-area 0 Report post Posted February 4, 2008 AJAX (like javascript) is browser-dependable. That's way XMLHttpRequest object can be created in different browsers using different javascript methods. Open-source library Larissa hides this dependancy and provides some cross-browsers methods. Share this post Link to post Share on other sites
iGuest 3 Report post Posted February 22, 2008 Hey, good job. This is a very good introductory tutorial to AJAX. I have a couple sites bookmarked that I used to get into AJAX. I thought I'd post them here, since I found them very useful, and I think it helps to have a few sources when you're trying to learn something new.http://www.xul.fr/en-xml-ajax.html and http://forums.xisto.com/no_longer_exists/ Share this post Link to post Share on other sites
java-area 0 Report post Posted February 22, 2008 (edited) At this time AJAX is a very perspective solution for integrating with existed Web technologies.(When I use termine "Ajax", I think about HTTPRequestObject which is known is JavaScript!)How to improve performance of Web application, created by any technology?Very often we do not need to refresh all HTML tags, displayed on HTML page. We need to refresh only the part of the page. Having such possibility we can prevent many unnecessary data sendings between server and client.Traditional HTML technology did not prodive any methods for refreshing parts of page. But AJAX do this!!!As I know many new tag libraries with AJAX are appearing today. For example, in JSF and Seam. Edited February 22, 2008 by java-area (see edit history) Share this post Link to post Share on other sites
Ikkerens 0 Report post Posted April 9, 2008 Actually a quite good tutorial... Since i'm starting to use AJAX now too...(I started a game named Spacial Kingdom) this was very usefull...I recommend everyone this tutorial! Share this post Link to post Share on other sites
