[UPDATED!] Basic ajax is easy

[Floydian]

For those that have read my "Basic ajax is easy" post, you'll notice a major difference in how I do ajax these days. I've learned a lot, and I know how to make it even easier than ever!

If you haven't read the other forum thread, don't worry! The admin should delete it! It works, but it's no where near as good as this, and it's no where near as easy either.

To begin, some ground work needs to be laid. We're going to be using Yahoo's YUI library for this. Okay, scarryyyyy! Well, it was for me anyways. I though using a javascript library would be hard, but it turns out that it makes things way easier. After all, haven't most of us used mccodes because it made getting started with a browser game much easier? Well, if you haven't used mccodes, then kudos to you!

Let's dig in. The first example can be found at this link on the next line.

http://www.phphorizons.com/forum/examples/javascript/ajax/ajax1.html

This example demonstrates the most basic parts of using the YUI Connection Utility. The source code is heavily commented so that you get the line by line commentary on what's happening.

The premise is we have a login form. This login form will pass a login name and a password to a php page that will validate the login credentials and report back the results.

The second premise is that debugging the script should be easy. Therefore, we haven't even implemented the validation for the login. All that we have, is a login form and a javascript script that attempts to make an ajax request.

The theory here is that we all make mistakes, and it's likely that most of us will make mistakes the first time we work with ajax. So let's see how this script handles a missing file. I.e., the file we're trying to connect to doesn't exist.

Once you load the page, type in whatever you want into the form (don't type your CE login name and passsword...). Click the submit button and the javascript will attempt to connect to the ajax1.php page. Since that page doesn't exist, we'll get an error message with a 404 error (we've all seen those before lol)

In the next post, I'll demonstrate what happens when the page we're connecting to does exist.

[Floydian]

Re: [uPDATED!] Basic ajax is easy

Part 2 as promised takes the example from the first post and adds in a php script to handle the form data.

To keep things simple, I'm just going to take the entire POST array and display it back to the user. The point of doing this is to show that all of the fields in the form did get submitted intact.

Here's the second example:

http://www.phphorizons.com/forum/exampl ... ajax2.html

The php script looks like this:

<?php
// This script takes the POST array and displays the entire thing to the user.
// The purpose of this is to show that all the data from the FORM
// was sent in the ajax request. You're forms could have
// lots more form fields and they would all get passed
// on to the page your ajax script connects with.
echo '<pre>' . print_r($_POST, 1) . '</pre>';
?>

[Floydian]

Re: [uPDATED!] Basic ajax is easy

Here's the last part of this series.

We'll build on what we have so far, and add to it the use of JSON.

We'll use JSON in order to allow our PHP script to communicate back to the javascript script in a more sophisticated way. JSON gives us a way for the javascript to parse the PHP response and create variables, arrays, and objects that were sent as a JSON encoded string.

Make sure to view the source code of the ajax3.html file as it has been updated and contains more javascript code and more comments.

Since the PHP script will respond back to us indicating if we logged in or if we filled in the form wrong, we want to be able to indicate to the javascript script which result we got so that the javascript can take appropriate action.

The last example can be found here:

http://www.phphorizons.com/forum/exampl ... ajax3.html

The code for the ajax3.php file is:

<?php
// This script will validate the login credentials. It outputs a JSON object
// which can be interpreted by our javascript script.

// This array will be used as a mock database of names and passwords that are
// acceptable for use in the login.
$users = array(
'John' => 'aaaaaaaa',
'Jane' => 'bbbbbbbb',
'Jim' => 'cccccccc',
'Janet' => 'dddddddd'
);

// Check if POST['name'] and POST['pass'] has been submitted.
if (isset($_POST['name'], $_POST['pass']) and strlen($_POST['name']) > 0 and strlen($_POST['pass']) > 0) {

// Check if the $users array contains the name/pass combination submitted.
if (isset($users[$_POST['name']]) and $users[$_POST['name']] === $_POST['pass']) {

	// If we made it here, the login is good and we will use a JSON object
	// which will help the javascript script know that the login was good.
	echo json_encode(array(
		'auth' => true,
		'text' => 'You have successfully logged in.'
	));

} else {

	// The login credentials submitted were no good and we'll indicate that using our JSON object.
	echo json_encode(array(
		'auth' => false,
		'text' => 'Invalid login credentials...'
	));

}
} else {

// One part of the form or more was not submitted. We will send back an indication
// of this error, again, using a JSON object.
	echo json_encode(array(
		'auth' => false,
		'text' => 'Please fill in all form fields.'
	));

}
?>

[Jeff]

Re: [uPDATED!] Basic ajax is easy

Thanks Floydian, very useful!

[Karlos]

Re: [uPDATED!] Basic ajax is easy

Very nice work Floydian..

Now I gotta learn JS in more depth.

Thanks. :-)

[Floydian]

Re: [uPDATED!] Basic ajax is easy

You're welcome ;)

Check it, Firefox and IE are getting native JSON capabilities.

This is sliced bread for browsers, trust me on this...

[Vali]

Re: [uPDATED!] Basic ajax is easy

The 3rd example gives a 404

[shedh]

Re: [uPDATED!] Basic ajax is easy

404 = Page not found so have you uploaded the file?

[Floydian]

Re: [uPDATED!] Basic ajax is easy

It's a typo, and should be .html instead of .htm

http://www.phphorizons.com/forum/exampl ... ajax3.html

I'll see if I can't get the powers that be to make an edit.