• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Slide 1
 

Slide 1

on

  • 384 views

 

Statistics

Views

Total Views
384
Views on SlideShare
384
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Slide 1 Slide 1 Presentation Transcript

    • Ajax Basics The XMLHttpRequest Object
    • Ajax is…. Ajax is not….
      • Ajax is not a programming language.
      • Ajax is a methodology
      • Ajax works with the XMLHttpRequest Object. (JavaScript)
        • ActiveX with IE5 to IE6
        • Native Object for other browsers and IE7
      • And your choice of ServerSide Technology
    • Ajax does not rely on just the XMLHttpRequest Object
      • Iframes and JSON can also be used instead of the XHR object.
      • We will look into these methods later on.
    • A synchronous J avaScript a nd X ML
      • Utilizes the XMLHttpRequest() Object.
        • First implemented in Microsoft Internet Explorer Version 5 for Windows as an ActiveX Object
        • The other browsers copied Microsoft starting with these versions:
          • Mozilla 1.0 / Firefox 1.0 / Netscape 7
          • Opera 8.01 / Opera Mobile Browser 8.0
          • Safari 1.2 / Konqueror 3.2 / iCab 3.0b352
          • Plus other minor browsers
    • What started the hype?
    • Adaptive Path’s Original Diagram
    • The Real Life Diagram – How to explain it to your non-geek friends
      • THE COLLEGE PARTY
    • The Bleak Situation
    • The Non-Ajax Solution
      • Figure out what is more important and rank order of operation.
      • Should I clean the mess, get food, or update the outdated music collection?
      • Perform one task and do the others after each other. Hopefully I have enough time!
        • Go to Store, Download Music, Clean Apartment so it can be trashed again.
    • The Ajax Solution
      • Do multiple things at once!
      • Hire a maid to do the cleaning!
      • Order delivery pizza!
      • And I can download new music while others do the dirty work! Ajax Clean!
    • Benefits and Problems
      • The Page Weight
      • Rendering Pages
      • Maintain Page State
      • Back, Forward, and Refresh
      • Connection Speed
      • JavaScript!
    • XMLHttpRequest Limitations
      • No Cross Domain Requests
      • JavaScript Disabled
      • Older Browsers
      • Older Servers
      • 508?
    • CROSS BROWSER JAVASCRIPT
    • The XHR Object
      • The Gecko / Safari / IE7 Object Constructor
        • req = new XMLHttpRequest();
      • The ActiveX for IE 6 and earlier
        • req = new ActiveXObject("Microsoft.XMLHTTP");
      • OR
        • req = new ActiveXObject("Msxml2.XMLHTTP");
    • XHR Object Methods Assigns header to be sent with a request setRequestHeader("label", "value") Transmits the request send(content) The heart and soul! Sets destination URL, method, and other optional attributes open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Returns value of a specified header label getResponseHeader("headerLabel") Returns all header (labels/value) sets getAllResponseHeaders() Stops the current request abort() Description Method
    • XHR open()
      • open("method", "URL", asyncFlag); method = GET or POST
      • URL = Page to request
      • asyncFlag = True or False
    • XHR Object Properties String message accompanying the status code statusText Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK" status DOM-compatible document object of data returned from server process responseXML String version of data returned from server process responseText Object status integer readyState Event handler for an event that fires at every state change onreadystatechange Description Property
    • readyState values
      • 0 – uninitialized
      • 1 – loading
      • 2 – loaded
      • 3 – interactive
      • 4 – complete (Can process returned data!)
    • BASIC DEMO TIME
    •  
    • JavaScript Quiz
      • Quiz.....
    • Basic Ajax In Action Content Loader
      • var loader1 = new net.ContentLoader(
      • "RequestURL.aspx",
      • FinishFunction,
      • customErrorFunction,
      • "POST/GET",
      • "POST Parameters");
    • Security
      • No different than a traditional postback
      • Check for SQL Injection
      • Check for JavaScript Injection
      • Validate the Data
    • Hack This Form
      • Basic Form Hack Example
    • Business Logic - Server or Client
      • Really depends on application
      • Security
      • Visual Rendering
      • Speed - Process data how many times?
      • Data size in response/request
      • XML, Strings, or JSON?
    • Ajax Developer Must Haves!
      • Drip IE Leak Detector
      • Firefox Extensions
          • Adblock – Ah, just because!
          • Firebug
          • Selenium IDE
          • JSView
          • NOSCRIPT
          • Modify Headers
    • Where to get more info
      • My Blog: http://radio.javaranch.com/pascarello
      • Forum: http://www.javaranch.com
      • Forum: http://www.intelliobjects.com/
      • Ajax News: http://www.Ajaxian.com
      • Ajax In Action info: http://www.manning.com/crane
      • Presentation files for this talk will be located at: http://www.pascarello.com/presentation/NOVA_Ajax/
    • Larger Demos & Questions