[AJAX] Tutorial #1

Baseball435 · Post by **Baseball435** » Thu Nov 17, 2011 10:52 pm

Hey everyone, I'm going to be having a few tutorials that teach you and show you how to use Ajax. I expect that you know basic HTML and the normal tags but you don't have to have any prior knowledge of Ajax or Javascript.

What is Ajax?

Ajax by definition from W3Schools is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
Ajax stands for Asynchronous JavaScript and XML.

So what we are going to do is make it so that when you click a link, the text of a div will change.

So what you need to do first is create a new folder where you will keep all of your files. Call it whatever you want.
Then we need to create a new .html file. So right click in the folder, go to new, and click notepad. Open it up, go to "save as" and make the name "index.php" and make sure the "Save As Type:" is set to "All Files". Then click save and you can exit out and delete the notepad.
So all you should have now in the folder is a file called "index.html".
Now we are going to put the code into the index.html file and I'm going to go line by line on what it does:

index.html:

Code: Select all

<!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=utf-8" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

</head>

<body>
	<div id="link"><a href="#" onclick="get_page();">Click me!</a></div>
	<div id="bodyDiv">When you click the link this will change by sliding up and sliding down without reloading the page!</div>
</body>
</html>

So now lets go through the code. The first 4 lines are the basic code. The part that I'm going to start at is this part:

Code: Select all

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

What this is doing is it's including two files that we are going to need to create for the Ajax and what I will get back to later. Just know that the jquery.js file is the JQuery/Ajax library and is something you always need to have when coding in Ajax but we will get that later. The other file, functions.js, is a Javascript file that we will be creating later also and it will hold the function that changes the text and slides it up and down.

The next part of code we are going to be looking at is this code:

Code: Select all

<body>
	<div id="link"><a href="#" onclick="get_page();">Click me!</a></div>
	<div id="bodyDiv">When you click the link this will change by sliding up and sliding down without reloading the page!</div>
</body>

This is the main code, the body tags are standard, the part that we are looking at is the two lines inside of it. On the first line we create a new div tag with the id equal to "link" and inside of the div we have a line that says "Click Me!" and the onclick part says that when a person clicks it it calls the "get_page();" function which we will create in our Javascript file. The next line is another div tag with the id equal to "bodyDiv". This is important because this is what we need to know to change the text inside of the div. Inside of the div at the start though, we have basic text which you can read.

Now we are going to first get the JQuery/Ajax file from their website: http://code.jquery.com/jquery-1.6.4.js

Go to there, copy all of the code, make a new folder inside of the first folder you created and name it js. So now in the first folder you should have the index.html and a folder named js. Inside of the js make a new Javascript file by creating a new notepad, going to save as, naming it jquery.js, and making sure the Save As Type is set to all files. Then inside of the jquery.js file paste all of the code from the website.

Now to make things easy, simply copy the jquery.js file, paste it in the js folder again, rename it to "functions" so that now it's functions.js, open it, and delete everything inside. So now inside of the js folder you should have jquery.js and functions.js and the functions.js should have nothing in it as of right now.

Now open the functions.js file and paste this inside of it:

Code: Select all

function get_page() {
	$('#bodyDiv').slideUp(500, function() { 
		$('#bodyDiv').html('You Clicked the link!');
	});

	$('#bodyDiv').slideDown(500);
}

So lets go through this line by line. The first few lines:

Code: Select all

$('#bodyDiv').slideUp(500, function() { 
	$('#bodyDiv').html('You Clicked the link!');
});

is kind of a function in it self. First it is getting the bodyDiv which is the div tag we created (when getting a div tag we always put # infront before you type in the name) then we called the function slideUp which simple slides up the div. Now the first parameter we put is the amount of milliseconds we want the slideUp function to take. The second parameter we put is a function which is saying while the div is sliding up, do everything inside of the function. So what we did inside of the function is got the "bodyDiv" div tag again and we called the html function which lets you change the html inside of the div. So we just simply changed the text but you could make it so that it shows a button or something. It's up to you. Then after that we close off the brackets and we are done with that.

Then the next part of the code:

Code: Select all

$('#bodyDiv').slideDown(500);

simply gets the "bodyDiv" div tag again and this time calls the slideDown function and as the parameter we put the amount of milliseconds but no function this time.

So if all of this worked if you open up the index.html in the internet explorer and click the link, it should slide down, change, then slide up.

So we are done and I hope this helped you all!

If you need any help with anything just let me know! If you are having a lot of trouble, just download the source code here but it's better if you learn and try it yourself

Source: Source

~baseball435