ASP.NET AJAX adds Asynchronous JavaScript and XML. ASP.NET AJAX was up until the fall of 2006 was known by the code-known of Atlas.

Transcription

1 Future of ASP.NET

2 ASP.NET AJAX ASP.NET AJAX adds Asynchronous JavaScript and XML (AJAX) support to ASP.NET. ASP.NET AJAX was up until the fall of 2006 was known by the code-known of Atlas.

3 ASP.NET AJAX AJAX is not a product. Rather it is the most common name given to a style of web development that makes fuller use of Javascript and the browser Document Object Model (DOM) in the construction of web application user interfaces.

4 ASP.NET AJAX AJAX web applications also make use of all the current browsers ability to asynchronously request and receive information from the browser independently of the usual page request/page receive/page display cycle. This ability to asynchronously communicate with the server makes it possible to create pages that are more responsive and less disruptive.

5 Normal web application client-server interaction

6 AJAX web application client-server interaction

7 AJAX Asynchronous communication is typically achieved in Javascript using the XMLHttpRequest object (though some sites use hidden IFrame elements instead). This object was initially offered in Internet Explorer 5 as an ActiveX component; FireFox, Opera, and Safari subsequently have added native support for XMLHttpRequest. However, since Internet Explorer 5 and 6 XMLHttpRequest support is via an ActiveX component, it is possible for the user to disable it via browser settings. s Internet Explorer 7, like the other browsers now supports XMLHttpRequest natively.

8 AJAX While richer AJAX web applications are a real boon for the user, creating them can be a real nightmare for the developer. Javascript as a language lacks the kind of object-oriented features developers expect. As well, Javascript can be quite difficult to debug. As a consequence, there has been a proliferation of frameworks and toolkits to simplify the process of developing AJAX applications.

9 Why AJAX Applications Are Good Less roundtrips Less bandwidth Less work on the web server More responsive

10 ASP.NET AJAX Architecture

11 ASP.NET AJAX Examples

12 Different types of ASP.NET web applications ASP.NET Server-Side Pages are created on the server and updated through postbacks ASP.NET AJAH Pages are created on the server and updated through AJAX requests for HTML (last slide) ASP.NET AJAX Pages are created on the client and updated through Ajax requests for JSON.

13 JSON JSON (JavaScript Object Notation) is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays (called objects). The JSON format is often used for transmitting structured data over a network connection in a process called serialization. Its main application is in Ajax web application programming, where it serves as an alternative to the use of the XML format.

14 JSON The following example shows the JSON representation of an object that describes a person. { } "firstname": "John", "lastname": "Smith", "address": { "streetaddress": "21 2nd Street", "city": "New York", "state": "NY", "postalcode": }, "phonenumbers": " [ " ", " " ]

15 The Microsoft AJAX Framework (Future) Microsoft AJAX Framework = ASPNET ASP.NET AJAX + jquery

16 jquery Overview Created by John Resig Open source MIT and GPL license Cross-browser compatible Internet Explorer 6+, Firefox 2+, Opera 9+, and Safari 2+ Small footprint t 15KB Used by many major websites Bank of America, Dell, Netflix, NBC _ Passionate community

17 The Microsoft AJAX Framework ASP.NET AJAX J jquery AJAX Requests Selectors Components C t and Controls Animations Client Templates p AJAX Control Toolkit Plugins

18 jquery Selectors $( #firstname ) Selects element with Id firstname $(":text") Selects all text boxes $(.required ) Selects all elements with required class $("#grd tr:even") Select even rows from an element with an Id of grd

19 jquery Animation $( ).show() $( ).hide() $( ).slidedown() $( ).slideup() $( ).fadein() $( ).fadeout()

20 jquery Plugins jquery Plugin Repository jquery com/