Lab 12: Ajax
References
Standards & tutorials
- XMLHttpRequest working draft at w3c: http://www.w3.org/TR/XMLHttpRequest/
- an ajax tutorial from mozilla developer center https://developer.mozilla.org/en/AJAX/Getting_Started
- ajax using libraries: prototype: http://api.prototypejs.org/ajax/ajax/request/ and jQuery: http://api.jquery.com/category/ajax/
- json format http://www.json.org/
Tools
- firefox firebug http://getfirebug.com/
- chrome developer tools http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial
- opera dragon fly http://www.opera.com/dragonfly/
- IE 8 developer tools http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
Practice
Before trying your hand at these exercises, read the course and the examples at http://www.infoiasi.ro/~busaco/teach/courses/web/web-film.html#s13.
Also, think of implementing these exercises in the context of your own project, where they match purpose (or proposed feature can be slightly adjusted to fit).
Tags suggest (ajax)
Continuing the exercise TagsSuggest in lab 8, get the suggestions to show to the user from the server, using Ajax. The strategy is that every time the user types something in the input ("keyup" event), an AJAX request is sent to the server with the value of the input and the server sends back a list of matching tags, which are then loaded inside the suggestions panel.
Tags suggest (JSON)
For the exercise above, return the results from the server in JSON format, process them and use them as an object.
Tags suggest (with libraries)
Rewrite the TagSuggest exercice above, using one of the JS Libraries (prototype, or jQuery or other).
Using external js API *
Find and experiment with an external service available as a JS API (maps services in general, google search API, google calendar API, etc -- more complete list at programmable web js APIs). How do they work? Keep an eye on the firebug's Net tab (chrome Resources tab, or similar for other tools) and see what are the ajax requests, to where, and what's the data they bring in.
Writing a Ajax API for your data *
Write an API for other applications to be able to use the data of your project directly in Javascript.