Cross-browser innerHTML settings

Ajax is a good thing, but it is not so convenient to use. The problem is summarized as follows:

The creation method and usage method on various browsers are inconsistent
Different browsers have different cache policies for responses.
Browser cross-origin access restriction
The first two problems can be solved by encapsulating the XMLHTTPRequest object. There are many solutions to the third problem. The better compatibility and portability is to place a transit proxy on the Local Domain Server. Modello. ajax is a tool set that provides this solution.

Install
Download Modello and Mdello. ajax
Decompress the package and put the modello. js, modello. ajax. js, and jsproxy. php files into any file directory on your server.
The html page contains the modello. js and modello. ajax. js script files.
Urlget Method
Modello. ajax is very simple to use. See the following example:

// Set Define ('urlget _ proxy', '/jsproxy. php '); // powerful urlget method var urlget = Class. get ('modello. ajax. urllib '). urlget; var url = '... '; // obtain var response = urlget (url) through synchronous GET; // obtain var data =' using synchronous POST method '... '; var response = urlget (url, data); // obtain var callback = function (response) using the asynchronous POST method ){//...} var ret = urlget (url, data, callback); // set the request header var headers = ["User-Agent: Modello. ajax's urlget "]; var ret = urlget (url, data, callback, headers); // use the named channel var chunnel = '... '; var ret = urlget (url, data, callback, headers, chunnel); // use the Response object if (response. getStatus () == 200) {alert (response. getText ();} // sets the cross-origin transit proxy path
Define ('urlget _ proxy', '/jsproxy. php ');

// Powerful urlget Method
Var urlget = Class. get ('modello. ajax. urllib'). urlget;

Var url = '...';

// Obtain the synchronous GET Method
Var response = urlget (url );

// Obtain the synchronous POST method
Var data = '...';
Var response = urlget (url, data );

// Obtain the asynchronous POST method
Var callback = function (response ){
//...
}
Var ret = urlget (url, data, callback );

// Set the Request Header
Var headers = ["User-Agent: Modello. ajax's urlget"];
Var ret = urlget (url, data, callback, headers );

// Use the named Channel
Var chunnel = '...';
Var ret = urlget (url, data, callback, headers, chunnel );

// Use the Response object
If (response. getStatus () = 200 ){
Alert (response. getText ());
}

The urlget parameters are described as follows:

Url: the URL of the target resource.
Data: POST data. If data is null, use the GET method to obtain the data.
Callback: gets the callback function asynchronously. If callback is empty, use synchronous retrieval.
Headers: append the request header. This is an array. each item is a string and a line of header is set. line breaks cannot be carried at the end of the string.
Chunnel: Name channel. Used to reuse a connection channel.
Urlget return value:

If it is obtained synchronously, the Response object is returned successfully. If it fails, false is returned. If the result is obtained asynchronously, true is returned successfully, and the callback function is called after the result is obtained. If the result is failed, false is returned. If a named channel is specified, but the channel is being occupied by other requests, both synchronous and asynchronous return false.

Callback function parameters:

Response: Response object.
Chunnel: The name channel specified during the call.
Response object
The Response object is used to access various data items in the Response. It provides the following interfaces:

Response. getStatus (); // HTTP response code (integer) response. getStatusText (); // response. getHeader (key); // response header data specified by the key. getAllHeaders (); // response of all header data (excluding status rows) response. getRawHeader (); // response's original header data (including status rows) response. getText (); // response body data response. getXML (); // The response body data is formatted as the Xml Document Object response. getStatus (); // HTTP response code (integer)
Response. getStatusText (); // literal explanation of the response code
Response. getHeader (key); // response header data specified by the key
Response. getAllHeaders (); // all response header data (excluding status rows)
Response. getRawHeader (); // response's original header data (including status rows)
Response. getText (); // response body data
Response. getXML (); // The response body data is formatted as an Xml Document object.

In most cases, the urlget function is sufficient, and can be used across browsers and cross-domains. If you want to perform more underlying operations, Modello. ajax provides two base classes for cross-browser use: Connection and Request.

Connection class
This is a static class that provides cross-browser methods to return an XMLHTTPRequest object. The usage is as follows:

/** A cross-browser XMLHTTPRequest object is returned successfully. * If the request fails, null is returned. */Var conn = Class. get ('modello. ajax. connection'). get ();/*
* A cross-browser XMLHTTPRequest object is returned,
* If a failure occurs, null is returned.
*/
Var conn = Class. get ('modello. ajax. connection'). get ();

Request class
This is an encapsulation of the XMLHTTPRequest object. It provides easier-to-use interfaces and solves the browser's issue of response caching, but does not provide cross-origin retrieval. The attributes and methods provided by Request are as follows:

