AJAX

1. Technologies

1. XmlHttpRequest Object:
1. Allow browser to interact with server without entire postback.
2. IE- MSXML activeX component
3. Others – xmlhttprequest object modeled on Msxml component.
2. Javascript
3. DHTML – capability of browser to update html dynamically – comes if browser supports DOM.
4. XML or JSON – for transporting data.

2. JavaScript:

1. window.status
2. onload event of body tag.
3. Input from user – confirm and prompt.
4. causing an event not to bubble up – event.cancelBubble = true.
5. [] – array
6. DataTypes: string,number and Boolean. Also supports Arrays, objects and functions.
7. Weak or dynamic typing – type of variable is inferred from data it contains.
8. Function literals and object literals – define function and object without names.
9. Prototypes – object template used to create custom object as in vb.
10. DOM levels – w3c standards to unify the browsers with different vendors. – 3 Levels. DOM level 1 is well adopted.
11. common script logic in separate files – to reduce network data as it is cached and again send if changed.

3. XMLHTTPREQUEST object:

1. xmlhttp protocol – package data as xml and send it via the network to specific destination. Xmlhttp request object is an object to facilitate this communication protocol.
2. Common mtd or properties:
1. Open(verb,url,blnSynchronous)
2. Send(content to be sent along with request as part of request body)
3. Onreadystatechnage
4. readyState

i. Uninitialized

ii. Loading

iii. Loaded

iv. Interactive

v. complete

5. ResponseText and ResponseXml – most browser support loading of xml into a DOM to access it.
6. getAllResponseHeaders() , getResponseHeaders(“headername”) - http headers
7. setRequestHeaders(name,value)
8. status and statusText
2. Passing parameters to server
1. Query string param. In url given in open method.
2. Request body in send method (must use post).
3. Only Post operation allow to send data as part of content or HTTP request body.
3. JSON – Javascript Object Notation
1. Advantage over XML is that it can be parsed fairly easily using javascript’s built-in eval() method.
2. While XML is conceptually similar to working with databases JSON is similar to working with arrays and collections.
3. Built on the following data structure

i. Name/Value pair.

ii. List of values.

4. AJAX:

1. ASP.net2.0 Client CALLBACKS (Built into ASP.net):
1. Asynchronous Client Script Callback or simply callbacks.
2. It enables asp.net to directly support inclusion of javascript code that enables asynchronous calls to the server for processing and instruct browser to execute javascript callback method when the request completes.
3. Server control built on this technology is:

i. Treeview

ii. Grid View

iii. Data list view

iv. Only set the flag on for asynchronous request – no need to write any javascript.

4. Verification of browser – Request.Browser

i. .SupportsCallBack – true if support callback functionality used by asp.net 2.0

ii. .SupportXmlHttp – browser support sending xml content over HTTP channel.

5. What is Call backs?
6. Raw Callbacks: - SimpleAJax.
7. ASP.net 2.0 Call backs – It abstract the use of xmlHttp object as mentioned in simpleajax. how?

i. Internally the Client Callback feature still uses the XMLHTTP object, but both the Web user as well as the Web developer are shielded from it.

ii. There are two Interfaces required for a control or page to implement for responding to client callbacks.Classes implementing these interfaces generate its own script to invoke a callback.

1. ICallbackEventHandler

a. Raisecallbackevent(string arg) – first method that is invoked asynchronouslty on the server to handle callback event.arg contains any data that is passes via callback event/method.

b. GetCallbackResults – method returns callback results to client browser

c.

2. Icallbackcontainer.- this is used for custom controls like grid view is implemented using this interface.

iii. Apart from this interface there is a method which enable client callback on client. This method actually generate code which abstract xmlhttp object.

1. Page.GetCallbackEventReference(control/page,arg,OnserverCallComplete,context,OnError,blnAsync) method

2. this method generate client script like which actually abstract simple AJaxfunctionality.:

a. _DoCallback(_page,arg,OnserverCallComplete,context,OnError,true/false) –

In simple ajax we specify the page to be called asynchronously while in this page will be same but there is method on server side - Raisecallbackevent which get called on form submit

i. One of the major limitation of the callbacks is the fact that all data returned from the server side must be packaged into a string.

ii. Implementation is difficult when we have many controls invoking call backs.

5. Ajax.Net Professional Library:
1. Wrapper library
2. Ajax.net pro library uses a page handler to process requests.

i.

3. Usage:
4. Registering your page for Ajax.net pro

i. Ajaxpro.utility.RregisterTypeForAjax(typeof(pageclass))

ii. This steps activates the library.This command generates JavaScript object that you can use on the client browser.

5. Registering your method with AjaxPro:

i. [Ajax.AjaxMethod()]

6. Call from client:

i. pageClass.AjaxMethod()

7. Apart from string Ajax.net pro library supports following data type:

i. String

ii. Int

iii. Double

iv. Boolean

v. Datatime

vi. Dataset

vii. Datatable

viii. Custom objects

For binding data from dataset and data table we need to loop thru datatable.tables array.

To return custom objects from .net to client we need to

1. register the type with ajax library just like we registerd the page class

2. Mark the type as serialize.

3. This movement is only one way i.e custom objects can be serialized and passed to javascript as Json but can’t be passed from java script to server.

This way proxy of server side method is generated on the client which is directly called by browser controls.

8. Ajax pro lib can execute the request synchronously or asyn..
9. Library has many events against which we can set our javascript functions.

Other Framworks:

7. Client Side Ajax Framework: Used when you have no control on what the server makes available to client.
1. Sarissa
2. HtmlHttpREquest
3. Mochikit
8. Server Side Ajax Framework: Without writing any line of javascript.
1. ComfortAsp.net

i. Return only Change HTML

2. MagicAjax

i. Return only Change HTML

3. Anthem.Net

i. Can return both change html as well as JSON

4. Atlas

i. Return Data Structure - JSON

5. Ajax.net

i. Return Data Structure – JSON

9. ATLAS Client Script: More than Ajax. Composed of:
1. Ajax Library
2. Client Side Component – just like asp.net provide server side controls.
3. Like

SimpleAjax:

function SimpleAjax()

{

var XmlHttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");

XmlHttp.Open("GET", "http://www.google.com", false);

XmlHttp.Send();

return XmlHttp.responseText;

}