I began thinking to myself today, “What should I write about?”. The best thing to normally write about on a blog is something that people might have questions to. So, I spent most of today trying to figure out what question some people might want answered.
I spend a lot of time on a Question/Answer site called StackOverflow. I’ve answered 370 questions to date, and answer probably 2-5 questions everyday. So, it dawned on me: I should write a blog post about questions other people just asked me on StackOverflow, so that people reading this blog might not have the same problem. Brilliant!
The first question I am going to write about came from ‘JQman’ on StackOverflow. “What are the basic steps to get AJAX working?”.
You’ll find on many websites nowadays that AJAX is used for all sorts of things, such as displaying images, loading content, refreshing the page without refreshing the page, etc. But what are the basic steps to doing it? Well, that is what we are going to learn today.
Step 1: The Regular Page
The first thing you need to think about is the page you are starting on. This is the page where everything will happen, things will be updated, and the user will be visiting. For our example, it will look something like this:
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <div id="content"></div> </body> </html>
Notice that we have included the Google-Hosted Version of jQuery. jQuery is a popular javascript library that makes it dead simple to create things like AJAX requests and other similar javascript functions.
Next, we are going to put in the AJAX request. What were wanted the page to do, is when we click on a link, we are going to grab the data from another page and display it in the content div.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<a onClick="$('#content').load('refresh.html');">Click Me!</a>
</body>
</html>
What this will do is create a button, that when pressed will activate jQuery’s load function. First, we select the div box with the ID of content:
$('#content')
Then, we will tell jQuery to go load the page ‘refresh.html’, and put whatever it sends into the content div:
load('refresh.html');
Step 2: The Refresh Page
The second step is to create a page that will give us the content to put into the content div. In this case, it can be really simple, such as:
Hello World! This is AJAX Loaded Text!
When we press the button, we will expect to see those words in the content div box.
Step 3: Testing it out.
Now, because I’m not doing a screencast, I can’t show you that the page works. But, most likely it is going to work. If it doesn’t, check that you are typing everything correctly. If you are still having problems, head over to StackOverflow.com and see if they can help you. They are good at this kind of stuff.
Step 4: Use it!
Now that you can use AJAX in your pages, what other things can you think of to try? Leave any ideas in the comments.