4 9 6
18.ATLAS-AJAX
Note: - As an IT professional it's useful to know what the difference
is between Hype and
usefulness. For instance if there is a new technology coming in many
programmers just want
to implement it because they want to learn it?. But any new technology
becomes useful if it is
useful to the user. And Ajax is one of the technologies which will be
useful as it really
makes the user experience really good. You can get the atlas Ajax setup
in CD.
(B) What problem does Ajax solve?
In order to answer this question first lets understand how does browser
and server work
when we request any website. Below figure depicts pictorially the web
environment.
When client sends data to the server it post backs form element data,
hidden
fields,images,cookie information to the server and server make the page
and sends the
same information back to the browser. The bad part this happens with
every request and
response.
Below are the issues with the above model:-
Unnecessary data transfers: - In the above model unnecessary data is
transferred between
client and server. For instance the whole page is posted and refreshed
even when we want
small data of the page to be refreshed.
Figure 18.1:- The problem
4 9 7
Synchronous processing: - When a user request for a page he has to wait
until the complete
round trip happens. In short the request / response work on a
synchronous model rather
than asynchronous which makes user experience very difficult. How many
times it has
happened that you are requesting a page and you see the below
screen...frustrating right.
Figure 18.2:- Synchronous processing
Unnecessary processing by server: - Because we are posting unnecessary
information to
the server, the server is overloaded with unnecessary processing.
(B) What is Ajax?
Ajax is a set of client side technologies that provides asynchronous
communication between
user interfaces and web server. So the advantages of using Ajax are
asynchronous
communication, minimal data transfer and server is not overloaded with
unnecessary
load.
(B) What is the basic fundamental behind Ajax?
XmlHttpRequest is the basic fundamental behind Ajax. This allows the
browser to
communicate to a back end server asynchronously.XmlHttpRequest object
allows the
browser to communicate with server with out making post backs.
(B) What is JSON?
JSON is a very lightweight data format based on a subset of the
JavaScript syntax, namely
array and object literals. JSON allows communicating with server in a
standard way.
JSON is used as communication notation instead of XML.
var oBike =
{
"color" : "Green",
"Speed": 200,
};
alert(oBike.color); //outputs "Green"
4 9 8
alert(oBike.Speed); //outputs 200
The above code creates an object bike with two properties Color and
Speed.
(B) How do we use XMLHttpRequest object in
JavaScript?
Below is a code snippet which shows how to use XMLHttpRequest object.
In this code
snippet we are sending a GET request on the local IIS. Below is the
explanation of the
code snippet according to the numbers specified in the code snippet.
1,2,3,4 - This is like checking which is this browser and create the
objects accordingly.
XMLHttpRequest objects have different ways of technical implementation
according to
different browsers. In Internet explorer it's an activex object but
in other browsers its
XMLHttpRequest. So if windows.XMLHttpRequest does not return null then
we can
create XMLHttpRequest object. If it returns null then we can try
creating the activex
object Microsoft.XMLHttp object. In case it fails probably then
probably we have an
older version of XML that is MSXML2. So in the error handling we will
try to create the
MSXML2 object.
5:- In this snippet we OPEN the connection to the local host server and
specify what
type of request we are using. In this case we are using the GET method.
6:- Finally we make a request to the server.
7:- Here we get the request sent by the server back to the client
browser. This is a blocking
call as we need to wait to get the request back from the server. This
call is synchronous
that means we need to wait for the response from the server.
4 9 9
Figure 18.3:- Basic XMLHTTP code
(B) How do we do asynchronous processing
using Ajax?
xmlHttpObj.onreadystatechange = function1();
Above is the code snippet which will help us to do asynchronous
processing. So function1()
will be called when the XMLHTTP request object goes to on ready state
change.
(B) What are the various states in
XMLHttpRequest and how do we check the
same?
5 0 0
(B) How can we get response text?
(B) How can we send request to the server using
the XMLHttpRequest component?
Note :- All the above answers are discussed in detail in the below
section.
abort() :- This method cancels a user request.
getAllResponseHeaders() :- Returns a collection of HTTP headers as
string. If you want
a specific header value you can use getResponseHeader("headername")
open("method","URL", "async", "uname","pswd") :-
This method takes a URL and other
values needed for a request. You can also specify how the request is
sent by GET, POST
or PUT. One of the important values is how this request will be sent
asynchronously or
synchronously. true means that processing is carried after the send ()
method, without
waiting for a response. false means that processing is waits for a
response before continuing.
send (content):- Sends a request to the server resource.
setRequestHeader("label"," value") :- Sets label value pair for
a HTTP header.
onreadystatechange :- This is a event handler which fires at every
state change.
readyState :- Returns the current state of the object.
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
If you want to check the state use if ( xmlHttpObj.readyState ==4).
responseText :- Returns the response in plain string.
responseXML :- Returns the response as XML. So this gives us DOM object
model
which can then be traversed.
status: - Returns the status as a numeric For instance 404 for "Not
Found" or 200 for
"OK", 500 for "Server Error" etc.
5 0 1
statusText :- Returns the status as a string. For instance "not found"
or "OK".
(I) How do we pass parameters to the server?
Below are the two ways of passing data to server. The first one shows
by using GET and
the second by POST.
xmlHttpObj.open("GET","http://" + location.host + "/XmlHttpExample1/
WebForm1.aspx?value=123", true);
xmlHttpObj.open("POST","http://" + location.host + "/XmlHttpExample1/
WebForm1.aspx?value=123", true);
(I) How can we create a class in JavaScript using
Atlas?
Note: - You can get the atlas setup in CD in "Atlas setup" folder.
JavaScript is object based language and this a new feature which is
provided by Atlas.
Using Atlas you can now define classes, do inheritance, create
interfaces etc in JavaScript.
You can now implement all the object oriented concepts in JavaScript.
So let's understand
the same with an example.
Once you install the Atlas setup you will get the following JS files
and a web.config file as
shown in the below figure. In order to use Atlas you need to add the JS
files in your
project. You can see from the figure below we have added the JavaScript
files and the
web.config file to the project which was installed with Atlas setup. We
also need to add
Microsoft.Web.Atlas.dll to the project.Components.js has the class
definition which we
will discuss in the coming sections.
5 0 2
Figure 18.4:- Ajax folder structure
5 0 3
Below figure has two important code snippets the top one is taken from
components.js it
defines the class definition and the second code snippet is of ASPX
page which consumes
the JavaScript class. So let's understand all the numbered points one
by one.
1 - In this section we register namespace using registerNameSpace
function. We have
named our namespace as NameSpaceCustomer.
2 - Here we have defined our class clsCustomer.
3 - We have defined two properties Customer Code and Customer Name.
Both the
properties have get and set function. We have also defined a read-only
function
getCodeAndName which returns the concatenation of customer code and
customer name.
4 - Finally we register the class with the namespace.
5 - In this section we have consumed the class.getCOdeAndName will
display the
concatenated value of customer code and customer name.
Note: - You can find the above code in AtlasClass folder. Feel free to
experiment with the
same.
5 0 4
Figure 18.5:- Code snippet for consuming the class
5 0 5
(A) How do we do inheritance using Atlas?
(A) How do we define interfaces using Atlas?
Below is a numbered code snippet which will answer both the upper
questions. Lets
understand in detail the numbered sections.
1 and 2 -- This defines the interface definition.
Function.abstractMethod() defines a method
as abstract.
3 - We need to register the interface which is done by using
registerInterface method.
4, 5 and 6 - Inheritance and Interface is defined when we register the
class. registerClass
has three inputs. 4th section defines the main class which needs to be
registered. 5th
section defines the parent class from which it will inherit. 6th
section defines the interface.
So clsMyCustomCustomer is the class which derives from clsCustomer and
implements
ICustomer interface.
Figure 18.6 :- Inheritance and Interfaces in action
5 0 6
(A) How do we reference HTML controls using
Atlas?
<input id="Button1" type="button" value="button" />
You can reference the above HTML defined button using the below code
snippet of
JavaScript. We have also attached the onClick method with the button.
This method will
be called when we click the button.
var btnVisibility = new Sys.UI.Button($('Button1'));
btnVisibility.initialize();
btnVisibility.click.add(onClick);
You can refer other HTML elements like Label, Textbbox m CheckBox ,
Hyperlinks etc
using the Sys.UI.
Note: - Atlas is itself very huge. For the current book edition in the
remaining section we
will just go through the questions. I will be answering them in the
fourth edition because of
bandwidth. So guys till then try answering them yourself and send them
across to me so that
I can be also benefited.
Can you explain server controls in Atlas?
Can you explain ScriptManager control?
What is the importance of UpdatePanel Control?
Can you explain update progress control?
Can you explain control extenders?
How can we data binding in Atlas?
Can you explain AtlasUIGlitz library?
I want to create a project like Google maps how
can we do that with Atlas?
5 0 7
How can we integrate Atlas with Web services?
How can implement drag and drop using Atlas?
How do we do authentications using Atlas?
How can we access profiles using Atlas?
How can we access dataset in Atlas?
We have custom data type on a web
