Small example of JSONP

Source: Internet
Author: User

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

Small example of JSONP

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.