How to Determine and Construct the XMLHttpRequest Object by checking browser type ?

Into JavaScripr file TestScript.js, we need to write the following function to contruct the XMLHTTPRequest object.

var xmlHttpObj;

xmlHttpObj= CreateXmlHttpRequestObject();

 function CreateXmlHttpRequestObject()

        {

        var xmlHttpObj;

        

            if (window.ActiveXObject)

            {

                try

                {

                    xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");

                } catch (e)

                {

                    xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");

                }

            }

            else

                xmlHttpObj = new XMLHttpRequest();

        

        return xmlHttpObj;

        }

Then we need to call it from any aspx page TestAJAXOne.aspx as following...

    

    

    

    

into the TestScript.js file we need to add these following function 

function MakeXMLHTTPSynchronousCall()

        {

            var xmlHttpObj;

            xmlHttpObj= CreateXmlHttpRequestObject();

            

            if (xmlHttpObj)

            {

                xmlHttpObj.open("GET","http://" + location.host + "/Test/EffectiveDateHAS.xml", false);

                xmlHttpObj.send(null);

                alert("Request/Response Complete.");

            }

        }

        

function MakeXMLHTTPAsynchronousCall()

        {

        

        var xmlHttpObj;

            xmlHttpObj= CreateXmlHttpRequestObject();

            if (xmlHttpObj)

            {

                xmlHttpObj.open("GET","http://" + location.host + "/Test/EffectiveDateHAS.xml", true);

                

                xmlHttpObj.onreadystatechange= function()

                {

                    if(xmlHttpObj.readyState == 4)

                    {

                        alert("Request/Response Complete.");

                    }

                }

                xmlHttpObj.send(null)

            }

        }

What Is the XMLHttpRequest Object?

The XMLHttpRequest object is the heart of all asynchronous operations related to Ajax. It is the object responsible for providing the asynchronous behavior through which Ajax-style applications can interact.

XMLHTTP is a protocol that is designed to package data as XML and send it via the network to a specific destination, or endpoint. This information is typically processed in some way, and the result is returned to the caller. The XMLHttpRequest object is an object that is implemented by most modern browsers to facilitate this communication protocol.

What is AJAX?

So into this development environment comes a set of technologies that are collectively referred to as Ajax. If you are an “old guy” developer like us, then Ajax represents a similar concept to the clientserver development we mentioned earlier in the chapter. With client-server development, the amount of data transferred is minimized over a terminal application by transferring only the necessary data back and forth. Similarly, with Ajax, only the necessary data is transferred back and forth between the client and the web server. This minimizes the network utilization and processing on the client. Figure 1-3 shows that typically Ajax operates with the assistance of some type of proxy.

Advantages of Ajax

The advantages of Ajax over classical web based applications are:

❑ Asynchronous—Ajax allows for the ability to make asynchronous calls to a web server. This

allows the client browser to avoid waiting for all data to arrive before allowing the user to act

once more.

❑ Minimal data transfer—By not performing a full postback and sending all form data to the

server, the network utilization is minimized and quicker operations occur. In sites and locations

with restricted pipes for data transfer, this can greatly improve network performance.

❑ Limited processing on the server—With the fact that only the necessary data is sent to the

server, the server is not required to process all form elements. By sending only the necessary

data, there is limited processing on the server. There is no need to process all form elements,

process the viewstate, send images back to the client, and no need to send a full page back to

the client.

❑ Responsiveness—Because Ajax applications are asynchronous on the client, they are perceived

to be very responsive.

❑ Context—With a full postback, the user may lose the context of where they are. The user

may be at the bottom of a page, hit the Submit button, and be redirected back to the top of

the page. With Ajax there is no full postback. Clicking the Submit button in an application that

uses Ajax will allow the user to maintain their location. The user state is maintained, and the

user is no longer required to scroll down to the location that he or she was at before clicking

Submit.

Figure 1-4 shows how the user interface can still operate while using Ajax. The UI is not locked during the server processing.

History of Ajax

For all of its perceived newness and sexiness, the technologies that make up Ajax are really not new. The ability to communicate back to the server through a hidden frame without posting the main page back to the server has been around for a long time. Communication between client and server has been available—back to the release of Internet Explorer’s ability to script ActiveX controls on the client browser and to the MSXML component, both of which date back into the late 1990s. Personally, I saw the first formal usage of client script and MSXML in 2003. The problem with the technology at that time was the need to manually create the necessary client-side JavaScript. In 2003, there was too much code overall that had to be written and too much custom code that had to be written to get this to work. It has been only in the second half of 2005 that client-side libraries and server-side support for ASP.NET have started to make their presence felt and been used significantly. The mainstream development community has only recently started using the technique. The release of Google’s Suggest and Maps are what really opened the eyes of the users to the development technologies. These applications sent a shockwave through the development community.

Technologies That Make Up Ajax

Ajax is a general umbrella term. As mentioned earlier, Ajax itself stands for Asynchronous JavaScript And XML. The term Ajax was actually coined by Jesse James Garret of Adaptive Path in an essay that was published in February 2005 (www.adaptivepath.com/publications/essays/archives/000385.php) and was quickly accepted by the development community.Based on this general umbrella term, take a look at the specific items that make up Ajax:

❑ XmlHttpRequest—XmlHttpRequest allows the browser to communicate to a back-end server.

This object allows the browser to talk to the server without requiring a postback of the entire

web page. With Internet Explorer, this capability is provided by the MSXML ActiveX component. With the Mozilla Firefox and other web browsers, this capability is provided by an object literally called XmlHttpRequest. The XmlHttpRequest object is modeled after the MSXML component. The client-side JavaScript libraries hide the differences between the various browser environments. Sometimes these communications are done through a hidden FRAME or IFRAME.

❑ JavaScript—JavaScript provides the capabilities to communicate with the back-end server.

The JavaScript must be version 1.5 or later. Although JavaScript is not specifically required, it

is needed from the standpoint that JavaScript is the only client-side scripting environment supported across the major modern web browsers. There are other client script languages; however, these are not supported across all browsers.

❑ DHTML/DOM support—The browser must support the ability to dynamically update form

elements, and the ability to do this in a standard way comes through the support for the

Document Object Model (DOM). By supporting the DOM, it becomes easy for developers to

write a single piece of code that targets multiple browsers. 

❑ Data transport with XML or JSON—Using XML allows for the ability to communicate with

the web server in a standard mechanism. There are situations where the JavaScript Object

Notation (JSON) is used as the communication notation instead of straight XML.

Running Ajax Applications 

Unfortunately, not all web browsers ever produced will support Ajax. To run Ajax, a web browser must:

❑ Be relatively modern. Ajax style applications are not available in all versions of all web browsers. Whereas Internet Explorer version 6, Firefox version 1.5, and Opera 8.5 provide support for these applications, older versions may be problematic because of their support for different versions of the other requirements.

❑ Support DOM.

❑ Utilize JavaScript.

❑ Support Extensible Markup Language (XML) and Extensible Style Language Transformation

(XSLT).

❑ Possibly have ActiveX enabled on the client. If you are using the Internet Explorer browser

while running on Windows, you may have problems if ActiveX is not enabled.