AJAX retrieves data from a server-side program. The program on the server responds when your JavaScript program calls it. The server-side program can do whatever it is that server-side programs do—retrieve data from a database, return content, perform math, or do whatever is required. For AJAX to work, the server program needs to exist in the same domain as the JavaScript that calls it. This means that, from the JavaScript program written for this chapter, you can’t call a server program on my website using an AJAX method.

The web operates using a protocol named Hypertext Transfer Protocol (HTTP), which is defined primarily by Request for Comments (RFC) number 2616 (http://www.rfc-editor.org/rfc/rfc2616.txt). The HTTP standard defines several methods for interacting with a server. These methods are used to send and retrieve data between the client (typically, the web browser) and the server (typically, Apache but also Microsoft Internet Information Services and others).

Two methods you see (and use) every day are the GET method and the POST method. When you request a webpage in your browser, the browser sends a GET request to the server in your browser’s address bar. For most webpages, many more additional GET requests are sent to the server for each additional resource like images, JavaScript, and CSS. The server responds to each and every one of these GET requests with a status code and the result of the request, such as the JavaScript or image file itself.

The POST method is frequently used when working with web forms. The POST method sends the data from the web form back inside of the request itself rather than as part of the URL, as would be the case with a form that uses the GET method.

All of this information ties directly into programming JavaScript and AJAX. When programming AJAX, you need to create an HTTP connection using JavaScript and then send a request using either GET or POST to interact with a server program. It might sound complex, but the difficulty has largely been solved with jQuery. The next section shows how to create an AJAX request with JavaScript. Later in the chapter, you’ll see more complex examples using jQuery.

As part of this chapter, I’ll show a simple server-side program in both Microsoft Visual Basic .NET for those running Microsoft Visual Studio and in PHP as well. You’ll be able to use that program for the examples in this chapter. Setting up a web server is beyond the scope of this book. However, Visual Studio includes a development server that will be used for the examples in this chapter and throughout the book. If you don’t have Visual Studio, I recommend obtaining an Apache installation, which can run on Windows, Linux, or Mac. Another option is to use a hosting provider that offers PHP. These providers usually offer free setup and cost less than $5 a month.

This section shows how to build a simple server program. A server program is necessary when working with AJAX. This program will be used for the initial example in this chapter, and you’ll change it as you follow other exercises in this chapter. This program is an ASP.NET page that simply echoes a few values back and can be found as WebForm1.aspx in the companion code. I’ll also show an example of the same code in PHP.

Figure 6-4. WebForm1.aspx file viewed through the web browser.

With this code built, you now can create an AJAX implementation that runs on your local development computer.

PHP Example

If you are using PHP, here’s the source file to create a similar server program using PHP. This code can be found as webform1.php in the companion code:

<?php

echo "Maple|Pine|Oak|Ash";

?>

Determine Your Development Server Port

Visual Studio creates a local development server that you use seamlessly when developing and running your applications locally. Visual Studio chooses a port for the server to run on, aside from the standard HTTP port 80. For the examples in the book, you need to find out what port your local server is using. To do so, open your StartHere project and select the StartHere project within Solution Explorer. The Project Properties pane is displayed in the lower right corner. Within that Project Properties pane, shown in Figure 6-5, there is a property called URL.

Figure 6-5. The port chosen by Visual Studio on my computer is 49214, but yours will likely be different.

Copy that URL, especially noting the port. In the example, my local server is using port 49214 and therefore that’s the URL I’ll use throughout the examples in this chapter. However, there’s only a 1 in 65,536 chance that you’ll share that same port. Therefore, you need to change the URL in any examples to match your value.

Also, if you’re running a regular web server, such as Apache, you’ll likely be using the standard port 80 for communication. Either way, you need to update the URLs to match yours, unless you happen to be using port 49214.

jQuery defines specific methods for exchanging data with a server. This means you don’t need to set up and configure an XMLHttpRequest object or worry about the method used and so on. The two methods examined in this section are get() and post(). Both get() and post() are shortcut functions to the overall ajax() function in jQuery.

Using the get() and post() Functions

The get() and post() functions accept several arguments, including the URL to use, any data to be passed to the server program, what to do with the returned data, and the type of data to be returned. Here’s a simple example using get(). This code can be found as basicindex.html and basicjs.js in the Chapter 6 companion content.

$.get('/WebForm1.aspx', function(resp) {
    alert("Response was " + resp);
});

This get() function calls a file named WebForm1.aspx, retrieves the data, and then sends that response to the screen through an alert, shown in Figure 6-6.

Figure 6-6. Retrieving an AJAX-based alert from a server-side program using jQuery’s get() method.

Here’s a simple example using post():

$.post('/WebForm1.aspx', function(resp) {
    alert("Response was " + resp);
});

The magic happens when you start sending data into the server programs and then do complex JavaScript operations with that returned data.

http://www.contoso.com?zipCode=54481

This exercise shows how to build elements of a web form using AJAX. It uses a server-based program to retrieve data and display it back on the page. This exercise assumes that you’ve completed the previous exercise for a server program to display four names of trees found in my yard. This code can be found as inter.html and inter.js in the companion content.

Figure 6-7. Creating form elements with AJAX.

This exercise retrieved the names of trees from a server program and used that data to build check boxes on a form. I’ll examine the JavaScript and jQuery used.

The first thing in external.js is a call to the ready() function, as shown in the following code block, so that the code will be executed after the DOM is available. If this isn’t wrapped inside of the ready() function, there’s a good chance that the JavaScript will execute prior to all of the necessary form elements being available, which results in a mess indeed.

$(document).ready(function () {

The get() function, shown next, is called to create a GET request to the server with the URL /WebForm1.aspx. The response is then fed into an anonymous function that I defined.

$.get('/WebForm1.aspx', function (resp) {

First the function splits the response, where it finds the pipe (|) character. Delimiting my source data with the pipe character makes it easy to split it like this. The results of that split are placed in a variable called splitResp:

var splitResp = resp.split("|");

Because the splitResp variable will be used in a loop, the length of the splitResp array is set next into a variable called splitRespLength. Note that this isn’t strictly necessary, but it does provide an ever-so-slight performance improvement:

var splitRespLength = splitResp.length;

Next, a for loop is created. This is the heart of the code and where each form element is created:

for (var i = 0; i < splitRespLength; i++) {

This line, split up over three lines, appends an <input> element to the label with id treeNameLabel. The for loop structure seen here is the same as previously seen throughout the book. The addition here is the jQuery append() function, which builds and places HTML inside of the selected element:

    $("#treeNameLabel").append('<input type="checkbox"' +
            'name="treeName" value="' + splitResp[i] +
            '">' + splitResp[i] + '<br />'),
}

Finally, the functions are closed:

    });
});

Later in this chapter, you’ll see how to send data into a server program and retrieve the results using AJAX.

So far, you’ve seen what happens when an AJAX call works. Unfortunately, calls to server programs don’t always work. This is especially true when you send data into the program, but also it could be a problem created by something as simple as the URL being incorrect or a bad Internet connection. This section looks at the simple and easy error handling available as part of the get() and post() functions in jQuery.

As previously stated, the get() and post() functions are shortcuts to the ajax() function. The ajax() function defines several additional parameters that aren’t defined in the shortcut get() and post() functions. Of note is an error-handler option. However, that option is also accessible by both get() and post() as well, through the use of the error() function. The error() function is chained as part of the call to get() or post() and defines what to do when an error is encountered. Example time!

jQuery includes functions to retrieve JSON from a server as well as functions to parse and work with JSON, thus making it the preferred data-exchange format for nearly all AJAX interactions.

The next exercise converts the previous exercise’s code into JSON format, both on the server side and the JavaScript client side. This code can be found as getjson.html and getjson.js in the companion content, and the code ties to the server program getjson.aspx in the companion content.

Aside from the server-side program changes to send JSON-formatted data, the only substantive changes are within external.js. In that file, the get() function is changed to getJSON(), and the next change removes the code to split the response and loop using a for loop. Instead, the jQuery each() function is used to iterate through each of the results:

$.each(resp["Trees"], function(element,tree) {

Within the each() function, the same HTML code is built, with the change being that instead of the for loop variable, the variable is now named tree:):

    $("#treeNameLabel").append('<input type="checkbox"' +
    'name="treeName" value="' + tree +
    '">' + tree + '<br />'),
})