/** Class path */var Request = Class. get ('modello. ajax. request ');/** create instance * url, method, and data are optional parameters */var request = new Request ([url [, method [, data]); /** set URL */request. setURL (url);/** sets the obtaining method. Currently, the following methods are supported: GET, POST, HEAD */request. setMethod (method. Currently supported: GET, POST, HEAD */request. setData (data);/** set the callback function *. The prototype of the callback function is * var callback = function (response) {}; */request. setHandler (handler);/** set the request header */request. setHeader (key, value);/** add request header */request. addHeader (header);/** send request * async is true. The call is successful in asynchronous mode * by default in synchronous mode *, and the response object is returned in synchronous mode, return true in asynchronous mode * call failure, always return false */request. open ([async]);/** query the status of the current request * returns a string description, which may be: * Uninitialized: not initialized * Loading: initialized * Loaded: sending data * Interactive: * Complete in data transmission: Completed */request. getState ();/** return the currently used Connection object */request. getConnection ();/** return Response object * if the current request status is not Complete, return null */request. getResponse ();/** abort current request */request. abort ();/** clear all request headers */request. reset ();/** In addition to the above method, you can also set an event handler function for the Request object * There are a total of the following events */request. onException = function () {}; request. onLoading = function () {}; request. onLoaded = function () {}; request. onInteractive = function () {}; request. onComplete = function (){};/*
* Class path
*/
Var Request = Class. get ('modello. ajax. request ');

/*
* Create an instance
* Url, method, and data are optional parameters.
*/
Var request = new Request ([url [, method [, data]);

/*
* Set URL
*/
Request. setURL (url );

/*
* Set the obtaining method. Currently, GET, POST, and HEAD are supported.
*/
Request. setMethod (method );

/*
* Set the obtaining method. Currently, GET, POST, and HEAD are supported.
*/
Request. setData (data );

/*
* Set the callback function
* The callback function is prototype:
* Var callback = function (response ){};
*/
Request. setHandler (handler );

/*
* Set the Request Header
*/
Request. setHeader (key, value );

/*
* Add a Request Header
*/
Request. addHeader (header );

/*
* Send a request
* If async is set to true, asynchronous mode is used.
* Synchronization mode is used by default.
* The call is successful. The response object is returned in synchronous mode and true is returned in asynchronous mode.
* If the call fails, false is returned.
*/
Request. open ([async]);

/*
* Query the status of the current request
* Returns a string description, which may be:
* Uninitialized: not initialized
* Loading: initialization
* Loaded: send data
* Interactive: data transmission in progress
* Complete: Complete
*/
Request. getState ();

/*
* Returns the currently used Connection object.
*/
Request. getConnection ();

/*
* Response object
* If the current request status is not Complete, null is returned.
*/
Request. getResponse ();

/*
* Abort the current request
*/
Request. abort ();

/*
* Clear all request headers
*/
Request. reset ();

/*
* In addition to the above method, you can also set event processing functions for the Request object.
* There are a total of the following events:
*/

Request. onException = function (){};
Request. onLoading = function (){};
Request. onLoaded = function (){};
Request. onInteractive = function (){};
Request. onComplete = function (){};

Jsproxy
For cross-origin calls, Modello. ajax sets a transit proxy on the Local Domain Server. Using proxy, you do not need to make special settings for individual browsers, do not rely on specific servers, and have the advantages of scalability. The proxy provided with the Modello. ajax toolset is written in php, and can be installed on all servers that can run php. The proxy can also be written in other languages. Modello. ajax plans to provide the python version of jsproxy in later versions. The following describes the jsproxy design. If you need it, you can refer to it to implement jsproxy in other languages.

Jsproxy receives three POST parameters: url, data, and headers. The url is the URL address of the target resource, the data is POST data, if it is null, use the GET method to obtain the resource, and the request header data appended to headers. Based on these parameters, jsproxy obtains the target resource and forwards all received response headers and response bodies to the requester. The parameters received by jsproxy are issued by Modello. ajax and the character set is UTF-8. Pay attention to this when dealing with them. Jsproxy has many possible response character sets. before forwarding a response, jsproxy should automatically detect the current response character set and specify it in the response header. If this step is ignored, the response received by the requester may be garbled.

Urlparse, urljoin Function
URL Processing functions such as urlparse and urljoin are common in other scripting languages, but not in JavaScript. Modello. ajax provides these two functions. The urlget function mentioned above uses these two functions internally. The following describes their usage:

/** Urlparse: URL analysis function */var url = 'HTTP: // user: pass @ host: port/path? Query # flagment '; var ret = Class. get ('modello. ajax. urllib '). urlparse (url); // At this time // ret. user = 'user' // ret. pass = 'pass' // ret. host = 'host' // ret. post = 'post'. The default value is 80 // ret. path = 'path', starting with '/' // ret. query = 'query' // ret. flagment = 'flagment '/** urljoin: merge two URLs */var url1 = 'HTTP: // www.example.com/about/about.html' using var url2 ='/index.html '; var URL = Class. get ('modello. ajax. urllib '). urljoin (url1, url2); // At this time // url = 'HTTP: // www.example.com/index.html '/*
* Urlparse: URL Analysis Function
*/
Var url = 'HTTP: // user: pass @ host: port/path? Query # flagment ';
Var ret = Class. get ('modello. ajax. urllib'). urlparse (url );
// At this time
// Ret. user = 'user'
// Ret. pass = 'pass'
// Ret. host = 'host'
// Ret. post = 'post'. The default value is 80.
// Ret. path = 'path', starting '/'
// Ret. query = 'query'
// Ret. flagment = 'flagment'

/*
* Urljoin: merge two URLs.
*/
Var url1 = 'HTTP: // www.example.com/about/about.html ';
Var url2 = '/index.html ';
Var url = Class. get ('modello. ajax. urllib'). urljoin (url1, url2 );
// At this time
// Url = 'HTTP: // www.example.com/index.html'

Summary
Everything provided by Modello. ajax has been described. I hope it can help you accelerate the development of Ajax applications ;)