SynapseIndia DOTNET Development AJAX Client Library Type System : Class - Interface
ASP.NET AJAXLibrary Client LibraryType System: Class-Interface ASP.NET AJAX Client – Type System : Class - Interface Interfaces are a convenient way to define standard behaviors that other types can implement . An interface is a contract that states that the implementer of the interface must provide all of the functionality specified in the interface. The interface itself is only a specification and has no functionality of its own Interface definitions follow the same pattern as creating classes The function name is the name of the interface. The prototype of the function is modified to add the interface members. The convention in defining interface members is to throw Error.notImplemented for each member, so any class that implements the interface then needs to override the interface members to provide real implementations or the exception will be thrown.
ASP.NET AJAXLibrary Client LibraryType System: Class-Interface ASP.NET AJAX Client â&#x20AC;&#x201C; Type System : Class - Interface <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ASP.NET AJAX Interface</title> <script type="text/javascript"> function pageLoad(sender, args) { Type.registerNamespace('Wrox.ASPAJAX.Samples'); Wrox.ASPAJAX.Samples.IProvideTrackInfo = function() { throw Error.notImplemented(); } Wrox.ASPAJAX.Samples.IProvideTrackInfo.prototype = { get_trackCount: function() { throw Error.notImplemented(); } } Wrox.ASPAJAX.Samples.IProvideTrackInfo.registerInterface ('Wrox.ASPAJAX.Samples.IProvideTrackInfo'); } </script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
ASP.NET AJAX Library Client LibrarySystem: Class-Enumeration ASP.NET AJAX Client – TypeType System : Class – Enumeration The ASP.NET AJAX type system provides for defining enumerations and a specialized version of them used as combinable flags. Enums let you establish a set of possible values
function pageLoad(sender, args) { Type.registerNamespace('Wrox.ASPAJAX.Samples'); Wrox.ASPAJAX.Samples.MusicGenre = function() { throw Error.invalidOperation(); } Wrox.ASPAJAX.Samples.MusicGenre.prototype = { Blues: 1, Classical: 2, Electronic: 3, Folk: 4, Industrial: 5, Jazz: 6, NewAge: 7, HipHop: 8, Rock: 9, WorldFusion: 10 } Wrox.ASPAJAX.Samples.MusicGenre.registerEnum ('Wrox.ASPAJAX.Samples.MusicGenre'); var genre = Wrox.ASPAJAX.Samples.MusicGenre.Industrial;
}
alert(Wrox.ASPAJAX.Samples.MusicGenre.toString(ge nre)); alert(genre == Wrox.ASPAJAX.Samples.MusicGenre.Industrial);
ASP.NET AJAX Client–LibraryAJAX Base Class Library ASP.NET AJAX Client Library AJAX Base Class Library Microsoft ASP.NET AJAX provides features that helps in creating client script and integrate it into ASP.NET applications. This includes extensions to existing ECMAScript (JavaScript) objects to give them the richness of .NET Framework classes The AJAX Library takes a familiar set of features from the Base Class Library of the .NET Framework and brings it to JavaScript in the browser Extensions to JavaScript base types provide additional functionality for these types. •
Array Type Extensions
•
Boolean Type Extensions
•
Date Type Extensions
•
Error Type Extensions
•
Number Type Extensions
•
Object Type Extensions
•
String Type Extensions
ASP.NET AJAX Networking ASP.NET AJAX Networking The core of AJAX development is the ability to make asynchronous web service calls from JavaScript code. Major web browsers have included an XMLHttpRequest object for making HTTP requests. The XMLHttpRequest object is used to perform out-of-band communications with the server for invoking web services, executing callbacks, and performing partial page updates. ASP.NET AJAX provides classes for managing web requests, processing responses, and detecting errors. It also provides support for serializing objects formatted as JSON (JavaScript Object Notation), which makes them readily usable in JavaScript in the browser. â&#x20AC;˘ JSON is a standard serial format that is more lightweight than XML.
ASP.NET AJAX NetworkingXMLHttpRequest ASP.NET AJAX Networking – XMLHttpRequest Object Object Remote Scripting: • To minimize the impact of page redraws, primitive forms of scripted remote procedure calls (RPC) appeared around 1997. Microsoft, in particular, pioneered this field with a technology called Remote Scripting (RS). • RS employed a Java applet to pull in data from a remote Active Server Pages (ASP)based URL. The URL exposed a contracted programming interface through a target ASP page and serialized data back and forth through plain strings. On the client, a little JavaScript framework received data and invoked a user-defined callback to update the user interface via Dynamic HTML or similar techniques. RS worked on both Internet Explorer 4.0 and Netscape Navigator 4.0 and older versions.
Microsoft replaced the Java applet with a Component Object Model (COM) object named XMLHttpRequest and released most of the constraints on the programming interface exposed by the remote URL.
ASP.NET AJAX NetworkingXMLHttpRequest ASP.NET AJAX Networking â&#x20AC;&#x201C; XMLHttpRequest Object Object Browsers generally place a new request when an HTML form is submitted either via clientside script or through a user action such as a button click. When the response is ready, the browser replaces the old page with the new one The out-of-band call is triggered via script by an HTML page event and is served by a proxy component based on the XMLHttpRequest object The proxy component sends a regular HTTP request and waits, either synchronously or asynchronously, for it to be fully served. When the response data is ready, the proxy invokes a user-defined JavaScript callback to refresh any portion of the page that needs updating.
ASP.NET AJAX NetworkingXMLHttpRequest ASP.NET AJAX Networking â&#x20AC;&#x201C; XMLHttpRequest Object Object In Mozilla browsers XMLHttpRequest looks like a native JavaScript object and can be instantiated through the classic new operator: var proxy = new XMLHttpRequest(); When the browser is Internet Explorer, the XMLHttpRequest object is instantiated using the ActiveXObject wrapper var proxy = new ActiveXObject("Microsoft.XmlHttp"); XMLHttpRequest in Internet Explorer 7 var proxy = new XMLHttpRequest(); ASP.NET AJAX Extensions completely encapsulates this object and shields page authors and application designers from it
ASP.NET AJAX NetworkingXMLHttpRequest ASP.NET AJAX Networking â&#x20AC;&#x201C; XMLHttpRequest Object Object
The XMLHttpRequest object is designed to perform one key operation: sending an HTTP request. The request can be sent either synchronously or asynchronously. interface XMLHttpRequest { function onreadystatechange; readonly unsigned short readyState; void open(string method, string url); void open(string method, string url, bool async); void open(string method, string url, bool async, string user); void open(string method, string url, bool async, string user, string pswd); void setRequestHeader(string header, string value); void send(string data); void send(Document data); void abort(); string getAllResponseHeaders(); string getResponseHeader(string header); string responseText; Document responseXML; unsigned short status; string statusText; };
ASP.NET AJAX NetworkingXMLHttpRequest Object-Example ASP.NET AJAX Networking â&#x20AC;&#x201C; XMLHttpRequest Object - Example (Time.aspx) is a web page that returns the server time to its caller. It takes no parameters and returns a string . <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Time Page</title> <script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); Response.Write("Server Time:"+DateTime.Now.ToUniversalTime()); } </script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
ASP.NET AJAX NetworkingXMLHttpRequest Object-Example ASP.NET AJAX Networking – XMLHttpRequest Object - Example <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Networking using XMLHttpRequestObject</title> <script type="text/javascript"> var xmlhttp; function pageLoad() { if(window.ActiveXObject) { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else { xmlhttp = new XMLHttpRequest(); } xmlhttp.open("GET", "Time.aspx", true); xmlhttp.onreadystatechange = readyStateChangedHandler; xmlhttp.send(); } function readyStateChangedHandler() { if(xmlhttp.readyState == 4) { alert(xmlhttp.responseText); } } </script> </head>
<body> <form id="form1" runat="server"> <asp:ScriptManager runat="server“ ID="ScriptManager1"> </asp:ScriptManager> </form> </body> </html> (CallTime.aspx) shows basic usage of the XMLHttpRequest object to call the time web page
ASP.NET AJAX NetworkingData Communication ASP.NET AJAX Networking – Data Communications An important part of any type of distributed application is how data is pushed around between tiers or layers of the application With AJAX, the following concepts are important • XML—XML is Extensible Markup Language. It is primarily used for data interchange. • XSLT—XSLT is Extensible Stylesheet Language Transformations. XSLT is designed to take XML data from one format and put it into another format. • JSON—JSON is the JavaScript Object Notation. JSON is a lightweight data interchange format.
When tied together with web services, XML and JSON allow for data interchange between different operating systems and also across the Internet.
ASP.NET AJAX NetworkingData Communication-JSON ASP.NET AJAX Networking – Data Communications - JSON JSON is the JavaScript Object Notation, and it is a lightweight data interchange format. JSON's chief advantage over XML is that the data may be parsed fairly easily using JavaScript's built-in eval() method. JSON is conceptually similar to arrays and collections in procedural programming languages. JSON is built on the following data structures: • Name/value pairs—This may be called an object, record, structure (struct), HashTable, keyed list, or associated array. • List of values—This list of values is referred to an array in most programming languages.
Web Services & JavaScript Web Services and JavaScript ASP.NET 2.0 AJAX Extensions enables the call to ASP.NET Web services from the browser by using client script. The page can call server-based methods without a postback and without refreshing the whole page, because only data is transferred between the browser and the Web server. Calling a Web service method from script is asynchronous. To get a return value or to determine when the request has returned, provide a succeeded callback function. The callback function is invoked when the request has finished successfully, and it contains the return value (if any) from the Web method call. Provide a failed callback function to handle errors.
Services-&Example JavaScript-Example Web Services andWeb JavaScript using System; using System.Web; using System.Collections; using System.Web.Services; using System.Xml; using System.Web.Services.Protocols; using System.Web.Script.Services; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class ServerTime : System.Web.Services.WebService { [WebMethod] public string GetServerTime() { return String.Format("The server time is {0}.", DateTime.Now); } }
Services-&Example JavaScript-Example Web Services andWeb JavaScript <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <style type="text/css"> body { font: 11pt Trebuchet MS; font-color: #000000; padding-top: 72px; text-align: center } .text { font: 8pt Trebuchet MS } </style> <title>Simple Web Service</title> <script type="text/javascript"> // This function calls the Web Service method. function GetServerTime() { ServerTime.GetServerTime(OnSucceeded); } // This is the callback function that // processes the Web Service return value. function OnSucceeded(result) { var RsltElem = document.getElementById("Results"); RsltElem.innerHTML = result; } </script> </head>
<body> <form id="Form1" runat="server"> <asp:ScriptManager runat="server" ID="scriptManager"> <Services> <asp:ServiceReference path="ServerTime.asmx" /> </Services> </asp:ScriptManager> <div> <h2>Server Time</h2> <p>Calling a service that returns the current server time.</p> <input id="EchoButton" type="button" value="GetTime" onclick="GetServerTime()" /> </div> </form> <hr/> <div> <span id="Results"></span> </div> </body> </html>
Rich AJAX ToolKit Controls Rich AJAX Toolkit Controls
The Toolkit is a shared source project with code contributions from developers from Microsoft and elsewhere. The Toolkit contains some new controls that have AJAX functionality and a lot of control exten-ders. The control extenders attach to another control to enhance or “extend” the control’s functionality . An extender is basically a server control that emits proper script code—the client behavior—to enhance how a given ASP.NET control behaves on the client