an introduction to ajax programming
DESCRIPTION
TRANSCRIPT
![Page 1: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/1.jpg)
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/us/
An Introduction to Ajax Programming
Dr. Harry Chen
CMSC 491S/691S
March 5, 2008
![Page 2: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/2.jpg)
Agenda
What’s Ajax? (revisit)JavaScript in 10 minutesDOM and XMLHttpRequestProgramming Ajax with MochikitAjax PitfallsAjax in gnizr
![Page 3: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/3.jpg)
Ajax
Asynchronous JavaScript And XMLThe idea is to enable interactive Web
pages without requiring the browser to refresh.
Browser
JavaScriptcode
Web Server
“Give me some data”
“Here, data”
Modify the page content, without refreshing the page
![Page 4: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/4.jpg)
Ajax vs. tradition HTTP paradigm
In the tradition HTTP world Every request results in a new page loading Dynamic pages are created on the server-side Data, format and styling are done on the server
In the Ajax world The result of an Ajax call may only change a small parts
of an existing HTML page Server sets up the page structure, JavaScript code
performs the content creation Data, format and styling are done via JavaScript (CSS
and XHTML)
![Page 5: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/5.jpg)
Ajax is a 3-Legged Stool
XHTML JavaScript
CSS
Ajax
Adopted from Simon Wilson: http://www.slideshare.net/simon/how-to-make-ajax-work-for-you
![Page 6: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/6.jpg)
JavaScript in 10 minutesExamples adopted from http://www.w3schools.com/js/js_examples.asp
![Page 7: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/7.jpg)
Say “hello world”
What’s ‘document’?
![Page 8: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/8.jpg)
Write into HTML <body/>
‘document’ is a predefined JavaScript variable that represents the entire HTML document.
You can read from and write to the current document via this ‘document’ variable.
![Page 9: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/9.jpg)
Loading JavaScript code
Two ways to load your JS code Inline within the same HTML document From a separate file on the server
e.g., Replace ‘xxx.js’ with http://path/to/myprogram.js
![Page 10: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/10.jpg)
Define variables
![Page 11: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/11.jpg)
Define Array and Associative Array
![Page 12: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/12.jpg)
Function
![Page 13: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/13.jpg)
Assign Function to a Variable
In JavaScript, you can assign function to a variable.
![Page 14: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/14.jpg)
Additional Resource
JavaScript Tutorial http://www.w3schools.com/js/
PPK on JavaScript http://www.quirksmode.org/
I love it!
![Page 15: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/15.jpg)
DOM and XMLHttpRequest
![Page 16: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/16.jpg)
DOM
Document Object ModelAll XHTML doc are XML docDOM is a process-model for XML
For reading and writing XML doc
We can use DOM to manipulate XHTML
![Page 17: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/17.jpg)
DOM Tree
http://flickr.com/photos/13571173@N00/411653343/
![Page 18: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/18.jpg)
An XML DOM (not XHTML)
<bookstore> <book category=“c1”> <title lang=“en”>Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book></bookstore>
![Page 19: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/19.jpg)
HTML DOM Tree – an example
![Page 20: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/20.jpg)
JavaScript DOM
Browser’s JS engines provides predefine HTML DOM objects
![Page 21: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/21.jpg)
‘Document’ DOM
Predefined objects come with predefined properties and methods
http://www.w3schools.com/htmldom/dom_obj_document.asp
Watch out for browser support!
![Page 22: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/22.jpg)
DOM Manipulation
Operations for manipulating DOM objects are similar in different programming langauges – e.g., Java, PHP and JavaScript.
Tutorial http://www.w3schools.com/dom/default.asp
![Page 23: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/23.jpg)
XMLHttpRequest
Is a specification (see W3C doc)Defines an API that provides scripted
client functionality for transferring data between a client and a server
Browser
JavaScriptcode
Web Server
“Give me some data”
“Here, data.”
Modify the page content, without refreshing the page
Done via XMLHttpRequest
![Page 24: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/24.jpg)
Clarification
Use XMLHttpRequest to send and receive data from servers via HTTP
Data sent and received can be any text format, not just XML.
Works over HTTP and HTTPS
http://www.w3.org/TR/XMLHttpRequest/
![Page 25: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/25.jpg)
Fetch XML Data from the Server
http://www.w3.org/TR/XMLHttpRequest/
![Page 26: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/26.jpg)
Send data using XMLHttpRequest
http://www.w3.org/TR/XMLHttpRequest/
![Page 27: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/27.jpg)
Common Problems with DOM and XMLHttpRequest
![Page 28: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/28.jpg)
XMLHttpRequest Cross-browser Issues
Most browsers support the standard implementation, but some provide extra support that others don’t. Firefox implements standard and more IE implements just the standard
![Page 29: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/29.jpg)
XMLHttpRequest Creation
Creating an XMLHttpRequest object is done differently depending on the browser.
Checks which browser the client is using!
Crazy!
![Page 30: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/30.jpg)
DOM Cross-browser issues
DOM API differs from browser to brower.
Remember this chart?
![Page 31: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/31.jpg)
Get Node Value – FF vs. IE
![Page 32: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/32.jpg)
Additional Reading
AJAX - Common Pitfalls http://grover.open2space.com/node/92
![Page 33: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/33.jpg)
Ajax Programming with Mochikit
![Page 34: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/34.jpg)
JavaScript Libraries
To make JavaScript developer more productive, many JS libraries have been created. MochiKit I prefer; light-weight and simple jQuery Yahoo! UI library Prototype Script.aculo.us
![Page 35: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/35.jpg)
MochiKit
A collection API that simplify JavaScript programming “Makes JavaScript suck a bit less”
http://www.mochikit.com
![Page 36: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/36.jpg)
Load MochiKit
All API can be loaded from a single file
<script type="text/javascript" src="MochiKit.js"></script>
![Page 37: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/37.jpg)
What does MochiKit provide?
Ajax programmers look here!
![Page 38: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/38.jpg)
Fetch JSON Data from the Server
The location of the data.
Instantiate a function for making the call.
Define how we want to handle the “response”.
Actually makes the call.
![Page 39: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/39.jpg)
What we didn’t do!
We didn’t have to create the XMLHttpRequest object ourselves.
Don’t have to worry about those cross-browser issues.
We don’t have to deal with HTTP methods -- “PUT”, “GET” etc.
![Page 40: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/40.jpg)
Additional Reading
Reading MochiKit’s doc for How to manipulate DOM How to change CSS style How to deal with asynchronous events How to enable Drag and Drop How to exploit JavaScript functional and OO
programming
![Page 41: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/41.jpg)
Ajax Pitfalls
![Page 42: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/42.jpg)
Ajax Programming Issues
Breaking the back button
Not giving immediate visual cues for clicking widgets “Did I click?”, “I thought I have clicked”
![Page 43: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/43.jpg)
Data loading issues
Loading… Please wait… (after 3 secs)I’m still loading. Please wait… (after 5
secs) I’m still loading. Please wait.. (after 30
secs)User: forget you. I’m leaving.
![Page 44: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/44.jpg)
JavaScript Code Loading Issue
Too much JavaScript code can slow down the performance the client browser.
Only use JavaScript and Ajax when it is necessary.
More code != Better program
![Page 45: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/45.jpg)
Search Crawler Issue
Text content rendered by JavaScript is not accessible to search crawler.
Empty page?
![Page 46: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/46.jpg)
Accessibility
Not all screenreaders are built to work with Ajax applications.
http://www.sitepoint.com/article/ajax-screenreaders-work
![Page 47: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/47.jpg)
Summary
Ajax programming can make Web pages to be more interactive and responsive.
XHTML, CSS and JavaScript are the key components Ajax
Ajax uses XMLHttpRequest object to send and receive data
Study Ajax Pitfalls can help you to build more effective Mashup and Web 2.0 apps.
![Page 48: An Introduction to Ajax Programming](https://reader033.vdocument.in/reader033/viewer/2022061300/54c823084a795919758b4581/html5/thumbnails/48.jpg)
Ajax Programming in gnizr