Small example of JSONP

JQuery in JSONP two ways to achieve this:

are very simple, so directly on the code!

The front code is as follows:

<script type= "Text/javascript" >    $(function() {alert ("Start ..."); //The first way$.ajax ({type:"Get", URL:"Http://localhost:9524/Home/ProcessCallback",//This is a different URL from the current domain, this is a simple demonstration, so the same domainDataType:"Jsonp", Jsonp:"Jsonpcallback",//Specify the callback function, where the name can be anything you like, such as callback, but must match the get parameter of the next lineData:"Name=jxq&[email protected]&jsonpcallback=?",//Jsonpcallback is consistent with the JSONP value aboveSuccess:function(JSON) {alert (JSON.                Name); Alert (JSON.            Email);        }        }); //The second way$.getjson ("Http://localhost:9524/home/processcallback?name=xiaoqiang&[email protected]&jsonpcallback=?",            function(JSON) {alert (JSON.                Name); Alert (JSON.            Email);        }        ); Alert ("End ..."); });</script>

The background action code is as follows:

 Public stringProcesscallback (stringNamestringemail) {   if(Request.QueryString! =NULL)   {       stringJsonpcallback = request.querystring["Jsonpcallback"]; varuser =NewUser {Name=name, Email=email}; returnJsonpcallback +"("+NewJavaScriptSerializer (). Serialize (user) +")"; }   return "Error";}

After running, you can see the results. I tracked down the background processcallback code, such as:

You can see that the value of Jsoncallback is "jQuery17104721 ...", which is the front-end to the remote server background action. Here jQuery171. Represents the version of jquery, which can be simply interpreted as the JSONP type request callback function, and jquery generates such a JSONP callback function each time we specify an AJAX request in the form of JSONP. Although jquery will automatically generate a callback function for us, we can also customize our own callback function for the JSONP request by setting the jsonpcallback parameter.

The first way the following three lines of code sets the Jsonp request method:

DataType: "Jsonp",

JSONP: "Jsonpcallback",//Specifies the callback function, where the name can be anything else you like, such as callback, but must match the get parameter of the next line

Data: "Name=jxq&[email protected]&jsonpcallback=?",//Jsonpcallback consistent with the above JSONP values

The second way is to identify the jsonpcallback= directly after the get parameter.

We can infer that after this, the jquery internals help us bypass the browser's cross-domain access restrictions and then request cross-domain action as if it were a normal request for the same domain action.

The last return is a function expression:

return jsoncallback + "(" + New JavaScriptSerializer (). Serialize (user) + ")";

So the return to the front end is similar to this jQuery17104721 .... (' {Name: ' "Jxq", email: "[email protected]"} '), which will be executed as soon as it returns to the front end, resulting in a JavaScript object with two properties: Name and Email, so we can call JSON directly. Name and Json.email

Small example of JSONP