Shawn McCool » JavaScript

AJAX with jQuery: A Simple Login Example

Shawn McCool — Wed, 15 Apr 2009 23:04:23 +0000

In this screencast we explore the jQuery $.post() command in order to create a simple ajax login script that also gracefully degrades and works for users who do not have JavaScript enabled.

You may want to check out my post ‘What Exactly is JSON?’ if you’re not familiar with the JavaScript Object Notation before watching.

What exactly is JSON?

Shawn McCool — Wed, 15 Apr 2009 22:04:19 +0000

JSON is short for JavaScript Object Notation. It’s a notation used to create JavaScript objects.

JSON looks like this:

{

name: "Shawn McCool",

language: "English"

}

When evaluated by JavaScript or decoded with another language you’d end up with an object like the one below.

person.name is equal to “Shawn McCool”

person.language is equal to “English”.

Since using JSON allows you to easily serialize arrays and objects, it’s often used during AJAX calls and web services. Below are some examples of the JavaScript Object Notation.

var myArray = ['cat', 'dog'];
var myObject = {animal: 'cow'};
alert(myArray[0]); // outputs 'cat'
alert(myObject.animal); // outputs 'cow';

A standard set of interactions for an AJAX login script might be:

1: JavaScript client (browser) posts username and password to PHP.

$.post('/ajax.php', {
username: $('input[name=username]').val(),
password: $('input[name=password]').val()
}, function(data) {}, 'json');

2: PHP authenticates the information against the database then generates a response which is json_encoded and sent to the browser.

$user = $this->auth_model->Login($_POST['username'], $_POST['password']);

if($user)

{
$data['success'] = true;

}

else

{
$data['success'] = false;

}

echo json_encode($data);

3: JavaScript client ‘eval’uates the JSON which creates an object. JavaScript client then determines behavior based on the data in the object.

$.post('/ajax.php', {username: $('input[name=username]').val(), password: $('input[name=password]').val()}, function(data) {
if(data.success)
{
// login succeeded
} else {
// login failed
}

}, 'json');

AJAX with jQuery: A Simple Login Example

AJAX with jQuery: The Beginning

Shawn McCool — Fri, 27 Mar 2009 01:40:53 +0000

This is the first in a series of screencasts that I’m creating to highlight the AJAX functionality present in the open source Javascript framework jQuery. In this screencast I give a brief overview of AJAX as well as delve into our first jQuery command.

* SCRIPT *

AJAX stands for Asynchronous JavaScript and XHTML (or XML, depending on who you ask).

Since you’re watching this you probably already know that it’s a technology that allows us to send and receive data to and from a web server without having to reload our web page.

I’ve already created a project for us and have included the most recent copy of jQuery. So, let’s go ahead and create an index.html file.

Now, I’m going to go ahead and include the jQuery script file and add script tags and a container to work with.

It’s probably important to add that we should never actually mix JavaScript and HTML in the same file. But, we’re going to go ahead and do it here for demonstration purposes.

jQuery comes stock with a handful of powerful AJAX commands. For now, we’re going to focus on the load command. The load command allows us to replace the HTML in a wrapped set with HTML that we’re pulling from another file on our website.

What we’re going to do is we’re going to want to wait until the DOM has loaded by using the ready command and then once the DOM has loaded let’s go ahead and select the console and pull in some HTML from a file called listitems.html. We haven’t actually created this file yet so let’s go ahead and do that.

Let’s go ahead and create an unordered list with the firstList class and we’ll go ahead and copy and paste that and create a second list.

Alright, so we can imagine this as a side navigation or something along those lines. Let’s go back to our index.html file and we’re ready to run.

So, let’s load the page and as you can see it loads in the contents of the listitems.html file.

Let’s go ahead and add a button for more interactivity. We’ll go ahead and name it actionButton. Next, we’ll want to bind the click event of the action button and execute our AJAX load.

Let’s go ahead and reload the page. We have our click me button. We click it and it loads the content.

One of the reasons the load command is so powerful is that it allows us to define a selector. We can actually use a selector to select a subset of content from the listitems.html file. An example would be if we wanted to just select the content from the second list. We could tell it that we want to select anything with the class secondList.

So, we’ll save it and load. Click, and we only pull back the second list. We can drill down even deeper by only selecting the even list items.

As you can see we were able to accomplished a lot with very little code. But, we’re just beginning to scratch the surface of the functionality that jQuery provides for AJAX interactions.

And with that we conclude the first screencast on AJAX with jQuery. My name is Shawn McCool. Thanks for watching.