; Ajax
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

Ajax

VIEWS: 7 PAGES: 25

  • pg 1
									Cloud Computing Lecture #7
Introduction to Ajax


                                                        Jimmy Lin
                                                       The iSchool
                                                  University of Maryland

                                             Wednesday, October 15, 2008



     Material adopted from slides by Ian Graham: http://www.iangraham.org/talks/
                                                                                          The United
     This work is licensed under a Creative Commons Attribution -Noncommercial-Share Alike 3.0 iSchool States
     See http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details     University of Maryland
        What is Cloud Computing?
1.   Web-scale problems
2.   Large data centers
3.   Different models of computing
4.   Highly-interactive Web applications




                                                  The iSchool
                                      University of Maryland
Interactive Web applications need AJAX




                                               The iSchool
                                   University of Maryland
                        Ajax
• Asynchronous JavaScript and XML: an approach
  for building interactive Web applications
• Ajax refers to a number of technologies:
  – XHTML/CSS for presentation
  – XML for data exchange (or JSON – Java script object
    notation)
  – XMLHttpRequest object for asynchronous
    communication
  – JavaScript to tie everything together
From “old-school” Web applications to Ajax…
                                                       The iSchool
                                           University of Maryland
           “Old-School” Web Applications
                                          browser sends                server generates
              user does something         request to server            Web page as a
                                                                       response to the
                                                                       request

1                                                                             3
    browser                                               server-side systems
                              2
                                  HTTP request
         Interface




                                                               Web                backend
                                                              server              database
                                  HTTP response
                                    4
     5

                                           data is returned
             browser replaces view         in response to
             with data sent from server    the request

                                                                                   The iSchool
                                                                       University of Maryland
               Characteristics
• User-driven: Things only happen when the user
  does something (e.g., clicks on a link or button)
• Views defined by URLs: You can bookmark
  something and come back to it; use the
  forward/backward button
• Simple user interaction model: Not that many
  things you can do in browser
• Synchronous Interaction: System responses are
  synchronized with user-driven events
                                                    The iSchool
                                        University of Maryland
           Synchronous Interactions
browser        user activity                       user activity                       user activity
                      1                                5


                               2
                                                                                                  Time
                                               4
server-side
                                       3
                               server processing                   server processing



 1
                                HTTP request       2
     browser                                               server-side systems
                          4    HTTP response                               3
           5




                                                                                           The iSchool
                                                                               University of Maryland
So what do you run on the server side?


   L     Linux


   A     Apache


   M     MySQL


   P     PHP/Python/Perl

                                         The iSchool
                             University of Maryland
               From “Old-School” to Ajax
Ajax intermediates between the interface and the server.


  browser                                 server-side systems

                              request
   Interface




                    Ajax                     Web              backend
                  “engine”                  server            database
                              response
                                data
                             management
   interaction management




                                                                 The iSchool
                                                     University of Maryland
                                 Inside the Browser
browser


                                                              HTTP request
              Rendering Engine
  Interface




                                 HTML / CSS
                                   data


                                   other data                 HTTP response
                                 (e.g. images)




                                                              The iSchool
                                                  University of Maryland
                                    Enter JavaScript
browser


                                                 JavaScript Engine                        HTTP request
              Rendering Engine
  Interface




                                 HTML / CSS                          JavaScript
                                   data                                code


                                   other data                                             HTTP response
                                 (e.g. images)




                                                                                          The iSchool
                                                                              University of Maryland
                                           Enter Ajax
                                                                                          HTTP request
browser
                                                 XMLHttpRequest


                                                 JavaScript Engine                        HTTP request
              Rendering Engine
  Interface




                                 HTML / CSS           XML            JavaScript
                                   data               data             code


                                   other data                                             HTTP response
                                 (e.g. images)




                                                                                          The iSchool
                                                                              University of Maryland
From Synchronous Interactions…
browser   user activity                       user activity                       user activity




                                                                                             Time

server-side


                          server processing                   server processing




                                                                                     The iSchool
                                                                         University of Maryland
    To asynchronous Interactions
browser
user activity



client-side processing


                                                                           Time

server-side


                         server processing   server processing




                                                                    The iSchool
                                                        University of Maryland
Components of an Ajax Interaction
1. A client event occurs (captured by JavaScript
   event handlers)
