Ajax, comet, and WebSocket

This article is written primarily to summarize the knowledge that has been learned, so there is almost no explanation.

First, Ajax

1. The main feature of AJAX applications is the use of scripts to manipulate HTTP and Web servers for data exchange without causing page overloading

2. You can initiate a GET request to the HTTP server by setting the SRC attribute of the img tag. The server must actually return a picture as a result, but it will not be visible. For example, a 1x1 transparent picture. This technique, called beacons, is a very safe and efficient way to send information to the server, and server-side errors do not affect client code execution. The disadvantage is that the return information cannot be received. and is restricted by the same Origin policy

3. The IFRAME can also initiate a GET request, and the more powerful thing is that the server can return an HTML document to display in the IFRAME. But it's also limited by the same-origin strategy

4. The script element can send a GET request across domains, and the JavaScript parser will automatically "decode" when the server returns a JSON-formatted data. This type of request is called JSONP. Because the results returned by the server are executed as script content, security should be considered when using JSONP

5. The most common way to implement Ajax is through XMLHttpRequest, which can be applied to HTTP or HTTPS requests. Supports any text-based format. You can use the post, PUT, DELETE, head, and other request methods.

A standard AJAX request is as follows (compatible with IE7):

1 varurl = '/user '2     varparam = {3Username: ' Sunken ',4Password: ' 123456 '5     }6 7     varreq =NewXMLHttpRequest ()8 9Req.open (' POST ', ' http://sunken.me/content ')TenReq.onreadystatechange =function() { One  A         if(Req.status = = && Req.readystate = = 4) { -  -             vardata =Req.responsetext the  - console.log (data) -         } -     } +  -Req.setrequestheader (' Content-type ', ' Application/json ') +Req.send (param)

Under IE 5/ie 6, you can use the following code:

1 if(Window. XMLHttpRequest = = =undefined) {2Window. XMLHttpRequest =function() {3 4         Try {5             //if available, use the latest version of the ActiveX object6             return NewActiveXObject (' msxml2.xmlhttp.6.0 ')7         8}Catch(E1) {9 Ten             Try { One  A                 //otherwise go back to the old version -                 return NewActiveXObject (' msxml2.xmlhttp.3.0 ') -  the}Catch(E2) { -  -                 //Error -                 Throw NewError (' XMLHttpRequest is not supported ') +             } -         } +     } A}

6. CORS(cross-origin Resource sharing cross-domain resource sharing) is a new feature of XMLHttpRequest 2.0, in IE 8 to use its own xdomainrequest

7. Depending on cors, cross-domain AJAX requests can be made easily, and no settings are required for cross-domain. (As long as server-side support is turned on)

8. Determine if the browser supports cors by checking whether the Withcredential property exists

1 var New XMLHttpRequest () 2 var support = req.withcredentials!== undefined

Second, Comet

1. Comet is passive Ajax, which is pushed to the client by the server-initiated communication, and the client then requests the data from the server.

2. By using the EventSource () constructor, it is very easy to create an application of the comet architecture

1 var New EventSource ('/message ')23function(e) {4     var type = e.type5     var data = e.data6 }

3. IE has not yet supported EventSource, but can be simulated using XMLHttpRequest

Third, WebSocket

1. WebSocket is the underlying network interface name, which defines a full-duplex communication channel that requires only one websocket to communicate

2. WebSocket is more advantageous than comet, saving the overhead of establishing HTTP connection and transmitting header information

3. You can use window. WebSocket to perform browser detection

4. The WebSocket object has three events: OEPN, close, and message. The Open event is triggered when the connection is established, the message event is triggered when the messages are received, and the close event is triggered when the connection is closed

1 varurl = '/message '2 varW =NewWebSocket (URL)3 4W.onopen =function() {5W.send (' Set up a connection, thanks ')6 }7 8W.onmessage =function() {9 Console.log (e.data.tostring ())Ten } One  AW.onclose =function() { -W.send (' Goodbye ') - } the  -W.onerror =function() { -Console.log (' ERROR ') -}

Ajax, comet, and WebSocket