SoFunction
Updated on 2025-04-10

Deeply understand jquery cross-domain request method

About the use of ajax jsonp in the project,

Problem: The request result can be obtained successfully, but the success method is not executed

Finally done, record it

function TestAjax()
 {
  $.ajax({
    type : "get",
    async : false,
    url : "", //In fact, the address generated during access is: ?callbackfun=jsonpCallback&id=10    data : {id : 10},
    cache : false, //Default value true    dataType : "jsonp",
    jsonp: "callbackfun",//Passed to the request handler or page to obtain the parameter name of the jsonp callback function name (default is: callback)    jsonpCallback:"jsonpCallback",
      //Customized jsonp callback function name, default is the random function name automatically generated by jQuery      //If the callback function of jsonp is customized here, the success function will not work; otherwise success will work    success : function(json){
      alert();
    },
    error:function(){
      alert("erroe");
    }
  });
}

function jsonpCallback(data) //Callback function{
  alert(); //
}
 

public class ajaxHandler : IHttpHandler
{
  public void ProcessRequest (HttpContext context) {
     = "text/plain";
    string callbackfun = ["callbackfun"];
    (callbackfun + "({name:\"John\", message:\"hello John\"})");
    ();
  }
  public bool IsReusable {get {return false;}
}

Description of ajax request parameters:

dataType string The data type returned by the server.

If not specified, jQuery will automatically make intelligent judgments based on the HTTP packet MIME information, for example, the XML MIME type is recognized as XML.

Available values:

"xml": Returns an XML document, which can be processed by jQuery.

"html": Returns plain text HTML information; the included script tags will be executed when the dom is inserted.

"script": Returns plain text JavaScript code. The results will not be cached automatically. Unless the "cache" parameter is set.

Note: When remote requests (not under the same domain), all POST requests will be converted to GET requests. (Because the script tag of DOM will be loaded)

"json": Returns JSON data.

"text": Returns a plain text string

"jsonp":jsonp format. When calling a function using jsonp form,

When accessing the url, the url will be automatically added with "callback=callbackFunName" to execute the callback function (callbackFunName).

jsonp string

Rewrite the name of the callback function in a jsonp request. This value is used to replace the "callback" part of the url parameter in the get or post request such as "callback=?"

For example, jsonp:'callbackfun' will generate "callbackfun=?" and pass it to the server.

jsonpCallback String  This parameter specifies a callback function name for the jsonp request.

This value will be used to replace the random function name automatically generated by jQuery. That is, the question mark part in "callback=?" above

This is mainly used to make jQuery generate a unique function name, which makes it easier to request and also provides callback functions and error handling conveniently.

You can also specify the callback function name when you want the browser to cache the GET request.

The main difference between ajax jsonp and ordinary ajax requests is the processing of the request response result. The response result as shown in the above code is:

  jsonpCallback({ name:"world",message:"hello world"});

In fact, it is to call the jsonp callback function jsonpCallback and pass the string or json to respond to into this method.

Regarding the custom jsonp callback function, the success function does not work

Probably its underlying implementation (of course this is the default callback function, otherwise the success method will not be executed):

function default_jsonpCallback(data)
{
  success(data); //Execute in the default callback method}

The last simple method,

$.getJSON("?name=ww&callback=?",
function(date)
{
//....
}
)

The above article in-depth understanding of the cross-domain request method of jquery is all the content I share with you. I hope you can give you a reference and I hope you can support me more.