Wechat official account: [Dafront-end Yizhan] Follow Dafront-end Yizhan. Questions or suggestions, welcome the public account message.

This is the 16th day of my participation in the August Text Challenge.More challenges in August

Before CORS, implementing Ajax communication across sources was a bit of a hassle. Developers need to rely on DOM features that can execute cross-source requests to send certain types of requests without using XHR objects. Although CORS is now widely supported, these technologies are not obsolete because they do not require server modifications.

Image detection

Image detection is one of the earliest technologies for cross-domain communication using < IMG > tags. Any page can load images across domains without worrying about restrictions, so this is the main way to track online ads.

You can create images on the fly and know when a response is received through their onLoad and onError event handlers. This technique of dynamically creating images is often used for image pings. Image detection is a simple, cross-domain, one-way communication with the server. The data is sent as a query string, and the response can be set at will, but typically a bitmap image or a status code with a value of 204. The browser doesn’t get any data from image probes, but it can listen for onLoad and onError events to know when to expect a response.

let img = new Image() img.onload = img.onerror = function() { alert("Done!" ) } img.src = "http://www.example.com/test?name=Nicholas"Copy the code

This example creates a new Image instance and adds the same function to its onLoad and onError event handlers. This ensures that whatever response is notified when the request completes. The request begins after the SRC attribute is set. This example sends a name value to the server.

Image detection is frequently used to track user clicks on a page or to dynamically display ads. Of course, the downside of image probing is that you can only send GET requests and can’t GET the content of the server’s response. This is why only image probes can be used for one-way communication between the browser and the server.

JSONP

JSONP, short for “JSON with padding,” is a popular JSON variant of Web services. JSONP looks just like JSON, but is wrapped in a function call, for example

callback({ "name": "Nicholas" })
Copy the code

The JSONP format consists of two parts: callbacks and data. A callback is a function that should be invoked after the page receives a response, and usually the name of the callback function is dynamically specified by request. The data is the JSON data passed as arguments to the callback function. Here is a typical JSONP request:

http://freegeoip.net/json/?callback=handleResponse
Copy the code

The URL for this JSONP request is a location service. JSONP services typically support specifying the name of a callback function as a query string. This example specifies the name of the callback function as handleResponse(). JSONP calls are implemented by dynamically creating <script> elements and specifying cross-domain urls for SRC attributes. The <script> element at this point is similar to the <img> element and can load resources from other domains without restriction.

Because JSONP is valid JavaScript, JSONP responses are executed as soon as they are loaded.

function handleResponse(response) {
 console.log(`
 You're at IP address ${response.ip}, which is in
 ${response.city}, ${response.region_name}`)
}
let script = document.createElement("script")
script.src = "http://freegeoip.net/json/?callback=handleResponse"
document.body.insertBefore(script, document.body.firstChild)
Copy the code

This example shows the IP address and location information obtained from the location service.

JSONP is very popular among developers because of its ease of use. In contrast to image probing, JSONP allows direct access to the response, enabling bi-directional communication between the browser and the server.

JSONP also has the following disadvantages:

  • JSONP pulls executable code from different domains. If the domain is not trusted, malicious content may be added to the response. At this point there is no alternative but to remove JSONP completely.When working with uncontrolled Web services, make sure you can trust them.
  • It is difficult to determine whether the JSONP request failed. Although HTML5 specifies an onerror event handler for <script> elements, it has not been implemented by any browser. To do this, developers often use timers to decide whether to forgo waiting for a response. This method is not accurate, after all, different users of the network connection speed and bandwidth is different.














Pay attention to the bottom [Big front End station]
Let’s learn and make progress together

[Share, like, watch] Let more people join us