Other than those changes, external.js remains the same, as does index.html.

So far, you’ve seen examples of both get() and post() requests, and now you’ve seen getJSON(). However, you’re still missing a piece of the puzzle: how to send data to the server with AJAX.

While getJSON() is fresh in your mind (and mine too hopefully), I’ll show an example using that function. jQuery enables you to send data as an extra parameter, which is how you’ll see it here. However, you can also append the data to the URL itself. Data is passed as the second parameter to the getJSON() function, and the getJSON() function automatically appends it to the URL as the first argument. For example, if you assume that a server program named convertTemp.aspx expects input data indicating the current temperature, the getJSON() call looks like this:

$.getJSON('convertTemp.aspx','curTemp=73',function(resp) {

Data can be sent as a string, as you see here, or as a map, like so:

$.getJSON('convertTemp.aspx', { curTemp: 73 }, function(resp) {

Both this and the next example with post() use a new server program. You’ll use this program to build a web application to convert temperature between Fahrenheit and Celsius. Note you need to make a slight change to this program to use it with post(), and that will be shown later. This particular code is found as tempconvert.html and tempconvert.js in the companion content, and the server program is called tempconvert.aspx.

The JavaScript for this exercise looked like this:

$(document).ready(function () {
    $('#myForm').on('submit', function () {
        var inputTemp = $('#temp').val();
        var inputTempType = $('#tempType').val();
        $.getJSON('/WebForm1.aspx',
        { "temp": inputTemp, "tempType": inputTempType },
            function (resp) {
            $("#result").text(resp["Temp"] + " " + resp["TempType"]);
        }).error(function () {
            $("#result").text('An unknown error has occurred.'),
        });
        return false;
    });
});

The first portion of this JavaScript attached a function to the submit event of the HTML form. This was explained in Chapter 5, as were the next two lines, which gather the values of the form elements temp and tempType.

Next, the getJSON() function was called.

$.getJSON('/WebForm1.aspx',

The main difference here is that two data parameters were sent in as part of the getJSON() function call:

{ "temp": inputTemp, "tempType": inputTempType },

Next, the response was parsed and an error handler also was used:

function (resp) {
    $("#result").text(resp["Temp"] + " " + resp["TempType"]);
}).error(function () {
    $("#result").text('An unknown error has occurred.'),
});

And finally, the default form submission behavior was prevented by returning false within the submit event:

return false;

Using post() is sometimes preferred to send larger amounts of data than can be handled using the query string GET method. This section shows an example of using post() to send data to a server program and, just as importantly, how to inform the post() method what type of data will be returned. In this case, JSON data will be returned and post() needs to be told that explicitly, as you’ll see. You can find the code as tempconvert-post.html and tempconvert-post.js in the companion content, and the server program is tempconvert-post.aspx.

This exercise showed how to use the post() function to send data to a server and retrieve JSON-formatted results. The first of two substantive changes to the JavaScript used here was to change from getJSON to post:

$.post('/WebForm1.aspx',

The second change, and the one that’s sometimes more difficult to place correctly, is the addition of the dataType parameter. That was accomplished with the string json, but that string needed to be placed after the success function, as you saw in the code. Getting all of the parentheses and braces placed correctly takes some practice and trial and error as well.

$.ajax({
type: "POST",
<other options here>