Your SlideShare is downloading. ×
Ajax Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ajax Presentation

7,243
views

Published on

Published in: Technology

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

No Downloads
Views
Total Views
7,243
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
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. A synchronous J avaScript A nd X ML What? Why? How? Who?
  • 2. Overview
    • Web applications are based on request/response
    • During request process, nothing is displayed
  • 3. Overview Please wait … Request Response Client Server
  • 4. Overview: Traditional Web App. Life Cycle Request
  • 5. Process Overview: Traditional Web App. Life Cycle Loading
  • 6. Response Overview: Traditional Web App. Life Cycle
  • 7. Overview
    • To improve performance, you either:
      • load everything & display required data (JavaScript)
      • OR
      • keep moving back and forth between client & server
      • An alternative way is to use AJAX .
  • 8. What?
    • AJAX: Asynchronous JavaScript And XML
    • AJAX uses a XML to send and receive asynchronous requests/responses and then leverages presentation technologies ( JavaScript , DOM, HTML, and CSS) to process the response.
    • Most browsers support the necessary technology for AJAX.
  • 9.
    • AJAX enables you execute a server-side method through a JavaScript call, without requiring a browser refresh.
    What?
  • 10. AJAX Web App. Life Cycle Request
  • 11. Process AJAX Web App. Life Cycle Nothing here
  • 12. Response AJAX Web App. Life Cycle
  • 13. Real world example
    • Falafel
    • &
    • Jumaa
  • 14. Let us start cooking, I am HUNGRY!
    • Ingredients:
      • JavaScript To build client-side functionality (using DOM).
      • XMLHttpRequest object To enable JS to access the server asynchronously .
      • Server Side Technology To handle the request. The response will be XML .
  • 15. How (how to use AJAX)?
    • Modify web.config
    • Register the web page
    • Use <Ajax.AjaxMethod()> attribute
    • Write JavaScript to handle the response
  • 16. How (how to use AJAX)? Do not just tell me, show me a demo!
  • 17. Who (who use AJAX)?
    • Windows Live Mail ( http:// www.hotmail.com )
    • Google
      • Goole Mail ( http:// mail.google.com )
      • Google Maps ( http:// maps.google.com )
      • Google Suggests ( http://www.google.com/webhp?complete=1&hl=en )
    • Yahoo! Flickr ( http://www.flickr.com )
    • Meebo ( http:// www.meebo.com )
    • … Who’s next (you???)
  • 18. Who (who uses AJAX)?
  • 19. FAQ
    • What data types does AJAX support?
      • AJAX supports:
        • Primitive types of custom classes and arrays
        • integers, strings, double, booleans, DateTime, DataSets and DataTables
        • All other types have their ToString values returned
    • What about Session s?
      • AJAX supports Session read and write
  • 20. Why (why to use AJAX)?
    • Faster web actions
    • Less (or no) page refreshes
    • Reduce network traffic
    • Decreased server-side bandwidth usage
    • Web apps that rival (or surpass) installed GUI apps
  • 21. Why (why not to use AJAX)?
    • Bye bye, bookmarks!
    • Search engines may not be able to index all pages.
    • Inaccurate Back & Forward button actions.
    • JavaScript can be easily disabled from client side.
  • 22. Do not reinvent the wheel,
    • Many AJAX frameworks are available now:
    • AJAX.Net
    • Abobe (Spry).
    • Google (Google Web Toolkit).
    • Microsoft (Atlas).
    • … others are coming.
  • 23. AJAX.Net
    • Server Side Code
    • [AjaxMethod] public DataSet GetDataSet(){
    • DataSet ds = new DataSet();
    • ...
    • return ds;
    • }
  • 24. AJAX.Net
    • Client Side Code
    • function doTest1(){ AJAXDemo. GetDataSet(_callback1);
    • }
    • function _callback1(res){ var cols = res.value.Tables[0].Columns.length;
    • var rows = res.value.Tables[0].Rows.length; alert(cols + &quot; cols and &quot; + rows + &quot; rows&quot;);
    • }
  • 25. AJAX.Net
    • Dataset ( Creating a client-side DataSet using JS )
    • var ds = new Ajax.Web.DataSet();
    • var dt = new Ajax.Web.DataTable();
    • dt.addColumn(&quot;FirstName&quot;, &quot;System.String&quot;);
    • dt.addColumn(&quot;Age&quot;, &quot;System.Int32&quot;);
    • dt.addRow({&quot;FirstName&quot;:&quot;Michael&quot;,&quot;Age&quot;:28});
    • dt.addRow({&quot;FirstName&quot;:&quot;Tanja&quot;,&quot;Age&quot;:25});
    • ds.addTable(dt);
  • 26. AJAX.Net
    • Dataset ( Creating a client-side DataSet using JS )
      • dt.addRow({&quot;FirstName&quot;:&quot;Michael&quot;,&quot;Age&quot;:28});
      • // or using an object
      • var row = new Object();
      • row.FirstName = &quot;Michael&quot;;
      • row.Age = 28;
    • dt.addRow(row);
  • 27. One Day
    • AJAX is not the end,
    one day you will look at this technology and LAUGH !!!