Ajax is neither a new programming language nor a new platform for developing websites. Ajax is a new technology which is used to displays the refreshed content on a web page by using the page update approach rather than page replacement approach.
Ajax is built using various technologies which are us follows:-
Java Script is a client side dynamic scripting language that supports object-oriented programming.It provides various tools, such as from elements, to communicate with server.
X HTML is a combination of HTML and XML.X HTML is used with Ajax enabled website to ensure that the website runs consistently on all Browsers(IE, Firefox,Chrome, Opera mini).
- CSS (Cascading style sheet):-
CSS is a file that define the pattern of a web form.Using CSS, you can specify fonts,colours, styles(bold,italic) and size of controls.It is used to design attractive web page.
- DOM (Document Object Model):-
DOM represents a structured web form in an object oriented model. It is a platform and language -independent interface that allows programs and scripts to access and update the content of web form.DOM is recommended by world wide web consortium(w3c) to manipulate content at run time.
The core of Ajax functionality is the XMLHttRequest object, as it is responsible for making asynchronous requests to a server,updating the server response and performing necessary changes in the current web page. It sends and receives data in the form of XML.
Ajax Server or Extension Controls:-
Script Manager Controls helps in implementing the Ajax functionality in an asp.net website. You need to add this control on a web page whenever Ajax functionality is required. It manage all the Ajax control on the web page. If we are using Ajax control over web page then we first drag and drop this control on the web page.
- ScriptManagerProxy Control:-
In any Ajax enabled website is only one Script Manager Control,which manage all the Ajax server controls on that page. If the website contains a 'Master Page'and the Script Manager Control is added in the Master Page. Then all the web page inherited from the Master Page.For this purpose each content page requires a link to connect to Master Page's Script Manager Control.The content page uses the the Script Manager proxy control to make a link with master page.
EX:- If the service and scripts added earlier in the Script Manager Control of the Master Page are not useful for your current web page, then you can remove them by using the Script Manager Proxy Control.
The UpdatePnael Control helps to divide your web page into parts, where each part can be update independently. If we have a button on the web page, which clicking the page goes to the server and back to the client ,if we want to go only a small part of web page to the server then we use the UpdatePanel Control.
Creating a simple Application:-
- Drag and drop ScriptManager control,UpdatPanel control , a button control and two label controls from the Toolbox on the Design view of the Default.aspx page.
- Set the Text property of the Label1 control s to simple Application with AJAX ,the Button1 control to Display and ID property to Btndisplay.
->On Btndisplay Double click:-
protected void Btndisplay_Click(object sender, EventArgs e)
{
String myDateTime;
myDateTime = System.DateTime.Today.ToLongDateString() + " ";
myDateTime += System.DateTime.Now.ToLongTimeString();
TimeLabel.Text = myDateTime;
}
OUTPUT:-
Application Using Timer Control:-
The Timer control can be used in the following two ways:-
- Inside the Update Panel Control
- Outside the Update Panel Control
Here we are showing Timer control Inside the Update Panel Control.Outside the Update Panel Control is similar to this .You Can download whole Application from the below download link.
- Drag and drop a Script Manager control, Update Panel control,Timer control and two Label controls from the Toolbox on the Design view of the Default2.aspx page.To use Timer control inside the Update Panel control.
- Set the Text property of the Label1 control to Application using Timer control,Label2 control to current System time,D property of the Label1 control to Label Heading, ID property of the Label2 control to Time Label,ID property of the Timer control to Timer Updater, and Interval property to 1000
Double click on Timer -Time Updater control:
protected void TimeUpdater_Tick(object sender, EventArgs e)
{
TimeLabel.Text = System.DateTime.Now.ToLongTimeString();
}
OUTPUT:-
Your system current time will be displayed.
Application Using Update Progress Control:-`
- Using the Update Progress control for single Update Panel Control.
- Using the Update Progress control for Multiple Update Panel Control.
Here we are going to show Update Progress control for Multiple Update Panel Control. Here we are using two Update Panel Control.
Design view Defaut4.aspx:-
