Mastering the Dojo Toolkit, part 2nd: XHR Framework and Dojo

Thoughts on the object of XMLHttpRequest

In traditional page-like browser and server interaction mode, each server request will cause the entire page to reload, even if you need to update only a small part of the page (such as display a login error message). The advent of Ajax technology to the page has brought some changes, the most intuitive than the site's page appears more and more "Loading ...", "Loading ..." and other information, some suddenly like the night spring Breeze, loading loading everywhere open meaning. "Loading ..." or "Loading ..." means that the browser is interacting with the server, and after the interaction is done, the page will be refreshed locally, which, though simple, can greatly improve the user experience of the WEB application. The core of the implementation of this pattern is the XMLHttpRequest (hereafter referred to as XHR) object.

XHR objects contribute to the emergence of more and more "single page" Web applications. Use the XHR object to send an asynchronous HTTP request. Because it is asynchronous, the page can still be manipulated during browser and server interaction. When there are multiple XHR objects in the page that are called asynchronously, things change in a qualitative way, each XHR object can communicate independently of the server, and the page in the browser is like a multithreaded application. The features of this multithreaded asynchronous invocation have had a great impact on the development of WEB applications, and more and more such "single page" apps like Google Mail have sprung up and become popular. The reason we can do "single page" is because there are a lot of XHR objects silently behind the scenes, and we can firebug to see how many XHR objects are "produced" each time the action on the Google Mail page is enabled.

Another benefit of using the XHR object is that it can reduce the amount of data returned by the server, thereby enhancing the performance of the system. In the original B/S interactive mode, the server returns a coarse-grained HTML page; After using the XHR object, the server returns fine-grained data, such as html,json,xml, note that this returns data instead of a page, which means that only the content that needs to be updated is returned. Instead of returning other content that already appears on the page, the amount of data returned from the server is less than it used to be. AJAX-enabled Web applications take a long time to load initially, but after loading, their performance is much better than the original Web application.

This article describes some of the changes that XMLHttpRequest objects have brought to web development, which are important reasons for the popularity of Ajax technologies, and the knowledge that these changes can help developers design and develop efficient Web applications. This article does not intend to introduce the attributes and methods of XMLHttpRequest, many articles have done very well in this respect.

XHR Framework

The XMLHttpRequest object is the foundation of the XHR framework in Dojo, which is now supported by mainstream browsers, but is not implemented in different browsers, IE5, IE6 in the way of ActiveX objects, Firefox and Safari are implemented as an internal , so you need to test the browser's type before creating the XHR object, listing 1 shows the simplest code to create the XHR object.

Listing 1

function　createXHR(){
　　if　(window.XMLHttpRequest)　{　//　Non　Ie
　　　　return　new　XMLHttpRequest();
　　}
　　else　if　(window.ActiveXObject)　{　//　Ie
　　　　return　new　ActiveXObject("Microsoft.XMLHTTP");
　　}
}

Perhaps recognizing the importance of the XHR object, Microsoft has implemented it as a Window object attribute in IE7. However, the code that determines the browser type is still not eliminated, because IE5, IE6 still has a large number of users.

Inconsistent XHR object creation is one reason for the birth of the Dojo XHR framework, and more importantly because the original XHR object is not strong enough to meet the needs of development: first XHR The return type supported by the object is limited, the original XHR object is only ResponseText and RESP Onsexml two attributes represent the returned data, the important Data Interchange Format JSON is not supported, then the HTTP request timeout cannot be set, and the timeout period allows client script to control the time of the request, rather than passively waiting for server-side return.

Based on these issues, the Dojo organization provides a set of functions to support various HTTP requests, including Xhrget,rawxhrpost,xhrput,rawxhrput,xhrput,xhrdelete, which correspond to one by one of the four requests in the HTTP protocol , HTTP four requests are: get (read), Post (update), put (create), delete (delete). The Dojo organization's initiator, Alex Russell, puts these functions associated with XHR objects together, called the XHR framework. Let's look at how Dojo creates XHR objects. Listing 2 is a snippet of code that creates the XHR object in Dojo 1.1.

Listing 2

d._xmlhttp_progids = [' msxml2.xmlhttp ', ' microsoft.xmlhttp ', ' msxml2.xmlhttp.4.0 '];
d._xhrobj= function () {
var http = null;
var last_e = null;
if (!dojo.isie | |!djconfig.ieforceactivexxhr) {
try{http = new XMLHttpRequest ();} catch (e) {}
}
if (!http) {
for (var i=0; i<3; ++i) {
var ProgID = dojo._xmlhttp_progids[i];
try{
http = new ActiveXObject (ProgID);
　　　　　　}catch (e) {
Last_e = e;
　　　　　　　　
if (http) {
Dojo._xmlhttp_progids = [ProgID];
Break
}
}
}
if (!http) {
throw new Error ("XMLHTTP Not available:" +last_e);
}
return HTTP;//XMLHttpRequest Instance
}

_xhrobj is the XHR object that Dojo creates. Is it a little "verbose" compared to listing 1? In fact, although a lot of try-catch statements, but these try-catch blocks ensure that even if the creation of XHR objects error, the browser will not crash, enhance the robustness of the Code; In addition, the code for IE browser "care" very much, three XHR The namespace that the object may exist (' MSXML2. XMLHTTP ', ' microsoft.xmlhttp ', ' msxml2.xmlhttp.4.0 ') have all made the judgment, only then can guarantee XHR object in each different browser can "be born" smoothly. From this code you can see that to write robust, efficient code, developers must have a systematic mindset and be able to use error-handling mechanisms appropriately. Each of the methods in the XHR framework is described below.