Collation of common knowledge points in JS

  • 2021-07-13 03:57:31
  • OfStack

1.CORS

CORS (Corss-Origin Resource Sharing, cross-resource sharing), the basic idea is to use a custom HTTP header to let the browser communicate with the server to determine the success or failure of a request or response. That is, attach an additional Origin header to the request, which contains the source information (protocol, domain name and port) of the request page, so that the server can decide whether to respond according to this header.

2.document.domain

By setting the page's document. domain to the same value, pages can access each other's JavaScript objects.

Note:

You cannot set a value to a field not included in URL;

Loose domain names can no longer be set to tight domain names.

3. Image Ping


var img=new Image();
img.onload=img.onerror=function(){
... ...
}
img.src="url?name=value";

The request data is sent in the form of a query string, and the response can be anything, typically a pixel map or a 204 response.

Image Ping is most commonly used to track the number of times users click on pages or dynamic advertisement exposures.

Disadvantages:

Only GET requests can be sent;

The response text of the server cannot be accessed, and can only be used for one-way communication between the browser and the server.

4.Jsonp


var script=document.createElement("script");
script.src="url?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

JSONP consists of two parts: callback function and data

A callback function is a function that should be called in the page when a response is received, and its name 1 is specified in the request.

The data is JSON data passed into the callback function.

Advantages:

The response text can be accessed directly, which can be used for two-way communication between browser and server.

Disadvantages:

JSONP loads code execution from other domains, which may not be secure;

It is difficult to determine whether the JSONP request failed.

5.Comet

Comet enables the server to push data to the browser.

Comet is the implementation: long polling and streaming

Short polling means that the browser regularly sends requests to the server to see if there are any data updates.

Long polling means that the browser sends a request to the server, and then Server 1 keeps the connection open until there is data to send. After sending the data, the browser closes the connection and then initiates a new request to the server. The advantage is that it is supported by all browsers and can be implemented using XHR objects and setTimeout ().

Stream means that the browser sends a request to the server, while the server keeps the connection open, and then periodically sends data to the browser, using only one HTTP connection in the whole life cycle of the page.

6.WebSocket

WebSocket provides full-duplex, two-way communication over a single persistent connection.

WebSocket uses a custom protocol, ws://for unencrypted connections; The encrypted link is wss://.


var webSocket=new WebSocket("ws://");
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
... ....
}

Note:

You must pass an absolute URL to the WebSocket constructor;

WebSocket can open a connection to any site, and whether it will communicate with pages in a domain depends entirely on the server;

WebSocket can only send plain text data. For complex data structures, JSON. stringify (message) must be serialized before sending.

Advantages:

Send very little data between client and server, reducing byte overhead.


Related articles: