Basic AJAX with jQuery

[Jake]

AJAX with jQuery (Javascript Library)

So I wrote this in response to someone working on AJAX for a website, and decided I might as well post it here since I spent a few minutes writing it up. It's an outline for making post requests with arrays or without arrays (see bottom for non-array version) and it gives insight to why something like jQuery would be used in place of your basic javascript.

As much as I hate using pre-existing code, and believe me, I do. I have to admit that writing your own scratch AJAX code is almost too complex a task to do for a site that implements a lot of AJAX. Thanks to people who have way too much free time on their hands we get special things like jQuery.

Heres the site: http://jquery.com/
Here is the documentation on ajax post: http://api.jquery.com/jQuery.post/

1. First off, it's easy, just put the javascript file for jquery (probably the minimal one) into your sites styles or javascript folder and make sure you link it:

<script type="text/javascript" src="location/jquery-1.4.2.min.js"></script>

2. You can use it to open POST requests (AJAX) and send arrays and data:
The javascript code (in a javascript file or inside <style type="text/javascript"></style>):

$(document).ready(function()
{
	// When you click on the object with id "button" run the ajax
	$('#button').click(function()
	{
		// Ajax request, we send a $_POST[] called choices to the php which is actually going to be an array
		$.post("test.php", { 'choices[]': ["Jon", "Susan"] }, function(data)
		{
     			// This inside part is what is returned after the AJAX is fully executed and in state 4
    			$('#id_of_content_box').html(data);
		});
	});
});

The above code will send the array to the php file (test.php) and return the "data" variable as you can see in the function(data) will be putting that data into a div or element with the id id_of_content_box.

3. The above code will sent a request for test.php... inside test.php we can do the following:
This is just a basic example of php code to show you how it works.

$array = $_POST['choices']; 
echo $array[0].":".$array[1];

4. Will return something like:

Jon:Susan

That will be inside the element with the id of "id_of_content_box"

Some basics:
1. $('#idhere').val() = the value of an form field, can be changed with .val("stuff here")

Here's an example of an AJAX post request, getting the variables from a form
The html form:

<input name="name" type="text" id="name" /><br />
<input name="phone" type="text" id="phone" /><br />
<input name="button" type="button" value="Send" id="button" />

The javascript code (in a javascript file or inside <style type="text/javascript"></style>):

// This code works when the document has finished loading
$(document).ready(function()
{
	// When you click on the button to "submit" the form
	$('#button').click(function()
	{
		// This send request will send $_POST[]'s for name and phone ($_POST['name'] and $_POST['phone'])
		$.post("test.php", { name:$('#name').val(), phone:$('#phone').val() }, function(data)
		{
     			// This inside part is what is returned after the AJAX is fully executed and in state 4
    			$('#id_of_content_box').html(data);
		});
	});
});

2. $('xxxx') = you can replace the xxx with '.classhere' or '#idhere' to select things that are ids or classes and even the name attribute (not XML strict 'valid').
3. All basic form events have a .click(), .change(), .keyup(), etc.
4. You can do cool things like .fadeOut(time) and .fadeIn(time) for data that is hidden.

Why would I tell you to use this if I myself am against pre-coded work?
Now think for a minute. Building web pages is about learning, and functionality. When you are finished learning how AJAX works you need to make it functional. We all know about the XMLHTTPRequest objects but doing all the background setup code by hand is very tedious and hard to make work correctly. I have recently migrated over to using jQuery for ALL my javascript needs because it is simple and hardly ads any size onto my files. The whole point of jQuery is to be fast, easy, and you know what, I personally think jQuery is quite fun once you get to know it.

Now if you do decide to use it, go to their website for all documentation needs. They have great documentation on the current functions and have live examples in most of them to show how they work. It's actually quite simple when you get to understanding it.

Anyway, hope this helps you and you get your web page working.