JavaScript (Ten)--ajax and cross-domain processing

Ajax and cross-domain processing

hahaha, finally wrote the last chapter. But it's not over yet, say, don't study for study, uh. I study for the sake of studying well. hahaha. is trying to fall in love with the code, although there is a loss of the difficult, but I believe I will!

"Ajax"

The core of Ajax technology is the XMLHttpRequest object (abbreviated as HXR). Ajax communication is independent of the data format, which is the technique of getting data from the server without having to refresh the page, but not necessarily the XML data.

"XMLHttpRequest Object"

IE5 is the first browser to introduce XHR objects. The XHR object is implemented through an ActiveX object in the MSXML library. In IE5, you may encounter XHR objects in the three versions of Msxml2.xmlhttp, msxml2.xmlhttp.3.0, msxml2.xmlhttp.6.0.

The use of XHR

When using the Xhr object, the first method to invoke is open (), which receives three parameters: the type of request to send ("get", "post", and so on), the requested URL, and a Boolean value that indicates whether the request was sent asynchronously.

XHR properties of an object

ResponseText: The text to be returned as the response body.

Responsexml: If the content type of the response is "text/xml" or "application/xml", this property will hold the XML DOM document containing the response data.

Status: Responds to HTTP state.

Statustext:http status Description.

HTTP header information

HTTP is a rule for computers to communicate over a network.

HTTP request Process:

(1) Establishing a TCP connection

(2) The Web browser sends a request command to the Web server.

(3) The Web browser sends the request header information.

(4) The Web server answers.

(5) The Web server sends the reply header information.

(6) The Web server sends data to the browser.

(7) The Web server closes the TCP connection.

The HTTP request consists of:

(1) The composition and method of the HTTP request, such as Get or POST request;

(2) The URL being requested;

(3) The request header, including the client environment information, authentication information and so on;

(4) The body of the request, that is, the request body. You can include query string information, form information, and so on for customer submissions.

Get requests and POST requests

Get: Generally used for information acquisition, using pass parameters, the number of messages sent is also limited, generally in 2000 characters.

A GET request often occurs when there is a problem with the format of the query string. The name and value of each parameter in the query string must be encoded with encodeuricompent () before it can be placed at the end of the URL, and all name-value pairs must be delimited by the number (&).

Post: Typically used to send data to the server that should be saved, typically used to modify resources on the server, with no limit to the number of messages sent.

A POST request consumes more resources than a GET request. From a performance standpoint, a GET request can reach up to twice times the speed of a POST request to send the same data meter.

"XMLHttpRequest2 level"

Fromdata

facilitates the serialization of forms and the creation of the same data as forms and the creation of the same form format (for transmission via XHR). A Fromdata object is created as follows, and some data is added:

var data=New  fromdata ();d ata.append ("name", "Nicholas");

This append () method accepts two parameters: the build and value, corresponding to the name of the form field and the values contained in the fields.

The use of fromdata biological convenience is manifested in the ambiguous setting of the request header on the XHR object. The XHR object is able to recognize that the incoming data type is an Fromdata instance and configures the appropriate header information.

Timeout settings

IE8 adds an attribute timeout to the Xhr object that indicates how many milliseconds the request waits for a response to terminate. After setting a value for timeout, the timeout event is triggered and the Ontimeouts event handler is called if the browser does not accept the response within the specified time.

Overridemimetype () Method: The MIME type used to override the XHR response.

"Cross-origin resource sharing"

By default, the XHR object can only access resources that are in the same domain as the page that contains it. CORS (cross-origin resource sharing) defines how the browser and the server should communicate when a cross-origin resource must be accessed. The basic idea behind Cors is that the custom HTTP header allows the browser to communicate with the server to determine whether the request or the corresponding should succeed or fail.

The implementation of IE to cors

Microsoft introduced the XDR type in IE8, which is similar to XHR, but enables secure and reliable cross-domain communication. The XDR object security mechanism partially implements the system and cors specifications.

All XDR requests are executed asynchronously and cannot be used to create synchronization requests. After the request is returned, the load event is triggered and the response data is saved in the ResponseText property. As follows:

var xdr=New  xdomainrequest (); xdr.onload=function() {    alert ( Xdr.responsetext);}; Xdr.open ("Get", "http://www.somewhere-else.com/page/"); Xdr.send (null);

"Other cross-domain technologies"

Image Ping

Dynamically created images are often used for image pings. Image Ping is a way of making simple, one-way, cross-domain communications with the server.

Image ping is most commonly used to track user clicks or dynamic ad exposure times. There are two main shortcomings in image Ping, one is to send only get requests, and the other is to not be able to access the response text of the server.

JSONP

JSONP is a shorthand for JSON with padding (filled JSON or parametric json). JSONP is similar to JSON, except that it is a JSON that is contained in a function call. As follows:

Callback ({"Name": "Nicholas"});

JSON consists of a callback function and a data component. A callback function is a function that should be called in the page when the response arrives. The name of the callback function is typically specified in the request, and the data is the JSON data that is passed into the callback function. As follows:

http://freegroip.net/json/?callback=handleresponse

"Comet"

Comet refers to a more advanced Ajax technology (often referred to as "server Push"). Ajax is a technique for requesting data from a page to a server, while Comet is a technique by which servers push data to a page.

There are two ways to implement comet, long polling and streaming.

Long polling is a replica of the traditional polling (that is, short polling), where the browser periodically sends a request to the server to see if the data is updated. Long polling bar The short poll reversed a bit. The page initiates a request to the server, and the server keeps the connection open until there is data to send. After the data is sent, the browser closes the connection and then initiates a new request to the server.

HTTP stream, the stream is different from polling because he uses only HTTP connections throughout the entire life cycle of the page. Specifically, the browser sends a request to the server, and the server keeps the connection open, and then periodically sends the data to the browser. All server-side languages support the ability to print to the output cache and then refresh (sending the contents of the output cache all at once to the client), which is the key to implementing the HTTP stream.

JavaScript (Ten)--ajax and cross-domain processing