JSONP

  1. What is the json

    • JSONP (JSON with Padding) is a “usage mode” of JSON that can be used to solve the problem of cross-domain data access in mainstream browsers.

  2. Implementation principle of JSONP

    • Web pages cannot request non-same-origin interface data through Ajax because of the browser same-origin policy.
    • The script tag is not affected by the browser’s same-origin policy and can request non-same-origin JS script data through the SRC attribute.
    • Receive the data back from the cross-domain interface in the form of a function call.

  3. To realize the json

    1. Define a SUCCESS callback function.

      <script>
	function success(data){
        console.log("Get the data");
        console.log(data)
    }
</script>
Copy the code

    2. Request interface data via the script tag.

      <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=silly&sge=20"></script>
Copy the code

  4. The disadvantage of the json

    • Only GET data requests are supported, POET data requests are not supported.
    • JSONP has nothing to do with Ajax and does not use the XMLHttpRequest object.

  5. The json in jQuery

    • JQuery provides the $.ajax() function to initiate a JSONP data request

      $.ajax({
    url:'http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=silly&sge=20'.// Initiate a JSONP request
    dataType:'jsonp'.success:function(res){
		console.log(res.data); }});Copy the code

The json sample

Request Github information

Encapsulate a function to make the request