Entry to dojo: enhanced Ajax Functions

With the development of web technology, Ria seems to have become the mainstream, and Ajax has become an indispensable part. Ajax is Asynchronous JavaScript and XML. Although many interactive data formats do not strictly adopt XML, This asynchronous operation is becoming increasingly popular. Currently, mainstream JS toolkit includes Ajax functions, and dojo also has its own Ajax framework xhr.

Xhr framework

The xhr framework is a set of methods supported by dojo for Ajax. It allows the server to send get, post, put, and delete requests. These methods include:

• Xhrget
• Xhrpost
• Xhrput
• Xhrdelete

All these functions follow the same syntax: an attribute configuration object is accepted as a parameter. In these objects, you can define all aspects of the Ajax request you want to send. Once again, these options are the same in all xhr functions.

Common options:

• URL: the URL of the HTTP request. It must have the same domain and Port Combination as the page that sends this request.
• Handleas: allows you to define the processing format of the response. The default value is text. However, JSON, JavaScript, XML, and other options are also available. After this section, you will see an example of creating an Ajax request using a callback function that processes the JSON response format.
• Form: a reference or string ID of the <form> element. The value of each field in form will be sent together with the request as the request body.
• Content: an object that contains the parameters you want to pass to the resource in the Request body. If both are provided, this object will be mixed with the values obtained from the form attribute.
• Load: this function is executed when an Ajax request returns a successful response message. Response Data and request objects are passed to this function as parameters.
• Error: if an error occurs in the Ajax request, the function will be called. If the URL defined in the Ajax request is invalid, the request times out, or other HTTP errors occur, this will occur. The error message and request object are passed as parameters.
• Handle: This function allows you to merge the load and error callback functions into a function (this is useful if you do not really care whether the request result is successful or has an error ).

These types of requests are useful for building a rest-style framework. You can use xhrget to view data, xhrpost to modify data, xhrput to create data, and xhrdelete to delete data, each type of request corresponds to a specific operation on the server.

 

Use IFRAME to upload files

Xhr is highly operable for common Web requests, but it is tricky to perform operations such as asynchronous file upload. However, it doesn't matter. dojo has come up with this for us.

Dojo implements this advanced data transmission by using IFRAME. I used jquery to implement an asynchronous upload of files through IFRAME.ProgramThe principle is to set the object submission target to IFRAME, so that the page will not be refreshed during submission, and the content in IFRAME will be updated only when the server returns. This operation will have a progress bar, but the whole page will not be refreshed. Although it is not completely refreshing, it is absolutely useful to use it to upload files.

How does dojo. Io. IFRAME work? In addition to xhr objects, what other methods can be used to implement asynchronous form submission? In fact, all this is very simple, dojo. io. IFRAME first creates a hidden IFRAME and inserts it at the end of the parent page, set the src attribute of the IFRAME to Dojo-module-path/resources/blank.html (Dojo-module-path indicates the directory where the dojo package is located ), the onload event handler function on the IFRAME page is set as the callback function of the parent form. The next step is to send a request on the IFRAME page and receive the response from the server. When the IFRAME receives the feedback from the server and loads it, the callback function of the parent form is called.

 

Jsonp: Cross-origin Data Access

The functions in the xhr framework are powerful and easy to use. However, the xhr framework functions cannot be accessed across domains. the browser does not allow xhr objects to access sites in other domains.

Jsonp (jsonp padding) is generated to solve cross-origin access:

• Use the <JavaScript> </JavaScript> label to access the address that encapsulates JSON data.
• Encapsulate the data to be returned as a JSON object
• The data is returned to the browser and automatically executed.

This is the basic process of jsonp execution, but it is not easy to determine whether the data is loaded. The common practice is to set a callback method, the method name is sent to the server as part of the request parameter. After the server encapsulates the complete data, it generates the callback Method for execution.CodeAnd return all the information to the client. When the client executes the returned data, the callback method is also called.

 

Summary

This article introduces three methods of interaction between browsers and servers in Dojo. These three methods have their own advantages and disadvantages, but they are surprisingly consistent in use. The xhr framework function, dojo. io. IFRAME, dojo. io. the JSON object parameters used by functions of the script object are extremely similar and easy to understand. The good design by the dojo designer greatly reduces the Learning Burden of developers and should be understood as a framework developer.

The following table compares the three methods:

	Supported HTTP request types	Expected output	Cross-origin access
Xhr	Get, post, delete, put	Text, JSON, XML, JavaScript...	N
IFRAME	Get, post	Html	N
Script	Get	Javascript	Y

 

 

 

To sum up, the above three methods should follow a simple principle: IFRAME for transferring files, dynamic scripts for cross-origin access, and xhr framework for others.

 

This article is a summary of the author's learning process. Some content is referenced from the following address:

Http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro2/

http://www.ibm.com/developerworks/cn/web/wa-ground/