2. An XMLHttpRequest object is created and
   configured
3. An asynchronous request is made to the server
   via the XMLHttpRequest object
4. Server processes request and returns data,
   executing a callback in the XMLHttpRequest
   object
5. The HTML DOM is updated based on response
   data
                                                 The iSchool
                                     University of Maryland
       XMLHttpRequest Object
• The XMLHttpRequest object implements
  an interface exposed by a scripting engine
  – allows scripts to perform HTTP client
    functionality
     • submitting form data
     • loading data from a server
        – ECMAScript HTTP API (ECMA is standard scripting
          languate – for of dialects JavaScript, ActionScript,
          Jscript)

                                                            The iSchool
                                                University of Maryland
         XMLHttpRequest Object
• Named XMLHttpRequest for compatibility with the
  Web, each component of name potentially misleading.
   – First, object supports any text based format,
     including XML.
   – Second, used to make requests over both HTTP and
     HTTPS (some implementations support protocols in
     addition to HTTP and HTTPS, but that functionality
     is not covered by this specification).
   – Finally, supports "requests" in a broad sense of the
     term as it pertains to HTTP; namely all activity
     involved with HTTP requests or responses for the
     defined HTTP methods.
                                                       The iSchool
                                           University of Maryland
           XMLHttpRequest Object
• XMLHttpRequest XHR is a DOM API used inside a web browser
  scripting language to send an HTTP or HTTPS request directly to a
  web server and load the server response data directly back into the
  scripting language
• Once the data is within the scripting language, available as both
  XML and plain
• XML data can be used to manipulate active document in browser
  window without client loading a new web page document
• Plain data can be evaluated with scripting language (formatted as
  JSON, evaluated to create object for use on DOM)
   – JSON is JavaScipt Object Notation – lightweight data-interchange
     format




                                                                    The iSchool
                                                        University of Maryland
                     DOM
• Document Object Model: platform- and
  language-independent way to represent XML
  – Adopts a tree-based representation
  – W3C standard, supported by modern browsers
• JavaScript uses DOM to manipulate content
  – To process user events
  – To process server responses (via XMLHttpRequest)


                                                   The iSchool
                                       University of Maryland
    Ajax: Things to watch out for!
• Hype
   – Best thing since sliced bread?
• Application development/maintenance cost
   – Brower incompatibilities
   – Many different approaches and tools
   – For many things, lack of agreed-on best practices
• Behavior is not ‘Web-like’
   – Standard things often don’t work correctly (e.g., browser
     ‘back’ button, bookmarks)
   – Usability issues for users with disabilities
• Security issues
   – Whole new class of cross-site scripting (XSS) exploits
                                                             The iSchool
                                                 University of Maryland
       Making your life easier…
• Dojo: really cool set of interface widgets
  http://www.dojotoolkit.org/
• Direct Web Remoting: RPC library for calling
  server-side Java from client-side JavaScript.
  http://directwebremoting.org/
• jQuery: supports chaining of expressions for
  more concise code.
  http://jquery.com/
• Prototype: provides support for more traditional
  object-oriented programming
  http://www.prototypejs.org/
                                                  The iSchool
                                      University of Maryland
                Learning Ajax
• Bewildering options:
  – PHP vs. Python vs. Perl vs. ASP vs. JSP …
  – XML vs. JSON
  – Countless toolkits, frameworks, libraries, etc.
• Amazing amount of information online:
  – Numerous Web tutorials
  – Learn by example
  – Learn by building

                                                      The iSchool
                                          University of Maryland
                  The next frontier?
                                     Interactive Web applications
browser                                     server-side systems

                     HTTP request
  Interface




                                              Apache             MySQL
                     HTTP response




              Hadoop cluster



                 MapReduce           HDFS




              Backend batch processing                             The iSchool
                                                       University of Maryland
• Ajax project

• Demo 2
• Demo 3




                             The iSchool
                 University of Maryland
                        Caching servers: 15 million requests per second, 95%
                        handled by memcache (15 TB of RAM)
                        Database layer: 800 eight-core Linux servers running
                        MySQL (40 TB user data)
                                                                                    The iSchool
                                                                        University of Maryland
Source: Technology Review (July/August, 2008)

								
To top
;