What is jsonp

jsonp role: to solve cross-domain problems

Why have cross-domain problem?

"Same origin policy restricts how to interact with resources from another source document or script loaded from the same source.

This is an important security mechanism used to isolate potentially malicious files. "

Homologous: same protocol, domain name and port number.

So when ajax request address, there is a protocol, domain names, port numbers are not at the same time, there is cross-domain problem, the browser will complain.

A method wherein when a cross-domain jsonp solution.

Disadvantages: GET request without support only supports POST HTTP requests and other types of

jsonp principle

ajax request address inaccessible different sources
jsonp not a new technology, can be said to be a trick, to put it differently request
First, Script tag address different sources can be introduced, so that not error
At this point, if the script tags that bring back data interfaces need to call, you can get the data, but not directly so simple
Define functions after data acquisition operation is successful, as the following success function
Use script tags, you need to call the introduction of background data interface parameters must be accompanied by acquiring data manipulation functions after the success of success

Native js use jsonp

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h3>控制台</h3>
    <script type="text/javascript">
        function success(data){
            console.log('数据：', data);
            // 之后对数据的处理
        }
    </script>
    <script src="http://localhost/aa.php?callback=success&param1=val1"></script>
</body>
</html>

? < PHP 
// aa.php
 // get the request parameters inside the callback, obtain the name of the function to call when the data is successfully 
$ callback = $ _GET [ 'callback' ];
 $ param1 = $ _GET [ 'param1' ]; 

$ RES = Array (
     Array ( "ID" =>. 1, "name" => "NAME1"), 
     Array ( "ID" => 2, "name" => "NAME2" ) 
); 
$ RES = json_encode ( $ RES ); 

echo  $ callback . "(." $ RES . ")" ;

 ?>

Resolution:

Define success function, the operation of the data acquisition
Then script incorporated label background data interface
I am here backend php written
Parameter acquisition request to callback values, and other parameters
Data acquisition, encoding, string concatenation, call success function.

jquery use jsonp

<! DOCTYPE HTML> 
<HTML> 
<head> 
    <title> </ title> 
</ head> 
<body> 
    <H3> Console </ H3> 
    <Script type = "text / JavaScript" the src = "./ jQuery. JS "> </ Script> 
    <Script of the type =" text / JavaScript "> 
        $ .ajax ({ 
             of the type: " GET " , 
             url: " HTTP: //localhost/aa.php param1 = val1 "? , 
             dataType: " JSONP " , 

             jsonp: " callback " ,
              // passed to the back-end interface to obtain jsonp callback function name of the parameter name (usually the default is: callback)
             
　　　　　　　　jsonpCallback:"flightHandler " ,
              // since jsonp defined callback function name, the default name for the random function jQuery automatically generated,
             // can also write, jQuery will automatically process the data for you "?"
             
　　　　　　　　Success: function (the Data) { 
                console.log ( 'data:' , the Data);
                 // processing of the data after 
             }, 
             error: function () { 
                Alert ( 'Fail' ); 
             } 
         });
     </ Script> 
</ body> 
</ HTML>

jsonp —— javascript

table of Contents

What is jsonp

jsonp principle

Native js use jsonp

jquery use jsonp

What is jsonp

jsonp principle

Native js use jsonp

jquery use jsonp

Guess you like