Lecture 17: Working with

AJAX (Asynchronous JavaScript and XML)

o Ajax (Asynchronous JavaScript and XML) is a method of building interactive applications for the Web that process user requests immediately. Ajax combines several programming tools including JavaScript, dynamic HTML (DHTML), Extensible (XML), cascading style sheets (CSS), the (DOM), and the Microsoft object, XMLHttpRequest. o Ajax allows content on Web pages to update immediately when a user performs an action, unlike an HTTP request, during which users must wait for a whole new page to load. For example, a weather forecasting site could display local conditions on one side of the page without delay after a user types in a zip code. o Google Maps is one well-known application that uses Ajax. The interface allows the user to change views and manipulate the map in real time. Ajax applications do not require installation of a plug-in, but work directly with a Web browser. Because of the technique's reliance on XMLHttpRequest, early applications worked only with Microsoft's Internet Explorer browser, but most other browsers now support Ajax. o Applications created with Ajax use an engine that acts as an intermediary between a user's browser and the server from which it is requesting information. Instead of loading a traditional Web page, the user's browser loads the Ajax engine, which displays the page the user sees. The engine continues to run in the background, using JavaScript to communicate with the Web browser. User input or clicking on the page sends a JavaScript call to the Ajax engine, which can respond instantly in many cases. If the engine needs additional data, it requests it from the server, usually using XML, while it is simultaneously updating the page. o Ajax is not a proprietary technology or a packaged product. Web developers have been using JavaScript and XML in combination for several years. Jesse James Garrett of the consultancy firm Adaptive Path is credited with coining the name "Ajax" as a shorthand way to refer to the specific technologies involved in a current approach.

Basic technologies involved in Ajax applications

o HTML is used to build Web forms and identify fields and controls for use in the rest of your application. o JavaScript code is the core element running AJAX applications and it coordinates communication with server applications. o DHTML, or Dynamic HTML, helps you update your forms dynamically. You'll use div, span, and other dynamic HTML elements to mark up your HTML. o DOM, the Document Object Model, will be used (through JavaScript code) to work with both the structure of your HTML and (in some cases) XML returned from the server. Lecture 17: Working with Ajax

Power of AJAX

o With AJAX, when a user clicks a button, you can use JavaScript and DHTML to immediately update the UI, and spawn an asynchronous request to the server to fetch results. o When the response is generated, you can then use JavaScript and CSS to update your UI accordingly without refreshing the entire page. While this is happening, the on the users screen doesn't flash, blink, disappear, or stall. o The power of AJAX lies in its ability to communicate with the server asynchronously, using XMLHttpRequest object with out requiring a browser refresh. o Ajax essentially puts JavaScript technology and the XMLHttpRequest object between your Web form and the server.

Everything happens behind the scene a mini request/response cycle with out knowledge of the user.

Finally, Jesse James Garrett who coined term AJAX defined AJAX as follows:

Ajax isn't a technology. It's really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

o Standards-based presentation using XHTML and CSS o Dynamic display and interaction using the Document Object Model o Asynchronous server communication using XMLHttpRequest o JavaScript binding everything together

Advantages of AJAX based applications

 Improved application performance by reducing amount of data downloaded from the server  Eliminates frequent page refresh which usually happens in a typical request/response model(Everything is updated on fly)  Easy to implement as there are variety of AJAX implementations available around  AJAX mechanism works behind the scene nothing much required from user perspective  Works with all browsers

The disadvantages of AJAX are:

 Search engines would not be able to index an AJAX application.  The server information can not be accessed within AJAX.  AJAX is not well integrated with any browser. Lecture 17: Working with Ajax

 ActiveX requests are enabled only in IE 5 and IE6  Data of all requests is URL-encoded, which increases the size of the request.

Benefits of Microsoft ASP.NET AJAX

ASP.NET AJAX integrates client script libraries with the ASP.NET 2.0 development framework. This new Web development technology extends ASP.NET, offering the interactive user interface benefits of AJAX with a programming model that is more familiar to ASP.NET developers, making it very easy to add AJAX to your applications quickly and with minimal effort.

ASP.NET AJAX 1.0 RC can be downloaded from ajax.asp.net when installed; it adds an additional Web Site template for C# and Visual Basic.NET to Microsoft Visual Web Developer. When you create a new Web site project in Visual Web Developer, you will see a dialog like the one shown below. The Web.config will be updated accordingly to be able to use AJAX-based ASP.NET features.

Figure1. ASP.NET AJAX-Enabled Web site template

You are also expected to download the ASP.NET AJAX Control Toolkit which offers developers a rich variety of client-side controls with eye-catching control behavior without having to go through the trouble of writing and testing extensive JavaScript code.

We will demonstrate the power of ASP.NET AJAX using AJAX Control Toolkit to add partial-update support to a web page using two Microsoft ASP.NET 2.0 Extensions Server Controls: the ScriptManager Control and the UpdatePanel Control. These controls Lecture 17: Working with Ajax will allow only partial-update support to a web page. To run this example, you should have Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express Edition and latest edition of ASP.NET AJAX installed and configured

