Ive written ajax request the long handed way using the long hand way of a XMLHttpRequest. It can be tedious and frustrating. Don’t get me wrong, it works great but building this functionality can take a long time, just to avoid a page refresh.
This is where jQuery comes in handy. In a few lines of javascript you can create quick ajax requests. This is how its done:
1. Download the jQuery library and include this file in your head tag like so.
<script type=”text/javascript” src=”path-to-file/jquery.js”></script>
2. Create a php file that will be called and return value to the DOM. This can be a simple file that echos ‘Hello World’.
3. Create a page element that receives the markup. Here would be an example:
<div id=”loadedContent”></div>
4. Now that you have a php file that returns content, and a page element that can recieve the content you can now create the javascript/jQuery to make the ajax request and input the results into the DOM.
<script type=”text/javascript”>
$(document).ready(function () {
$.post(”hello-world.php”, function(data){
$(”#loadedContent”).html(data);
});
});
</script>
That’s it! On the page load it should request the page. You can go further by using simple click events and send simple name/value pairs using the same request. jQuery is simple and easy to use. If you have any questions please leave a comment.
After downloading and installing chrome, here are my first thoughts.