2. ASP.NET AJAX Client Library-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 AJAX Client Library – Type System : Class - Interface
4. ASP.NET AJAX Client Library-Type System: Class-Enumeration
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);
}
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
ASP.NET AJAX Client Library – Type System : Class – Enumeration
5. 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 Client Library – AJAX Base Class Library
6. 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.
• JSON is a standard serial format that is more lightweight than XML.
ASP.NET AJAX Networking
7. ASP.NET AJAX Networking- XMLHttpRequest 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 Networking – XMLHttpRequest Object
8. ASP.NET AJAX Networking-XMLHttpRequest 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 Networking – XMLHttpRequest Object
9. ASP.NET AJAX Networking-XMLHttpRequest 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 Networking – XMLHttpRequest Object
10. ASP.NET AJAX Networking-XMLHttpRequest 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 Networking – XMLHttpRequest Object
11. ASP.NET AJAX Networking-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 Networking – XMLHttpRequest Object - Example
12. 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 Networking – XMLHttpRequest Object - Example
13. ASP.NET AJAX Networking-Data Communication
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 Networking – Data Communications
14. ASP.NET AJAX Networking-Data Communication-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.
ASP.NET AJAX Networking – Data Communications - JSON
15. Web Services & 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.
Web Services and JavaScript
16. Web Services & JavaScript-Example
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);
}
}
Web Services and JavaScript - Example
17. Web Services & JavaScript-Example
<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>
Web Services and JavaScript - Example
18. 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
Rich AJAX Toolkit Controls