Javascript:ajax and Comet

Tag: State change style text script size star POS Request Object

One: Using XMLHttpRequest objects

The core of Ajax is the XMLHttpRequest object. IE7 The following browser XHR definition methods are different. For the higher-level browser var xhr = new XMLHttpRequest ().

var xhr  new  XMLHttpRequest (); Xhr.open () xhr.send (null)

The Xhr.open receives three parameters, the first of which is the Send mode get or post. The second parameter is the URL, and the third parameter is the Boolean value, whether it is asynchronous.

Xhr.send (NULL), the parameter is the data sent to the server, and if not, must be written null.

The browser's response data is used as the Xhr property: Respensetext,responsexml,status,statustext. A status of 200 indicates success, and a status of 304 indicates that the content has not been modified and can be used directly from the cache.

2) under an asynchronous request, the Xhr property readystate, representing the current active state, equals 4, indicates success, and whenever the state changes, the onreadystatechange () event is called, and the definition of the event must precede the Xhr.open function.

Xhr.abort () canceling an asynchronous request

3) Set and get header information for HTTP requests

Set by Method Xhr.setrequestheader (the name of the header field name, the value to be set).

Get header information for the response: Xhr.getresponseheader (header field name), getAllResponseHeaders () Get All header information

4) Get request--url string encoding problem

Each string in the URL must be encoded using encodeurlcomponent (), such as Example.php?name1=value1&name2=value2

5) Post request

Send data to the server, Xhr.send. The FormData object, which defines the sent form object, var data = new FormData (), Data.append (Key,value), FormData object is present in the XHR2 level.

6) Timeout time-out setting

Xhr.timeout = 1000hs. OnTimeOut event is triggered when timeout, xhr.ontimeout = function () {}

varXHR =NewXMLHttpRequest (); Xhr.onreadystatechange=function(){  if(Xhr.readystate = = 4)       {    Try{    if((xhr.statue>=200 && xhr.status<=300) | | xhr.status==304) {Xhr.responsetext}}Catch(ex) {//Suppose there are ontimeout processing events}}}xhr.open (); Xhr.timeout= 1000; Xhr.ontimeout=function() {}xhr.send (NULL)

　　　

Two: Using the XMLHttpRequest Event

Progress Event: The following 6 progress events are available. Loadstart,progress, error, Abort, load, loadend.

1) Use Load event optimization:

var xhr  newfunction() {          try{    if ((xhr.statue>=200 && xhr.status<=300) | | xhr.status==304)          {xhr.responsetext}}  catch(ex) {//  Suppose there is a ontimeout processing event}      =thefunction() {}xhr.send (null )

Whenever the browser receives a server response, the load event is triggered regardless of the state, so the status must be checked.

2) Create a progress bar using the Progress event

The OnProgress event receives an events object that has a property target, points to the Xhr object, and also includes a Lengthcomputabel (Boolean indicating availability), totalsize, position.

Three: Limitations of cross-domain AJAX communication

CORS (cross-domain resource sharing), the basic idea is to customize the HTTP header information to allow the browser to communicate with the server, so as to determine whether the request is successful or failed.

Javascript:ajax and Comet