0
RIAjaxfied




   Rakshith
   16 Dec 2007



                                                        1
2006 Adobe Systems ...
Agenda

       Ajax Overview
       Sample Mashup Application
       Ajax Design Patterns
       Ajax Security
       Snea...
Ajax




     Ajax is a term surrounding the use of asynchronous HTTP requests initiated
     by JavaScript for the purpos...
Pre Ajax Era



Google was the first to build web applications on the Ajax lines




Google Suggest and Google Maps involv...
Ajax Is Here

“Ajax – A New Approach to Web Applications”, James Garret, February 2005


Google Suggest and Google Maps ar...
Traditional Web Application Model



    Web Browser
                                                        HTML, Images,...
Ajax Web Application Model



    Web Browser

                                                                      Web S...
AJAX Communication Techniques




       Hidden Frame Technique
       Hidden IFrame Technique
       XMLHttp




        ...
Hidden Frame Technique



                                 Web Browser

                                    Visible Frame
...
Hidden Frame Technique




<frameset rows=“100%,0” frameborder=“0”>
       <frame name=“displayFrame” src=“display.htm” no...
Hidden IFrame Technique



       IFrames were introduced in HTML 4.0
       IFrame is a frame that can be placed inside a...
XMLHttp

Microsoft introduced an ActiveX library called MSXML to provide support for XML on IE.
XMLHttp object in this lib...
XMLHttp Creation

On Internet Explorer
Var xmlHttp = new ActiveXObject(“Microsoft.XMLHttp”);
Versions:
MSXML2.XMLHttp
MSXM...
XMLHttp Usage

 •       Open function
         xmlHttp.open([httpmethod], [url], [async])


 •       readyState
         0...
XMLHttp Usage

         responseText
         Contains the response returned from the server

         Status
            ...
Advantages and disadvantages of XMLHttp

       The code is much cleaner and the intent of the code is more apparent.
    ...
JSON Data Format




                                                                17
2006 Adobe Systems Incorporated. A...
JSON – What?

       JavaScript Object Notation – Douglas Crockford
       JSON is a light weight data format based on the...
JavaScript Array and Object

JavaScript Array
Var aNames = [“Benjamin”, “Micheal”, “Scott”];


JavaScript Object
Var aCar ...
XML and JSON

<books>
       <book isbn=“000230”/>
       <book isbn=“000231”/>
</books>


