Jsonp detailed __js

JSON believes that we all use a lot, jsonp I have never had the opportunity to use, but also often see, only know is "used to cross Domain", has not known what is specifically a thing. I finally figured it out today. The next step is to figure out what JSONP is. homology policy

First, for security reasons, browsers have the same mechanism of homology policy, which prevents documents or scripts loaded from one source from getting or setting properties of documents loaded by another source. You don't seem to know what it means, just practice it and know it. 1. Build two Web pages randomly

A port is 2698, a 2701, by definition they are different sources.

2. Use jquery to launch a different source request

Add a button on a 2698-port Web page that randomly initiates two requests to a port of 2701 domains.

$ ("#getOtherDomainThings"). Click (function () {
    $.get ("Http://localhost:2701/Scripts/jquery-1.4.4.min.js"), function (data) {
        console.log (data)
    })

    $.get ("Http://localhost:2701/home/index", function (data) {
        Console.log (data)})
}

According to the homologous strategy, it is obviously tragic. The browser blocks and does not initiate the request at all. (not allowed by Access-control-allow-origin)

OK, the original JSONP is to solve this problem. cross-domain capabilities of the script label

Do not know if you know CDN this thing, such as Microsoft CDN, use it, our web page can not provide jquery, by Microsoft's website to help us provide:

<script src= "Http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type= "Text/javascript" ></script>

Back to our 2698-Port Web page, we have a request in the Click event for a jquery file in the 2701 port domain, this time using the script tag.

<script type= "Text/javascript" src= "Http://localhost:2701/Scripts/jquery-1.4.4.min.js" ></script>

Of course, 200,ok.

Also the Web page of Port 2698 initiates a request for a 2701 domain, placing the SCR attribute in the script OK, and the other way on the tragedy. Using the Cross-domain capabilities of the script, this is the foundation of JSONP. using script to get JSON from different sources

Since it's called JSONP, it's obvious that the purpose is JSON, and it's cross-domain. According to the above analysis, it is easy to think: Using JS to construct a script tag, the JSON URL assigned to the script SCR properties, the script inserted into the DOM, the browser to get. Practice:

function Createscript (SRC) {
    $ ("<script><//script>"). attr ("src", src). Appendto ("Body")
}

Add a button event to test:

$ ("#getOtherDomainJson"). Click (function () {
    $.get (' Http://localhost:2701/home/somejson ', function (data) {
        console.log (data)})
}

First, the first browser, Http://localhost:2701/home/somejson this URL does exist a JSON, and on the 2698 Web page with a script tag to request this 2701 URL is also 200OK, But the bottom of the report JS syntax error. The original script tag after loading, will immediately respond when JS to execute, it is obvious {"Email": "zhww@outlook.com", "remark": "I come from the Far East"} is not a legitimate JS statement. using script to acquire exotic JSONP

Obviously, putting the above JSON in a callback method is the easiest way to do it. For example, it becomes this:

If there is jsonpcallback this method, then Jsonpcallback ({"Email": "zhww@outlook.com", "remark": "I come from the Far East"}) is a legitimate JS statement.

Because the server does not know what the client callback is, it is impossible to hard code into Jsonpcallback, so take a querystring let the client tell the server, callback method is what, of course, QueryString key to comply with the service end of the agreement, The above is "callback".

To add a callback function:

function Jsonpcallback (JSON) {
    console.log (JSON)
}

Change the previous method slightly to the parameter:

$ ("#getJsonpByHand"). Click (function () {
    createscript ("http://localhost:2701/home/somejsonp?callback= Jsonpcallback ")
})

200OK, the server returned to Jsonpcallback ({"Email": "zhww@outlook.com", "remark": "I come from the Far East"}), we also wrote the Jsonpcallback method, of course, will execute. OK gets the JSON successfully. Yes, this is the whole JSONP. using jquery to get Jsonp

In the way above, you have to insert a script tag, and then define a callback that is a bit cumbersome, using jquery to get the JSON data you want directly, as well as the above JSONP:

$ ("#getJsonpByJquery"). Click (function () {
    $.ajax ({
        URL: ' Http://localhost:2701/home/somejsonp '),
        DataType: "Jsonp",
        Jsonp: "Callback",
        success:function (data) {
            console.log (data)
        }
    )
} )

The results are similar to the above. Summary

The bottom line is to use the script tag to bypass the homology strategy and get a similar data, Jsonpcallback is the callback method of the page existence, the parameter is the JSON that wants to get.

Jsonpcallback ({"Email": "zhww@outlook.com", "remark": "I come from the Far East"})

Source: http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

ADD Native JS:

<button id= "BTN" >click</button>
<script type= "Text/javascript" >
function $ (str) {
return document.getElementById (str)
}
function Createscript (SRC) {
var scrip=document.createelement (' script ');
SCRIP.SRC=SRC;
Document.body.appendChild (Scrip);
}
function Jsonpcallback (JSON) {
Console.log (JSON);//object {email= "China", email2= "China 222"}
}
$ (' btn '). Onclick=function () {
Createscript ("Http://localhost:51335/somejson?callback=jsonpcallback")
}
</script>

Jsonp with Java look here: Click on the Open link