Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

jQuery Simplifies Your AJAX/JavaScript Development : Page 3

Discover the power and simplicity of the popular AJAX/JavaScript framework jQuery.


advertisement
CSS and DOM Manipulation
jQuery provides excellent support for manipulating the DOM representation of HTML content and for CSS properties, qualities that make jQuery very simple and concise to program. In fact, jQuery's support for CSS properties, such as attribute-based selectors, exceeds the CSS support in most browsers. However, lack of support from browsers does not preclude jQuery from functioning properly or from accessing CSS elements in a standards-compliant fashion.

Here are some examples of how jQuery integrates DOM with organic support for CSS:

Adding a paragraph to an element with an ID sample:



$("#sample").append("<p>Some paragraph.</p>");

Hiding a div:

$("div#someSection").hide();

Adding a class to a first paragraph:

$("p:first").addClass("highlighted");

Adding text to a paragraph:

$("p").html( "Some text") );

Color-interleave the odd table rows of all tables (a.k.a., "zebra" coloring):

$('tr:odd').addClass('odd');

As you can see, XHTML and CSS elements are referenced using familiar CSS and XHTML syntax—requiring no framework-specific knowledge. In addition, you can fully manipulate HTML/CSS elements referenced via jQuery, including hiding, removing, adding, and altering content, in an equally simple and intuitive fashion.

Making Asynchronous Calls
Being an AJAX framework, jQuery supports a variety of methods for making asynchronous calls to server services. In addition to other, more generic methods, jQuery supports the two most common HTTP methods for making of AJAX calls: POST and GET. The following is a GET call to a server-side resource in the simple jQuery style:

$.get("sample.asp", { itemId: "123" }, someCallbackFunction );

Notice the three parameters: URL, a parameter, and a callback to a function someCallbackFunction that will process the results from an AJAX call as a string.

jQuery supports another style of the GET method called getJSON. While making a GET call to the server, getJSON interprets the string response from the server as a JSON (JavaScript Object Notation) object and passes the results into a callback function as the JSON object, all behind the scenes.

$.getJSON("sampleJSON.asp", { itemId: "123" }, someCallbackJSONFunction );

The syntax for POST calls is almost identical. The only difference is in function name; the parameters are the same.

$.post("samplePostingResource.asp", { itemId: "123" }, somePostProcessingCallbackFunction );

In addition, jQuery provides a generic load() function for invoking server-side resources with the same syntax but with greater flexibility. It also offers a large set of additional, specialized functions for finer-grained AJAX processing (e.g., ajaxStart, ajaxSend, and ajaxSuccess).



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap