jquery cross-domain request

In JavaScript, there is a very important security restriction called "Same-origin policy" (same-origin strategy). This strategy is an important restriction on the page content that JavaScript code can access, meaning that JavaScript can only access content that is under the same domain name as the document or script that contains it. Scripts under different domain names do not have access to each other, even subdomains. About the same-origin strategy, the reader can Baidu more detailed explanation, here no longer repeat.

But sometimes it is unavoidable to cross-domain operation, when the "homologous strategy" is a limitation, how to do? using JSONP cross-domain get Requests is a common solution , let's take a look at how Jsonp cross-domain is implemented, and explore the principle of the next Jsonp cross-domain.

Here refers to the JSONP, then someone asked, it is different from JSON and differences, and then we will take a look, Baidu encyclopedia has the following instructions:

JSON (JavaScript Object Notation) is a lightweight data interchange format. It is based on a subset of JavaScript (standard ECMA-262 3rd edition-december 1999). JSON takes a completely language-independent text format, but also uses a similar idiom to the C language family (c, C + +, C #, Java, JavaScript, Perl, Python, etc.). These features make JSON an ideal data exchange language. Easy to read and write, but also easy to machine parse and build (network transfer speed).

JSONP (JSON with Padding) is a "usage pattern" of JSON that can be used to address cross-domain data access issues in mainstream browsers. Because of the same-origin policy, Web pages that are generally located in server1.example.com cannot communicate with servers that are not server1.example.com, while HTML <script> elements are an exception. Using this open strategy of <script>, the Web page can get JSON data that is dynamically generated from other sources, and this usage pattern is called JSONP. The data captured with JSONP is not JSON, but arbitrary JavaScript, which executes with a JavaScript interpreter instead of parsing with a JSON parser.

Here, it should be understood that JSON is a lightweight data interchange format that, like XML, is used to describe between data. Jsonp is a way to use JSON data, not a JSON object, but a JavaScript script that contains JSON objects.

How does that JSONP work? We know that, due to the limitations of the same-origin policy, XMLHttpRequest only allows resources to be requested for the current source (domain name, protocol, port). It is not possible to cross-domain requests for security reasons, but we find that the JS file on the Web page is not affected by the cross-domain, and that the label with the attribute "src" has cross-domain capabilities such as <script>, , < Iframe> At this time, the clever program ape thought of the workaround, if you want to cross-domain requests, cross-domain requests by using the HTML script tag, and return the script code to execute in the response, which can be passed directly using JSON JavaScript object. That is, in the cross-domain of the server to generate JSON data, and then packaged into script scripts back, do not break through the same-origin policy restrictions, solve the problem of cross-domain access.

Let's see how it's going to be achieved:

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(); }

As shown above, the Callwebservicebyjsonp method of the front end uses the Ajax method of jquery to invoke the backend Web service Getsingleinfo method, the Getsingleinfo method of the back end, Use the callback method of the front end to ONGETMEMBERSUCCESSBYJSONP a JSON object that wraps the business operations of the background, and returns to the front end a piece of JavaScript fragment execution. A clever solution to cross-domain access issues.

Disadvantages of Jsonp:

JSONP does not provide error handling. If the dynamically inserted code runs correctly, you can get back, but if it fails, nothing will happen.

Links: http://www.cnblogs.com/JerryTian/p/4194900.html

jquery cross-domain request