JQuery
… and AJAX
76
JQuery
• A collection of predefined JavaScript objects and methods that are free to use and link to.
• http://jquery.com/
• jQuery is one of many available libraries that provide functions for
manipulating the web page
• “Fairly good” performance
• Cleans JS code
77
JQuery
– Two ways to access it:
-Download it and reference:
(or in the same directory)
-Reference the online page:
78
JQuery
Much of JQuery relies on the structure of the HTML to operate:
79
Example: Modifying DOM appearance
80
Example: Creating new nodes
81
Example: Removing nodes
82
AJAX
Best Part of JQuery
83
AJAX
Intended Action
84
AJAX
The problem
85
AJAX
The solution
86
How it works in detail
• User types or clicks: need an event handler • UI requests some action: need a JS function • Send message to server: need AJAX code
• Server eventually replies: need callback JS
• UI shows it finished: update element
• Should show the result to the user
87
A very simple web page and Ajax call
users.json
[
{ “fname”:”bobby”,
“lname”:”chan”,
“age”:23 },
{ “fname”:”jane”, “lname”:”doe”, “age”:45
} ]
88