Your SlideShare is downloading. ×
0
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Intro to AJAX by Paul Davis
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to AJAX by Paul Davis

915

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
915
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Intro to AJAX by Paul Davis
  • 2. About Me <ul><li>Paul Davis </li></ul><ul><li>Kaosweaver </li></ul>
  • 3. What is AJAX? <ul><li>Asynchronous JavaScript And XML </li></ul><ul><li>AJAX is designed to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page's interactivity, speed, and usability. </li></ul>
  • 4. What is AJAX? (cont) <ul><li>AJAX uses a combination of: </li></ul><ul><li>XHTML (and HTML) </li></ul><ul><li>CSS </li></ul><ul><li>DOM JavaScript </li></ul><ul><li>XMLHttpRequest </li></ul><ul><li>XML, JSON, EBML, text, etc </li></ul><ul><li>AJAX is not a technology in itself, but a name for a group used together. </li></ul>
  • 5. Why AJAX? <ul><li>The main reason AJAX is being explored and used today (after the legacy browsers have all but been relegated to obscurity) is overcoming the page loading requirements of the HTML/HTTP web pages. </li></ul><ul><li>Web pages are “fire once” and not like a native application on a machine which can change according to user interaction. </li></ul>
  • 6. Why not Flash? <ul><li>It is true, Flash did (and does) interact with the user and can stream content as well as interface changing and all. The reasons against Flash vs AJAX: </li></ul><ul><li>Flash requires a plug in </li></ul><ul><li>Flash has a much larger footprint </li></ul><ul><li>Flash is more complex to develop in </li></ul><ul><li>Flash would take over the entire interface </li></ul>
  • 7. AJAX Advantages <ul><li>Comes with all modern browsers </li></ul><ul><li>Better user interface, responds to user interaction. </li></ul><ul><li>Low bandwidth, even lower then regular HTML/HTTP server applications </li></ul><ul><li>Separation of data, format, style and function (AJAX coding doesn't require this, but is makes it a whole lot easier to do when it is separated) </li></ul>
  • 8. AJAX Disadvantages <ul><li>Harder/impossible to bookmark AJAX updated page content. </li></ul><ul><li>Network latency delays impact the application's responsiveness. </li></ul><ul><li>Search engines won't crawl AJAX generated content. </li></ul><ul><li>Relies upon JavaScript, which some users turn off. </li></ul><ul><li>Browser compatibility issues </li></ul>
  • 9. AJAX Options <ul><li>Frameworks </li></ul><ul><ul><li>Direct AJAX frameworks </li></ul></ul><ul><ul><li>AJAX component frameworks </li></ul></ul><ul><ul><li>Server driven AJAX frameworks </li></ul></ul><ul><li>Create your own </li></ul><ul><ul><li>Smaller code </li></ul></ul><ul><ul><li>Specific code </li></ul></ul><ul><ul><li>Maintainable code </li></ul></ul><ul><ul><li>Less apt to be hacked </li></ul></ul>
  • 10. AJAX JavaScript Frameworks <ul><li>Apache XAP – for large applications </li></ul><ul><li>Clean AJAX – message based engine </li></ul><ul><li>Dojo Toolkit – component based </li></ul><ul><li>Helmi – Rich Internet Application tools </li></ul><ul><li>Jmaki – lightweight & stubs for SSC </li></ul><ul><li>Jquery – lightweight browser package </li></ul><ul><li>Mootools – compact, modular OOP </li></ul><ul><li>prototype – harvested toolkit </li></ul><ul><li>Spry – Adobe's ajax library </li></ul>
  • 11. Other AJAX frameworks <ul><li>WT, C++ webtoolkit </li></ul><ul><li>DWR, Java remoting toolkit </li></ul><ul><li>Echo, pure Java toolkit </li></ul><ul><li>Google web toolkit – widgets w/goggle </li></ul><ul><li>ASP.NET Ajax – was Atlas, MS's stuff </li></ul><ul><li>Zope 3 – Python framework </li></ul><ul><li>Symfony – PHP framework </li></ul><ul><li>CFAjax – Cold Fusion framework </li></ul>
  • 12. How does it work? <ul><li>A request is made to communication between the browser and the server via the XMLHttpRequest </li></ul><ul><ul><li>IE vs the world... </li></ul></ul><ul><li>A response is received through the onreadystatechange and when the readyState property is 4 </li></ul><ul><li>A request is made which returns the data from the server to the browser </li></ul>
  • 13. What about the .... <ul><li>The fancy window affects of stuff moving, drag and drop, flashing, animation, etc is all merely a flashback to DHTML from the 90's, but repackaged and called AJAX. Most of it is all client (browser) side and doesn't depend on the server to browser communication to function. This is the primary reason I wrote my own AJAX code. </li></ul>
  • 14. What can you do with it? <ul><li>Form validation </li></ul><ul><li>Instant search updates </li></ul><ul><li>Content management on the fly </li></ul><ul><li>Check in stock items </li></ul><ul><li>Image galleries </li></ul><ul><li>Instant chat </li></ul><ul><li>Email, maps, photo storage utility (gmail, goggle maps, flickr) </li></ul>
  • 15. Leverage it for your clients <ul><li>Form validation that tests the input verse the server side requirements for the field: </li></ul><ul><li>Check email addresses to see if the client already signed up. </li></ul><ul><li>Check a date to see if a reservation would be available </li></ul><ul><li>Check a zip code to see if it is valid. </li></ul><ul><li>Give the visitor feedback before the form is submitted. </li></ul>
  • 16. Make search a snap <ul><li>Have the results change as the user entered information. </li></ul><ul><li>Have the product/services list change when the user selects categories. </li></ul><ul><li>Use multiple search criteria to make the results meaningful. </li></ul><ul><li>Give the user the power to change the order of the results to suit their needs </li></ul>
  • 17. Instant CMS <ul><li>Create a login for your client and then have an edit link on all of the editable areas – they click on it and the content is replaced with a text area they can edit the content, they submit it and it is updated on the spot. </li></ul>

×