Hi, I’m Tom, today we are going to talk about JSONP request 😫

What is the json

JSONP is a short name for JSON with Padding. JSONP is a cross-domain solution proposed by the civil society. JSONP is a request method issued by the script tag of the client.

That request why do so much trouble, directly using Ajax to do request is not beautiful, here will involve a homology and cross-domain problem, down.

Same-origin and cross-domain requests

The same origin policy is a famous security policy developed by Netscape.Copy the code

This strategy is now used by all browsers that support JavaScript. Same name means same domain name, same protocol, same port.

All non-same-origin requests (that is, one or more of the domain name, protocol, or port are different) are treated as cross-domain requests, and the browser discards the non-same-origin response data.

The browser is doing something, the server is actually returning data, the browser receives the returned data, finds that we are requesting a non-cognate data, and the browser discards the response message.

Requests made with tags such as script tags, IMG tags, etc., are not authenticated. This article describes JSONP requests made with script tags.

JSONP implementation process

Here is:

Process:

  1. Before sending a request, prepare a global receiver function

    window.myCallback = (res) = >{			// Declare a global function, 'callback', to receive response data
    console.log(res)
}
Copy the code

  2. Create a script tag in HTML and issue the request

    <html>.<script>		
		window.myCallback = (res) = >{			// This is the global function defined in the previous step
    		console.log(res)
		}
	</script>
    <script url="xxx? callback=myCallback">
    			// The request for the script tag must be written after defining the global function
    			// The global function name is passed as the value of the callback argument
    			// the key name callback is specified on the front and back end
	</script> 
	</body>
</html>
Copy the code

  3. The server receives the request and sends back the following data

    myCallback({			// A function call, passing in data as arguments, returns the entire function call to the client
	name:'ahreal'.age:18
})
Copy the code

  4. The client receives the corresponding message from the server, equivalent to:

    <html>.<script>		
		window.myCallback = (res) = >{			// This is the global function defined in the previous step
    		console.log(res)
		}
	</script>
    <script>							// Expand the received data as the contents of the script tag
        myCallback({					
            name:'ahreal',
            age:18
        })   			
	</script> 
	</body>
</html>
Copy the code

  5. Console output

Similarities and differences between JSONP and AJAX requests

Similarities:

  • They are used for the same purpose: the client requests data from the server and takes the data back to the client for processing.

Difference:

  • Ajax request is an official request method, through the XHR object to achieve, JSONP is a folk invention, script tag to achieve the request.
  • Ajax is an asynchronous request, jSONP is a synchronous request
  • Ajax has origin checking, jSONP has no origin checking, and the back end does not need to do response headers that resolve cross-domain issues.
  • Ajax supports various ways to request, whereas JSONP only supports GET requests
  • Ajax is easier to use than JSONP.

The interview

At this point, the concepts related to JSONP have been explained. When the interviewer asks you about JSONP request, there are two steps: 1. What is JSONP and 2.

Interviewer: Tell me about the JSONP request. Me: JSONP requests are first and foremost a folk solution to a cross-domain problem balabala... Browser has same-origin security mechanism Balabala... Send a request balabala... Need to bind back end classmates balabala... Only get requests balabala...Copy the code

Here you have answered the JSONP question for 80 points, if you can say:

emm... I used to package a jSONP plugin with native JS, Balabala...Copy the code

So you’re going to get a 100, and a lot of people are going to say,

But I have not packaged JSONP plug-in ah hello!Copy the code

Don’t worry, I have prepared another blog for you to encapsulate the JSONP request plug-in, which completely explains the idea and the implementation of the code. I highly recommend that you read it, it will be of great help to your JSONP request.

Portal: Let’s write a plug-in for JSONP!

End