Create a New page and add UpdatePanel Control and ScriptManager Control to the page. Click inside UpdatePanel Control and add Calendar Control inside the UpdatePanel Control. Add another Calendar Control outside UpdatePanel Control. Run the page in browser using CRTL+F5.

o Navigate to the previous or next month in the calendar that is inside the UpdatePanel control. The displayed month changes without refreshing the whole page. o Navigate to the previous or next month in the calendar that is outside the UpdatePanel control. The whole page is refreshed.

Output listing with AJAX enabled calendar control

Literally, you can use any control to UpdatePanel Control if you want to AJAXize the Control. Make sure, ScriptManager Control is added to page.

Conclusion

AJAX isn't just a hyped technology; instead, it's a concrete framework that can provide you with alternative and clean solutions for your everyday problems when building Web applications. AJAX is about more than creating neat and cool applications; it can truly lead to improved customer satisfaction and a competitive advantage.

Simple AJAX Example of Asp.net AJAX Framework In Simple Term what is AJAX? AJAX is way by which we can avoid postback to perform server-side processing.

Consider Calculator Example: Following is a simple which performs calculation based on operation selected. Lecture 17: Working with Ajax

Problem with this application is when you click calculate button the default behavior is Page Postback occurs, and which is not user friendly. You can see in following Image that on Pressing Calculate Button page postback occurs and in worst case it take even time to render controls, as shown in figure, due to heavy calculation. Lecture 17: Working with Ajax

Now lets understand how we can avoid Page Postback with the use of AJAX and make a user friendly application.

AJAX Example with Visual Studio 2008 and Asp.net 3.5 Note: With VS.Net 2008 we don't need to modify web.config file as we used to do while using Ajax extension in VS.Net 2005, as AJAX Framework support is inbuilt with VS.Net 2008.

Step 1: Add Script Manager, Note: Every AJAX Application must contain Script Manager.

Step 2: Add Update Pannel, In AJAX anything inside Update Pannel, will avoid Page Postback and process server-side calculation as if client function has occurred. Lecture 17: Working with Ajax

Step 3: Put the controls Inside Update Pannel, which require Page Postback. In our example, I have form this calcy application in table so rather than putting just a button and result label i have put whole table, but otherwise you can just put LABEL and Button, as button cause Page Postback and Label updates actual result.

Now, run the application and you will feel the difference, the page will now not postback to calculate same operation which was causing Page Postback before.

Lecture 17: Working with Ajax

So its so easy to make AJAX Enabled application with VS.Net 2008. For downloading AJAX Control Toolkit Extension for VS.Net 2008

Editor

Add the following controls in sequence

1-add ScriptManager

2-add editor and then the editor works

Lecture 17: Working with Ajax

live search

Add the following controls in sequence

1-add ScriptManager

2- UpdatePanel Lecture 17: Working with Ajax

3- Add update progress to page and connect it with UpdatePanel by AssociatedUpdatePanelID property

4-add TextBox and GridView inside UpdatePanel Lecture 17: Working with Ajax

5- Connect textbox with gridview

6-the live search is work Lecture 17: Working with Ajax

Timer(show time)

1-add ScriptManager

2- add UpdatePanel

3-add Timer inside UpdatePanel and set Interval = 1

4-add Label inside UpdatePanel

5-put this code in timer_tick

Lecture 17: Working with Ajax

Ajax Control Toolkit for Framework 3.5 SP1

Following are the steps to add Ajax Control Toolkit to the toolbox for ASP.NET 3.5 webs in Visual Studio 2008 SP1

1. Download Ajax Control toolkit from here (you can download AjaxControlToolkit-Framework3.5Sp1-dllonly.zip this would contain the dll only). 2. Extract the content of the zip file downloaded in steps 2 above. 3. Launch Visual Studio 2008 4. Create new (or open an existing) 2.0 Web Application Project or . 5. Right click Toolbox and click on Add Tab. Name the new tab ACT 3.0 or anything you wish to call it. 6. Right click toolbox under the ACT 3.0 tab added in the above step and click choose items.

7. Click Browse and browse to AjaxControlToolkitBinary\AjaxControlToolkit.dll extracted in step 3. Lecture 17: Working with Ajax

8. Click OK 9. And the tab in the toolbox will be populated with the ACT controls. You can read more about the recently added new controls to the toolkit May 2009 release at the ajaxcontroltoolkit codeplex site.

Lecture 17: Working with Ajax

Trigger:

Used to connect UpdatePanel with a specific tool, according to a specific event and that was outside the UpdatePanel

References http://searchwindevelopment.techtarget.com/definition/Ajax

http://www.beansoftware.com/ASP.NET-Tutorials/Ajax-Framework.aspx

http://blogs.iis.net/webdevelopertips/archive/2009/05/16/tip-62-did-you-know- how-to-add-ajax-control-toolkit-to-the-toolbox.aspx