{ books: [
       {isbn:’000230...
Advantages of JSON

       Light Weight though is less readable than XML
       To transform JSON data into a javascript o...
Ajax in Action

                                             The Google Map Mashup
                                       ...
Ajax Patterns

       Predictive Fetch
       Submission Throttling – Google suggest
       Periodic Refresh – Gmail
     ...
Ajax Security

       No inherent weakness in Ajax
       Ajax can consume XML, JSON or JavaScript by simple GET and POST ...
The Same Origin Policy




 Any page loaded from this origin may access, download, and interact with any
                 ...
Ways to get around Same Origin Policy

       Using the script tag
       <script src=“someotherdomain.com”>
       Using ...
How to get around it?

       JSON prefix


       Attach a security token with each request


       Check 3rd party scri...
EXTJS

                                                           http://www.extjs.com


                                 ...
29
2006 Adobe Systems Incorporated. All Rights Reserved.
Upcoming SlideShare
Loading in...5
×

Adobe® Corporate Template 2005

919

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "Adobe® Corporate Template 2005"

  1. 1. RIAjaxfied Rakshith 16 Dec 2007 1 2006 Adobe Systems Incorporated. All Rights Reserved.
  2. 2. Agenda Ajax Overview Sample Mashup Application Ajax Design Patterns Ajax Security Sneak peek into one of the popular Ajax frameworks 2 2006 Adobe Systems Incorporated. All Rights Reserved.
  3. 3. Ajax Ajax is a term surrounding the use of asynchronous HTTP requests initiated by JavaScript for the purpose of retrieving information from the server without unloading the page. 3 2006 Adobe Systems Incorporated. All Rights Reserved.
  4. 4. Pre Ajax Era Google was the first to build web applications on the Ajax lines Google Suggest and Google Maps involved only a single page that was never unloaded. 4 2006 Adobe Systems Incorporated. All Rights Reserved.
  5. 5. Ajax Is Here “Ajax – A New Approach to Web Applications”, James Garret, February 2005 Google Suggest and Google Maps are two examples of a new approach to web application that we at Adaptive Path have been calling Ajax. The name is the shorthand for Asynchronous JavaScript + XML and it represents a fundamental shift in what’s possible on the web. 5 2006 Adobe Systems Incorporated. All Rights Reserved.
  6. 6. Traditional Web Application Model Web Browser HTML, Images, CSS, JavaScript Web Server Data Database HTTP Query/ Request Data Request 6 2006 Adobe Systems Incorporated. All Rights Reserved.
  7. 7. Ajax Web Application Model Web Browser Web Server HTML, CSS Data Data User JavaScript Database Interface JavaScript Call HTTP Query/ Request Data Request 7 2006 Adobe Systems Incorporated. All Rights Reserved.
  8. 8. AJAX Communication Techniques Hidden Frame Technique Hidden IFrame Technique XMLHttp 8 2006 Adobe Systems Incorporated. All Rights Reserved.
  9. 9. Hidden Frame Technique Web Browser Visible Frame JavaScript Call Web Server JavaScript Call Web Hidden Frame Page Data Database Request Query/ Data Request 9 2006 Adobe Systems Incorporated. All Rights Reserved.
  10. 10. Hidden Frame Technique <frameset rows=“100%,0” frameborder=“0”> <frame name=“displayFrame” src=“display.htm” noresize=“noresize” /> <frame name=“hiddenFrame” src=“about:blank” noresize=“noresize” /> </frameset> 10 2006 Adobe Systems Incorporated. All Rights Reserved.
  11. 11. Hidden IFrame Technique IFrames were introduced in HTML 4.0 IFrame is a frame that can be placed inside a non-frameset HTML page. <iframe src=“about:blank” name=“hiddenFrame” width=“0” height=“0” frameborder=“0”> 11 2006 Adobe Systems Incorporated. All Rights Reserved.
  12. 12. XMLHttp Microsoft introduced an ActiveX library called MSXML to provide support for XML on IE. XMLHttp object in this library gained popularity. XMLHttp – Enabled developers to initiate HTTP requests from anywhere in the application. Firefox, safari and opera browsers soon duplicated the functionality of XMLHttp by enabling the creation of XMLHttpRequest objects. 12 2006 Adobe Systems Incorporated. All Rights Reserved.
  13. 13. XMLHttp Creation On Internet Explorer Var xmlHttp = new ActiveXObject(“Microsoft.XMLHttp”); Versions: MSXML2.XMLHttp MSXML2.XMLHttp3.0 … MSXML2.XMLHttp5.0 On other browsers Var xmlHttp = new XMLHttpRequest(); zXML Library (www.nczonline.net/downloads) Var xmlHttp = zXmlHttp.createRequest(); 13 2006 Adobe Systems Incorporated. All Rights Reserved.
  14. 14. XMLHttp Usage • Open function xmlHttp.open([httpmethod], [url], [async]) • readyState 0 – uninitlialized 4 – complete • onreadystatechange function Defines the callback handler when the ready state changes. • Send function sends the request by taking an optional request body parameter 14 2006 Adobe Systems Incorporated. All Rights Reserved.
  15. 15. XMLHttp Usage responseText Contains the response returned from the server Status Contains the http status code of the response Var xmlHttp = zXmlHttp.createRequest(); xmlHttp.open(“GET”,”test.cfm”, true); xmlHttp.onreadystatechange = function () { If(xmlHttp.readyState == 4) { alert(“Got the response, response is:” xmlHttp.responseText); } }; xmlHttp.send(null); 15 2006 Adobe Systems Incorporated. All Rights Reserved.
  16. 16. Advantages and disadvantages of XMLHttp The code is much cleaner and the intent of the code is more apparent. No browser history record of the calls that were made. Particular browser settings do not allow ActiveX controls. 16 2006 Adobe Systems Incorporated. All Rights Reserved.
  17. 17. JSON Data Format 17 2006 Adobe Systems Incorporated. All Rights Reserved.
  18. 18. JSON – What? JavaScript Object Notation – Douglas Crockford JSON is a light weight data format based on the subset of the JavaScript syntax. Based on array and object literals of JavaScript. 18 2006 Adobe Systems Incorporated. All Rights Reserved.
  19. 19. JavaScript Array and Object JavaScript Array Var aNames = [“Benjamin”, “Micheal”, “Scott”]; JavaScript Object Var aCar = { “color” : “red”, “doors” : 4 }; 19 2006 Adobe Systems Incorporated. All Rights Reserved.
  20. 20. XML and JSON <books> <book isbn=“000230”/> <book isbn=“000231”/> </books> { books: [ {isbn:’000230’} ,{isbn:’000231’} ] } 20 2006 Adobe Systems Incorporated. All Rights Reserved.
  21. 21. Advantages of JSON Light Weight though is less readable than XML To transform JSON data into a javascript object, all that has to be done is: var carInfo = eval(“(” + jsonData +“)”); Server side tools are available for each server side technology Ex: JSON-PHP for PHP, CFJSON library for ColdFusion, json-py for python, etc 21 2006 Adobe Systems Incorporated. All Rights Reserved.
  22. 22. Ajax in Action The Google Map Mashup Application 22 2006 Adobe Systems Incorporated. All Rights Reserved.
  23. 23. Ajax Patterns Predictive Fetch Submission Throttling – Google suggest Periodic Refresh – Gmail Multi Stage Download 23 2006 Adobe Systems Incorporated. All Rights Reserved.
  24. 24. Ajax Security No inherent weakness in Ajax Ajax can consume XML, JSON or JavaScript by simple GET and POST without any middleware tier. Incoming data is injected into the current DOM context dynamically. 24 2006 Adobe Systems Incorporated. All Rights Reserved.
  25. 25. The Same Origin Policy Any page loaded from this origin may access, download, and interact with any other resource from the same origin. 25 2006 Adobe Systems Incorporated. All Rights Reserved.
  26. 26. Ways to get around Same Origin Policy Using the script tag <script src=“someotherdomain.com”> Using the image tag <img src=“sometotherdomain.com”> 26 2006 Adobe Systems Incorporated. All Rights Reserved.
  27. 27. How to get around it? JSON prefix Attach a security token with each request Check 3rd party scripts for malicious code Google Caja – A source-source translator for securing JavaScript http://code.google.com/p/google-caja/ 27 2006 Adobe Systems Incorporated. All Rights Reserved.
  28. 28. EXTJS http://www.extjs.com One of the cool Ajax Frameworks out there 28 2006 Adobe Systems Incorporated. All Rights Reserved.
  29. 29. 29 2006 Adobe Systems Incorporated. All Rights Reserved.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×