How does JSONP handle Ajax cross-domain access?

This time I will show you how JSONP handles Ajax cross-domain access. What are the precautions for JSONP to handle Ajax cross-domain access. The following is a practical case, let's take a look.

A few days ago, there was a new requirement at work, which required the front-end web page to asynchronously call the background Webservice method to return information. There are many implementation methods. This example uses jQuery+Ajax. After completion, everything was ok when debugging locally. However, problems occurred after deploying to the server. The background service call did not respond. What happened? The code has not changed much, the only modification is the url address in jQuery's ajax method. Is this the problem here? After inspection and debugging, it was found that the same origin policy was causing trouble. We know that JavaScript or jQuery is a dynamic script technology often used in Web front-end development. In JavaScript, there is a very important security restriction called "Same-Origin Policy". This policy places important restrictions on the page content that JavaScript code can access, that is, JavaScript can only access content under the same domain name as the document or script that contains it. Scripts under different domain names cannot access each other, even in subdomains.

But sometimes cross-domain operations are unavoidable. At this time, the "same origin policy" is a limitation. What should I do? Using JSONP cross-domain GET request is a common solution. Let's take a look at how JSONP cross-domain is implemented and explore the principle of JSONP cross-domain.

JSONP is mentioned here, so someone asked, what are the differences and differences between it and JSON? Let’s take a look. Baidu Encyclopedia has the following explanation:

JSON(JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of JavaScript (Standard ECMA-262 3rd Edition - December 1999). JSON uses a completely language-independent text format, but also uses habits similar to the C language family (including C, C++, C#, Java, JavaScript, Perl, Python, etc.). These properties make JSON an ideal data exchange language. It is easy for people to read and write, and it is also easy for machines to parse and generate (network transmission speed is fast).

JSONP (JSON with Padding) is a "usage mode" of JSON that can be used to solve the problem of cross-domain data access by mainstream browsers. Due to the same-origin policy, generally speaking, web pages located at server1.example.com cannot communicate with servers other than server1.example.com, with the exception of the HTML <script> element. Using this open policy of the <script> element, web pages can obtain JSON data dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, which is executed with a JavaScript interpreter instead of parsed with a JSON parser. </script>

At this point, you should understand that JSON is a lightweight data exchange format, like xml, used to describe data. JSONP is a way of using JSON data. What is returned is not a JSON object, but a javaScript script containing a JSON object.

How does JSONP work? We know that due to the restrictions of the same-origin policy, XmlHttpRequest is only allowed to request resources from the current source (domain name, protocol, port). Cross-domain requests are not possible for security reasons, but we found that when calling js files on a Web page, it is not affected by whether it is cross-domain, and tags with the "src" attribute have cross-domain capabilities. For example, <script>, <img alt="How does JSONP handle Ajax cross-domain access?" >, <iframe>, at this time, smart programmers thought of a workaround. If you want to make cross-domain requests, use the script tag of html to make cross-domain requests, and The script code to be executed is returned in the response, where the <a href="http://www.php.cn/js/js-jsref-tutorial.html" target="_blank">javascript object can be passed directly using JSON. That is, JSON data is generated on the cross-domain server, and then packaged into a script and sent back. Doesn't this break through the restrictions of the same-origin policy and solve the problem of cross-domain access? </script>

Let’s see how to implement it:

Front-end code:

function CallWebServiceByJsonp() {
$("#SubEquipmentDetails").html('');
$.ajax({
type: "GET",
cache: false,
url: "http://servername/webservice/webservice.asmx/GetSingleInfo",
data: { strCparent: $("#Equipment_ID").val() },
dataType: "jsonp",
//jsonp: "callback",
jsonpCallback: "OnGetMemberSuccessByjsonp"
});
}
function OnGetMemberSuccessByjsonp(data) {
//处理data
alert(data);
}

Back-end WebService code:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public void GetSingleInfo(string strCparent)
{
string ret = string.Empty;
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
string jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString();
//string jsonCallBackFunName1 = HttpContext.Current.Request.QueryString["callback"].Trim();
//上面代码必须
//中间代码执行自己的业务操作，可返回自己的任意信息（多数据类型）
BLL.equipment eq_bll = new BLL.equipment();
List<model.equipment> equipmentList = new List<model.equipment>();
equipmentList = eq_bll.GetModelEquimentList(strCparent);
ret = JsonConvert.SerializeObject(equipmentList);
//下面代码必须
HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, ret));
HttpContext.Current.Response.End();
}</model.equipment></model.equipment>

As shown above, the front-end CallWebServiceByJsonp method uses jQuery's ajax method to call the back-end Web service GetSingleInfo method, the background GetSingleInfo method, and uses the front-end callback method OnGetMemberSuccessByjsonp to wrap the background The JSON object of the business operation is returned to the front end for execution by a JavaScript fragment. Cleverly solves the problem of cross-domain access.

Disadvantages of JSONP:

JSONP does not provide error handling. If the dynamically inserted code runs correctly you can get a return, but if it fails then nothing happens.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Solution to the problem that ajax internal values ​​cannot be called externally

How to preview HTML5+ajax Picture effect

The above is the detailed content of How does JSONP handle Ajax cross-domain access?. For more information, please follow other related articles on the PHP Chinese website!