Home > 2010 Fall DPS907 > jQuery introduction for Seneca SCS students

jQuery introduction for Seneca SCS students

October 13, 2010 Leave a comment Go to comments

This post is an introduction to jQuery, for Seneca School of Computer Studies students. We will build upon your past knowledge and experience in JavaScript.

 

.

Locating help documentation

Your professor suggests that you study the following jQuery documents before continuing:

Wikipedia jQuery article

jQuery web site

jQuery In Action, second edition, sample Chapter 1 (PDF)

Wikipedia article on Ajax

Jesse James Garrett’s article on Ajax

.

What problem does jQuery solve?

jQuery makes it easier to perform a number of tasks in JavaScript, including two that we will learn more about in the next few classes:

  1. Interacting with web services
  2. Modifying the document object model

.

Interacting with web services

We often want to interact with a web service from a browser. We do this by using Ajax principles, where we can create and send requests from JavaScript, receive the response, and update the document. For the developer, this approach is modular and lightweight. For the user, the web page appears to update in a smooth and pleasing manner.

jQuery has the $.ajax() function. It enables us to create a request (GET or POST in all browsers, plus PUT and DELETE in most browsers). We can configure the request with settings and data, send the request, and receive the response data. Then, we can use JavaScript and/or jQuery methods to use the data for whatever purpose we want.

Working with JSON objects in JavaScript and jQuery is natural. Although it is possible to work with other formats, we will be using JSON as we learn about jQuery.

We will explore the following use cases today:

  • GET a collection
  • GET an entry in a collection
  • POST a new entry to the collection
  • PUT an update for an entry, and/or an entry property
  • DELETE an entry

These use cases will be tested with the professor’s Lab 2 implementation.

.

You need to be aware of something before we continue: In Lab 2, you built an ASP.NET Web Forms page that interacted with a WCF Data Service. The request data (i.e. the data that we were sending with the request) and the response data from the server was located in multi-line text boxes on the page. We treated the data as strings.

Today, when working with JavaScript and jQuery, we will treat the data as objects. This means that we must pay attention to an object’s representation. For example, to display Northwind employee entities, we must know the entity’s property names, and use the names in our code.

.

Modifying the document object model

From the jQuery introductory documentation, you should have learned that it provides an easy-to-understand, and easy-to-use way of modifying a web page’s document object model (DOM).

It builds upon, and takes advantage of, the existing structural (i.e. XHTML) and presentation (i.e. CSS) technologies, to identify, locate, and modify content. We’ll see that in today’s example.

Another jQuery advantage is that it provides a uniform application programming interface (API) to the DOM, no matter what browser is being used.

.

Built-in browser handling of Ajax and JSON

The browser’s JavaScript engine includes two technologies that make Ajax possible:

  1. The ability to send an asynchronous request to a web endpoint
  2. The ability to parse a response from the server

The first is provided by the XmlHttpRequest technology. It has been widely available since 1999, and was standardized soon after its release. Modern browsers offer a uniform API to this technology.

jQuery builds upon the native support with methods that provide convenient wrappers.

The second is provided by JSON.parse (see ECMA, Mozilla, or Microsoft documentation), and its companion JSON.stringify methods. These enable the consumption and creation of JSON.

jQuery uses this support if available, and provides its own implementation for older browsers.

.

Using our Lab 2 service to get a list of employees

In the following example, we will create a standard HTML page that can be hosted in any of the major browsers (IE, Firefox, Safari, Chrome). It will simply display selected properties from the Northwind employees entity collection.

Shout out: This example was adapted from a Shawn Wildermuth blog post theme.

The markup in the body of the page is simple and sparse. It essentially has only a div element, which has an id attribute.

JavaScript code in the page, with help from the jQuery library, will request data from the WCF Data Service that was created for DPS907/WSA500 Lab 2. It will then process the data, construct an HTML table element, and place it inside the div element.

There are a few things to know and do, to make this work. We discuss them below.

.

Link to (include) the jQuery library

You must link to the jQuery library in the head element of your page. There are two ways to do this.

If you have the jQuery library as part of your project, specify its path in the src attribute.

Alternatively, you can have a content distribution network (CDN) host and serve the library. Microsoft, Google, and others post the jQuery library on their CDNs. Use your favourite search engine to get the URI to the library you want to use, and specify its path in the src attribute.

.

Decide how you want to trigger the call to the web service, and call it

In our example, we have decided to call the web service after the page has finished loading. jQuery provides a convenient way to do this: call the “$(document).ready()” function, and pass it an argument. The argument is a call to another function, which gets the data (i.e. calls the web service).

We wrote the “getData()” function, and it is responsible for calling the web service. It uses the jQuery “$.ajax()” function, which takes an argument. The argument is a set of key-value pairs, enclosed in curly braces. Refer to the documentation for complete details.

Notable settings include the following:

  • The url – which is the URI of the web service
  • The type – which is GET, POST, PUT, or DELETE
  • The contentType – which sets the request’s relevant headers (works with dataType below)
  • The dataType – which sets the request’s relevant headers (works with contentType above)
  • Settings for “success” and “error”; we typically set their values so that they call another function

If the request succeeds, the data returned from the server is the first argument of a function that we declare/define in the setting. In our example, the function simply calls another function (“loadTable()”), and passes it the unwrapped data.

The “loadTable()” function constructs an HTML table with text strings. Interspersed among the table elements, the passed-in data is extracted, and placed in the table cells. See the example code, which is fully commented.

The key concept about the data is that it comes to us as a collection. In JSON, this is an array. We enumerate through the array, knowing that the array has employee entries/entities.

As an alternative to calling the web service when the page loads, you could decide to call it in response to some user interaction event (e.g. a button click) or other event in the page’s lifecycle. If this is what you want, you will code and prepare your markup to handle this functionality.

Please note that this is not the only way that the employee list can be displayed. This example showed a simple and straightforward way to do this, but it doesn’t take advantage of many jQuery features. Therefore, please do not assume that this is a canonical example – it’s not.

.

Summary

As you have learned, jQuery can be very useful to us. Your professor urges you to learn more about it, and begin using jQuery in your web development work.

.


 

Advertisements
Categories: 2010 Fall DPS907
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: