How do ajax methods in jquery make remote calls through JSONP

  • 2020-03-30 02:35:05
  • OfStack

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> 


Related articles: