There are already many tutorials on the JSONP concept and why you should use JSONP on the web. This section mainly demonstrates how ajax methods in JQUERY can be called remotely through JSONP

Let’s start with the $.ajax argument Type: request method GET/POST Url: request address Async: Boolean type. True by default indicates whether the request is asynchronous, or false indicates synchronous. DataType: the dataType returned Jsonp: the parameter name passed to the request handler or page to get the name of the jsonp callback function (generally default :callback) JsonpCallback: a custom jsonp callback function name that defaults to a random function name automatically generated by jQuery. You can also write ”?” JQuery will automatically process the data for you Success: invokes the successfully executed function Error: exception handler

1. Sample 1 On the server side we use the MVC ACTION to return the data

public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
returnView();
}

public ActionResult ReturnJson()
{
string callback = Request.QueryString["callback"];
string json = "{'name':' Zhang SAN ','age':'20'}";
string result = string.Format("{0}({1})", callback, json);
returnContent(result);
}

}

The client USES jsonp to transfer data

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script>
<script type="text/javascript">
functionSendData()
{
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
success: function(data){
alert(data.name);
},
error: function(){
alert('fail');
}
});
}
</script>

<input type="button" value=" submit " onclick="SendData();"/>

When you click the submit button, you find that the server-side request-querystring [“callback”] returns a random function name. This is set to JSONP format to pass the data

2. Custom function names You can customize the function name during the pass by simply using the jsonpCallback parameter. Jsonp: represents the parameter passed, default is callback, we can also customize, the server segment through this parameter, get the name of the custom function, the server so as to get request-querystring [“callback”] JsonpCallback represents the passed parameter value, the function name of the callback, which is the custom name.

<script type="text/javascript">
functionSendData() {
$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
jsonp: "callback",//The parameter name passed to the request handler or page to get the name of the jsonp callback function (generally default :callback)
jsonpCallback: "receive",//Custom jsonp callback function name, default to jQuery automatically generated random function name, you can also write "?" JQuery will automatically process the data for you
success: function(data) {
alert(data.name);
},
error: function() {
alert('fail');
}
});
}

functionreceive(data) {
alert(data.age);
}
</script>