I understand the Ajax Cross-domain event agent, commissioned 20170222am

first the code.

function SubmitData () {

var xhr = createxhr (); Creates a Xhr object.

Xhr.onreadystatechange = function () {

if (xhr.readystate = = 4) {//ensures that all response data has been obtained

if ((Xhr.status >= 200&&xhr.status< 300) | | xhr.status==304) {//Confirm that the response returned successfully.

alert (Xhr.responsetext);

}else{

Alert ("request was unsuccessful" + xhr.status);

}

}

};

}; Avoid cross browser incompatibility before open (). The code uses the Dom0-level method to add an event handler for the XHR object, because not all browsers support the Dom2 method.

Xhr.open ("Post", "tsxt.php", true); Prepare the request. Send a request to the server requesting tsxt.php. True indicates Asynchrony.

Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Sets the request header information.

var form = document.getElementById ("User-info");

Xhr.send (Form) (serialize); Formally send the request. Gets the form data that is ID user-info and then sends it to the server.

After three lines of code: Use XHR to simulate form submission. The server must have the program read the original data sent over and parse out the useful parts from it.

XHR Properties:

ResponseText: Responding to returned information

Responsexml: Response to returned XML DOM text (provided that the corresponding content type is text/xml or application/xml)

Status:http Status Code

Description of the Statustext:http status code

readystate:0: Open () not invoked, uninitialized. Initialization is assigning variables as defaults, setting the control to the default state, and preparing unprepared.

1: Call Open () without calling Send ()

2: Call Send (), no response received

3: Send partial response information

4: Send all response information, can be used on the client.

Dom0-level method, DOM2-level method:

Dom0 level: 1, write the onclick in the label

<input id= "TFS" onclick= "alert"; >

2, in js write onclick = function () {} functions.

document.getElementById ("TFS"). onclick = function () {

alert ();

}

Dom2 level:

The difference between the two:

Event Agent Delegate

cross-domain.

JSONP Click on the Open link

1, JsonP: JSON included in the function call.  Callback ({"Name": "TFS"}); Composition: Callback functions and data.

var script = Document.createlementbyid ("script");

SCRIPT.SRC = "Http://tfs.com/json/?callback = Handleresponse";

Document.body.insertBefore (Script,document.body.firstchild);

function Handleresponse () {

Alert ("Bala");

}

In order to facilitate the use of data by the client, an informal transport protocol has been developed, which is called JSONP, and one of the key points of this protocol is to allow the user to pass a callback parameter to the server, The server side then returns the data by wrapping the callback parameter as the function name to wrap the JSON data so that the client can customize its own function to automatically process the returned data.

Advantages: 1, you can access the response text. 2, support client and server-side two-way communication.

Disadvantages: 1, JSONP is loading code from other domains, easy to occur security problems. 2, it is difficult to determine whether the JSONP request failed.