Your SlideShare is downloading. ×
0
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
Lecture 7
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

Lecture 7

1,281

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,281
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
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. Web page the old way
  • 2. Scripting Languages
    • Client Side Scripting (run in the browser)
      • Java script, VB script
    • Client Side Application Programs (run as an independent program in the client machine)
      • Java Applets
    • Server Side Scripting (run the server – not really true in JSP case the server is only a container)
      • ASP, JSP, PHP
    • Server Side Application Programs (run as an independent program in the server)
      • CGI (Perl, C, Shell, etc)
  • 3. Everything was Synchronous
    • The old way
      • Need to wait for the new page to be displayed before you can do anything else
      • If you click on a button on a semi-loaded page, the current page will be aborted and a new page will be loaded
    • The scripting way
      • Web page was created using a program, the synchronous behavior is the same
  • 4. Ajax
    • A: Asynchronous
      • You do not need to wait for the web page to completely loaded
      • It is done in the background (nothing is shown on your browser when it is loading)
    • Problem arise
      • How to update the web page when it complete the load
        • Call a JavaScript in the client (The J in Ajax)
      • How to send data to/from client/server
        • Use XML (The X in Ajax)
  • 5. AJAX
    • A synchronous J avaScript A nd X ML
    • AJAX is not a new programming language, it is a new way to use existing standards
    • A technique for creating better, faster, and more interactive web applications.
    • AJAX is based on JavaScript and HTTP requests.
    • Use JavaScript to send and receive data between a web browser and a web server
    • Exchanging data with the web server behind the scenes
  • 6. Ajax Applications
    • Dynamic Text
    • Populate Lists
    • Dynamic Validation
    • Table Editing
    • And many more …
  • 7. What Ajax Based On?
    • standards-based presentation using XHTML and CSS
    • dynamic display and interaction using the Document Object Model
    • data interchange and manipulation using XML and XSLT
    • asynchronous data retrieval using XMLHttpRequest
    • and JavaScript binding everything together
  • 8. Ajax Pros and Cons
    • Pros:
    • No plugin needed
    • Bandwidth Utilization
    • Improvement to the user experience
    • Cons:
    • Unexpected “Back” behavior
    • Performance & Response-time concerns
    • Difficult for a user to bookmark a particular state of the application
    • Applications may not be indexed by search engines
  • 9. Ajax Communication Model
  • 10. Browser-Server Interaction
  • 11. Browsers Support
    • XMLHttpRequest supports ready in:
      • Internet Explorer 5.0+ (with ActiveXObject )
      • Safari 1.2
      • Mozilla 1.0 / Firefox
      • Opera 8+
      • Netscape 7
  • 12. Ajax Lifecycle
    • Visit
    • Initialization
    • Event Loop
      • Browser Event
      • Server Request
      • Service Process Event
      • Server Response
      • Browser Update
  • 13. AJAX Example
    • HTML
    • <HTML>
    • ....
    • <body>
    • <form> First Name:
    • <input type=&quot;text&quot; id=&quot;txt1&quot; onkeyup=&quot;showHint(this.value)&quot;>
    • </form>
    • <p>Suggestions: <span id=&quot;txtHint&quot;></span></p>
    • .....
    • </HTML>
  • 14. AJAX Example (con’t)
    • function getData(str) {
      • xmlHttp = new XMLHttpRequest()
      • if (xmlHttp==null) {
      • alert (&quot;Browser does not support HTTP Request&quot;)
      • return
      • }
      • var url=“serverApp.jsp&quot;
      • url=url+&quot;?q=&quot;+str
      • xmlHttp. onreadystatechange = stateChanged
      • xmlHttp.open(&quot;GET&quot;,url,true)
      • xmlHttp. send (null)
    • }
    • function stateChanged() {
      • if (xmlHttp. readyState ==4) { document.getElementById(&quot;txtHint&quot;).innerHTML =
      • xmlHttp. responseText
      • }
    • }
  • 15. AJAX XMLHttpRequest
    • An API that can be used by JavaScript to transfer and manipulate XML data to and from web server
    • Methods of XMLHttpRequest:
    • open() - sets up a request to a web server
    • send() - send the request to server
    • abort() – abort the current request to server
    • Properties of XMLHttpRequest:
    • readyState - Return the state of current state
    • (0 – Not initialized, 1 – Request has been setup, 2 – Has been Sent, 3 – is process, 4 – Request completed)
    • responseText – Return the response as a string
  • 16. XMLHttpRequest - Browser Support
    • In Internet Explorer
    • new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;)
    • In Mozilla, FireFox or Safari
    • new XMLHttpRequest()
    • ...
    • var objXMLHttp=null
    • // Firefox, Opera 8.0+, Safari
    • if (window.XMLHttpRequest) {
    • objXMLHttp=new XMLHttpRequest()
    • }
    • // Internet Explorer
    • else if (window.ActiveXObject) {
    • objXMLHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;)
    • }
    • return objXMLHttp
    • ...
  • 17. XMLHttpRequest
    • Handle browser-server communication
    • User information uploaded to server
    • New information downloaded from server
    • Issues HTTP requests
    • Calls to a server URL
    • Sync or Asynchronous calls
    • Must call to host that initiate the page
  • 18. XMLHttpRequest
    • Creation methods different among browsers
    • function createXMLHttpRequest() {
    • try { return new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch (e) {}
    • try { return new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch (e) {}
    • try { return new XMLHttpRequest(); } catch(e) {}
    • alert(&quot;XMLHttpRequest not supported&quot;);
    • return null;
    • }
  • 19. XMLHttpRequest
    • Synchronous Call Example
    • var xhReq = new XMLHttpRequest();
    • xhReq.open(&quot;GET&quot;, &quot; serverProg.jsp ? arg1 = value1 &quot;, false );
    • xhReq.send(null);
    • var serverResponse = xhReq. responseText ;
  • 20. XMLHttpRequest
    • Asynchronous Call Example
    • var xhReq = new XMLHttpRequest();
    • xhReq.open(&quot;GET&quot;, &quot; serverProg.jsp ? arg1 = value1 &quot;, true );
    • xhReq.onreadystatechange = server Respons eCallback ; xhReq.send(null);
    • ...
    • function serverResponseCallback () {
    • if (xhReq.readyState != 4) {
    • return;
    • }
    • var serverResponse = xhReq.responseText;
    • ...
    • }
  • 21. XMLHttpRequest
    • POST Example
    • var xhReq = new XMLHttpRequest();
    • xhReq.open(“ POST &quot;, “ serverProg.jsp &quot;, true );
    • xhReq.onreadystatechange = server Respons eCallback ;
    • xhReq.setRequestHeader(
    • &quot;Content-Type&quot;,&quot;application/x-www-form-urlencoded&quot;);
    • xhReq.send( “ someData ” );
    • ...
    • function serverResponseCallback () {
    • if (xhReq.readyState != 4) {
    • return;
    • }
    • var serverResponse = xhReq.responseText;
    • ...
    • }
  • 22. XMLHttpRequest
    • GET Example
    • var xhReq = new XMLHttpRequest();
    • xhReq.open(“ GET &quot;, “ serverProg.jsp?arg1=v1&arg2=v2 &quot;, true );
    • xhReq.onreadystatechange = server Respons eCallback ;
    • xhReq.send( null ) ;
    • ...
    • function serverResponseCallback () {
    • if (xhReq.readyState != 4) {
    • return;
    • }
    • var serverResponse = xhReq.responseText;
    • ...
    • }
  • 23. Client Side – Response Handling
    • Simple HTTP status
    • Check XMLHttpRequest.status
    • Anything other than 200 means ERROR
      • 404 Page not found
      • 500 server error
  • 24. Client Side – Response Handling
    • readyState – status of the server response
    • Execute onreadystatechange whenever ready state changes
    0 The request is not initialized 1 The request has been set up 2 The request has been sent 3 The request is in process 4 The request is complete
  • 25. Client Side – Response Handling
    • xhReq.onreadystatechange = function() {
    • if (xhReq.readyState != 4) { return; }
    • if (xhReq.status != 200) {
    • // Handle error, e.g. Display error message on page
    • return;
    • }
    • var serverResponse = xhReq.responseText;
    • ...
    • };
  • 26. Client Side – Detecting Timeout
    • Response may never return
    • Use timeout to resolve
    • Handling Timeout
      • Retry (Reentrant consideration)
      • Abort
      • Do nothing (Fire and Forget)
  • 27. Client Side – Detecting Timeout
    • var xhReq = createXMLHttpRequest();
    • xhReq.open(&quot;get&quot;, &quot;infiniteLoop.jsp&quot;, true);
    • // Server stuck in a loop.
    • var requestTimer = setTimeout (function() {
    • xhReq.abort();
    • // Handle timeout situation, e.g. Retry or inform user.
    • }, MAXIMUM _ WAITING_TIME );
    • xhReq.onreadystatechange = function() {
    • if (xhReq.readyState != 4) { return; }
    • clearTimeout (requestTimer);
    • if (xhReq.status != 200) {
    • // Handle error, e.g. Display error message on page
    • return;
    • }
    • var serverResponse = xhReq.responseText;
    • ...
    • };
  • 28. Lab Time

×