Feelay 0 Report post Posted August 9, 2010 Hey! Long time no see, I've been off for a while now, taking care of my real life, developing my knowledge and so on. I haven't posted a tutorial here for a very long time. Before I left this forum, Vujsa told me to learn AJAX to be able to make a div refresh without actually refreshing the whole page. And I had a very tough time learning AJAX. I gave up almost directly because I had a very tough time finding a good tutorial. Instead I gave up web developing for more than a year, and some months ago I started working for a company where I developed my knowledge. I recently made a chat that I'm still working on that you can check out, the link will be provided in the end of this tutorial. The chat is written in PHP and AJAX, the language I'm using is Swedish (I'll make an automatic language detection, and translate all the words in the language file when I have time for that), but the point is that this is what you will be able to do if you develop your knowledge in AJAX, and I am going to provide you with the basics, so that you can continue to develop your knowledge. Before we begin, let's make sure you know the basics of the following languages: HTMLJavaScriptPHP Note that this tutorial is very basic, and that it will only teach you how to load a PHP file into a div, instead of reloading the whole webpage to load the file.For an example of what you'll learn, check out this link: http://feelay.syntaxwebb.se/Xisto/ajaxbasictutorial/ Now let us begin, We'll begin with the index.php file, which will contain some links and a div. <!-------------------------index.php BEGINNING--------------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://forums.xisto.com/no_longer_exists/;--'>http://forums.xisto.com/no_longer_exists/;-- Creator: Feelay | NanashiProject Name: AJAX TutorialVersion Number: 1.0Contact: angelnight93@gmail.comUse this code as you wish.--><html xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en" lang="en"> <head> <title>Simple AJAX tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><?php //I'm including the file ajax.php, because the AJAX-code will be inside another file named ajax.php, this is only to not mess up the index.php, I like my files to be clean. include("ajax.php"); ?> </head> <body> <a href="#">link</a><a href="#">link</a><a href="#">link</a> <div id="container"><?php include("home.php"); ?></div> </body></html><!-------------------------index.php ENDING--------------------------> As you can see, I haven't made anything special to the links yet, but don't you worry about that, we'll get back to this file soon. What I did was to give the DIV an "id". The reason is because when we are working with AJAX, we will "point" our functions to this DIV using its ID. I also included the home.php into this DIV. Now when the page is refreshed, you will see the content of home.php inside it. Now just save this file and create a new file named ajax.php. <!-------------------------ajax.php BEGINNING--------------------------><script type="text/javascript"> //The function load_content is the function we'll use to load the data into the DIV when pressing a link. //As you can see, I'm using parameters to know which link was pressed. //Of course you can add more parameters. I used about five parameters in my //Latest game, to decide which DIV that was supposed to be updated, to decide which file to load, //If I wanted to send any $_GET parameters, if I wanted to run a function when the link was pressed, //And so on. It's all up to your own imagination. But today we'll keep this at a basic level, //We'll just use one parameter, and this parameter will decide which file to load when the link is pressed. //An example is, if the links parameter is set to "contact.php", then the file contact.php will be loaded //Inside the DIV we created in index.php. function load_content(file) { //This try&catch statement is nothing that you have to remember, just save it somewhere //And copy&paste it whenever you want to use AJAX on your webpage. //This is where all the "magic" happens. The variable named xmlhttp contains the XMLHttpRequest, //Which makes it possible to communicate between the server and the client (browser) without refreshing the page. //The try statement tries if the browser supports AJAX, and if it does, then the xmlhttp variable will be set. //If not, the catch statement alerts the alert that you are seeing below. try { var xmlhttp = window.XMLHttpRequest?new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("Warning! Ajax is not supported by your browser!\nYou should upgrade your browser. We recommend that you use Mozilla Firefox.\n Go to https://www.mozilla.org/en-US/firefox/new/?utm_source=firefox-com&utm_medium=referral to download it."); } //Now we'll use the xmlhttp variable that we created above, to check the "readystate". //There are different types of "Readystates", I'll just copy&paste them from the internet, //and try to explain the important ones as good as I can, but most of them are already explained. //I'll just quote what I've not written. If you have more questions about the different "Readystates", //Just ask them, and I'll try to answer them as good as I can. /* "0 Uninitialized" "Represents an "uninitialized" state in which an XMLHttpRequest object has been created, but not initialized." "1 Open" "The open() method has been successfully called." The open method is being used in the bottom of this AJAX function, xmlhttp.open();. "2 Sent" "Represents a "sent" state in which a request has been sent to the server with the send() method, but a response has not yet been received." "3 Receiving" "Represents a "receiving" state in which the HTTP response headers have been received, but message body has not yet been completely received. " "4 Loaded" "The data transfer has been completed.", meaning the data for the DIV should now be ready to be inserted into the DIV in our case. */ //onreadystatechange = function(){---} runs the following function every time the "readystate" changes. //This function contains an if-statement that checks if the readyState equals 4. If it doesn't, nothing will happen. //Of course you can make a loading bar appear or something, but I wont show you how to do that in this tutorial, //Maybe in the next one. //If the readyState DOES equal 4, a familiar JavaScript line will run, and replace the current text inside the DIV, //With the new one that we are getting from the file we are loading. //xmlhttp.responseText -> The text that is being "extracted" or something from the file we are loading by pressing the link. //I wont explain more on this line, because I suppose you already know JavaScript. xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4) { document.getElementById("container").innerHTML=xmlhttp.responseText; } } //The xmlhttp.open is the line that decides which file that will be opened, and also which method to use to open it. //In this case we are using POST, and the file we want to open is set to "file", which is the parameter we set in the function earlier. xmlhttp.open("POST", file); //I've got no comments on the following line, since I've not really figured it out myself. All i know is, //That it needs to contain some sort of data, in this case "null", or else Internet Explorer will act wierd as usual. xmlhttp.send(null); }</script><!-------------------------ajax.php ENDING--------------------------> As you can see, the AJAX isn't that hard, remove all the comments and you'll see that it's only a few lines.I know that it's a lot of text, but I also know that you'll manage =) Now let us fill the missing part of index.php, shall we? <!-------------------------index.php BEGINNING--------------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://forums.xisto.com/no_longer_exists/;--'>http://forums.xisto.com/no_longer_exists/;-- Creator: Feelay | NanashiProject Name: AJAX TutorialVersion Numer: 1.0Contact: angelnight93@gmail.comUse this code as you wish.--><html xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en" lang="en"> <head> <title>Simple AJAX tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><?php //I'm including the file ajax.php, because the AJAX-code will be inside another file named ajax.php, this is only to not mess up the index.php, I like my files to be clean. include("ajax.php");?> </head> <body> <a href="#" onclick="load_content('home.php')">Homepage</a> | <a href="#" onclick="load_content('aboutme.php')">About me</a> | <a href="#" onclick="load_content('enjoy.php')">Enjoy</a> <div id="container"><?php include("home.php"); ?></div> </body></html><!-------------------------index.php ENDING--------------------------> As you can see, I added an onclick-event to every link. Inside the onclick-event, the function "load_content" is inserted, and inside the parenthesis the file name is inserted surrounded by two single-quotations-marks. Now let's create the files home.php, aboutme.php and enjoy.php. <!-------------------------home.php BEGINNING--------------------------><p>This is the homepage. This is how the DIV looks before we mess it up.</p><!-------------------------home.php ENDING--------------------------> <!-------------------------aboutme.php BEGINNING--------------------------><p>Some text about me, I don't really think you are interested.</p><!-------------------------aboutme.php ENDING--------------------------> <!-------------------------enjoy.php BEGINNING--------------------------><p>Hopefully you enjoyed this tutorial! Cheers, Feelay | Nanashi</p><!-------------------------enjoy.php ENDING--------------------------> And as I promised, I'd give you a link of something I've made with AJAX, here you go: http://feelay.syntaxwebb.se/syntaxwebb/chat/ Remember, if you find something wrong with this tutorial, tell me. If you have questions, don't be afraid to ask them, there are no stupid questions. If you find this tutorial too complicated, tell me what part you didn't quite understand, and I'll do my best to explain it =) Regards //Feelay | Nanashi Share this post Link to post Share on other sites
Quatrux 4 Report post Posted August 26, 2010 I personally suggest to use a javascript framework which includes ajax usage very easily, you can do it with jQuery, which is much better and is cross browser.. you can get it here: http://jquery.com/ Share this post Link to post Share on other sites
frazz86 0 Report post Posted August 26, 2010 Nice tutorial man why don't you make a couple more like advanced basic all the way up to advanced?it might be a good idea i have posted tuts for stuff i find it good for everyone including myself as it refreshes my memory, so it may be good idea Share this post Link to post Share on other sites
Feelay 0 Report post Posted August 30, 2010 (edited) I personally suggest to use a javascript framework which includes ajax usage very easily, you can do it with jQuery, which is much better and is cross browser.. you can get it here: http://jquery.com/ I've used JQuery, but not had the time to learn it completely Thanks for the advice anyways. Nice tutorial man why don't you make a couple more like advanced basic all the way up to advanced?it might be a good idea i have posted tuts for stuff i find it good for everyone including myself as it refreshes my memory, so it may be good idea The thing is I don't have the time to make many tutorials now that school has begun and I'm working with websites and at the same time I'm addicted to games and want to spend time with my friends. That's 4 things to do every day, more than most people can usually handle Edited August 30, 2010 by Feelay (see edit history) Share this post Link to post Share on other sites
