A collection of cross-domain technologies in JS

Image Ping

1, Introduction:

An image ping is a simple, one-way, cross-domain communication with the server, and the requested data is sent in the form of a query string, which can be any content, but usually a pixel graph or 204 corresponding (No content).

2. How to use:

var img = new Image (); img.onload = Img.onerror = function () {   alert ("done!");}; IMG.SRC = "Http://www.example.com/test?name=Nicalos";

3. Application:

Image pings are often used to track how many times a user clicks a page or dynamic ad exposure.

4. Advantages and Disadvantages:

Image Ping has two main drawbacks: the first is to send only get requests, followed by the inability to access the server's response text.

JSONP

1, Introduction:

JSONP (JSON with padding), JSONP is similar to JSON, except that JSONP is a JSON that is contained in a function call. Jsonp is made up of two parts, part of which is the callback function, and part of the data. The callback function is the function that should be called in the page when the response arrives, and the data is the JSON data that is passed into the callback function.

2. How to use:

function Handleresponse (response) {    alert ("You were at IP address" +response.ip+ ", which was in" +response.city+ "," + Response.region_name);} var script = document.createelement ("script"); script.src = "Http://freegeoip.net/json/?callback=handleResaponse"; Document.body.insertBefore (Script,document.body.firstchild);

3, Advantages: First, he can directly access the response text; second, JSONP supports two-way communication between the browser and the server.

4. Cons: There is no guarantee that code loaded from other domains is secure, and there is no way to tell if the JSONP request failed.

Comet

1, Introduction: Comet is a more advanced Ajax technology, but Ajax is a page to the server to request data from the technology, and comet is a server to the page push data technology. Comet allows information to be pushed to the page in near real time. Suitable for dealing with sports scores and stock quotes.

2, the realization Way:

Long polling-that is, the browser periodically sends a request to the server to see if there is any updated data.

HTTP stream-only one HTTP connection is used throughout the life of the page, that is, the browser relaxes a request to the server, the server keeps the connection open, and then periodically sends the data to the browser.

Web Sockets

1, Introduction:

The goal of the WebSockets is to provide full-duplex, bidirectional communication on a single persistent connection. After creating the WebSockets in JS, an HTTP request is sent to the browser to initiate the connection, and after the server's response is obtained, the connection is made by using the HTTP interchange for the use of the Web sockets protocol. Unencrypted connection is: ws://, encrypted connection is: wss://.

2. How to use:

WebSockets must pass in absolute urlvar socket  = new WebSocket ("ws://www.example.com/server.php"); var message = {     Time:new Date ();     Text: "Helloword";     ClientId: The "ddddd"};//websocket sends the same data as the resulting return data socket.send (json.stringify (message));//When the server sends a message to the client, The OnMessage event is triggered socket.onmessage = function (event) {   var data = Event.data;} The same events are OnOpen, OnError, OnClose, but only the event object for the OnClose events has additional information socket.onclose = function (event) {    Console.log (" is clean? " +event.wasclean+ "code=" +event.code+ "reason=" +event.reason); };

3. Advantages and Disadvantages:

WebSockets can send very small amounts of data on the client and server side without worrying about the byte-level overhead of HTTP, and because the packets are small, the websocket is well suited for mobile applications, and his disadvantage is that the events that make the protocol are longer.