jquery ajax using cross-domain JSONP solve the problem

jquery ajax using cross-domain JSONP solve the problem
refer to the article: http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
https://www.cnblogs.com/hongyan5682/ p / 5616506.html
What is cross-domain
JavaScript for security reasons, does not allow cross-domain calls subject to other pages. But at the same security restrictions but also to inject a lot of trouble on the iframe or ajax application. Here some issues related to cross-domain simply sort out:

What is the first cross-domain, simply understanding is that because of the restrictions JavaScript same origin policy, a.com can not operate under the domain name of the object in js or cacom b.com domain. A more detailed description can see table:

URL whether to allow communication
http://www.a.com/a.js
http://www.a.com/b.js allow the same domain name under
http://www.a.com/lab/a.js
http://www.a.com/script/b.js different folders permit under the same domain name
http://www.a.com:8000/a.js
http://www.a.com/b.js the same domain name, does not allow different port
http://www.a.com/a.js
https://www.a.com/b.js the same domain name, different protocol does not allow
http://www.a.com/ a.js
http://70.32.92.74/b.js and domain names correspond ip allowed
http://www.a.com/a.js
http://script.a.com/b.js primary domain same , different sub-domains are not allowed
http://www.a.com/a.js
http://a.com/b.js not permitted (under the same domain name, the different second-level domain (ibid.) cookie that is not the case allow access)
http://www.cnblogs.com/a.js
http://www.a.com/b.js different domain name does not allow
special attention to two points:
First, if a cross-domain problems caused by protocol and port "front" is powerless,
second: On the cross-domain issues, domain merely by "the head of the URL," and not to try to identify the same ip address judgment It corresponds to two fields or whether the two domains on the same ip.
"URL of the first" refers to window.location.protocol + window.location.host, can be understood as "Domains, protocols and ports must match ".
Then briefly summarize in the "foreground" general cross-domain approach, this solution involves a background proxy background configuration here is not explained, are interested can look at this article of yahoo: "JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls "

A, WebApi:

// for testing cross-domain JSONP written
[HttpGet]
public void GetAll (String callback)
{
List retList = new List ();
Context context = new Context();
var users = context.Users.ToList();
if (users != null && users.Count > 0)
{
retList = users;
}
context.Dispose();

       //return "callback(" + JsonConvert.SerializeObject(retList) + ")";
       HttpContext.Current.Response.Write(callback + "(" + JsonConvert.SerializeObject(retList) + ")");
       HttpContext.Current.Response.End();
   }

　　A project with a WebApi method as in the experiment interface, the interface address http: // localhost: 616 / api / UserService / GetAll, access method to GET

Second, the test page:

　　Test page includes only two buttons, one for ordinary ajax call WebApi interface, the other is to use JSONP call WebApi interface.

When using a general Ajax call will prompt the following information:

No Access-Control-Allow-Orgin, ajax case can not obtain data from the other servers.

Third, the use of cross-domain JSONP:

JSONP general principle is that when the front desk requesting cross-domain script on the server are not affected by cross-domain, such as: It is only necessary to dynamically generate cross-domain services according to the needs js front end, including a method of performing this js and data, thus achieving a similar effect ajax. But JSONP ajax and essentially different: ajax core is obtained by non-XmlHttpRequest content of this page, while the core JSONP is dynamically add tags to call js script server dynamically generated.

function callAPIByJSONP() {
var test = 1;
$.ajax({
type: "GET",
async: false,
url: "http://localhost:616/api/UserService/GetAll",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"handler",
success: function (result) {
alert(result[0].UserName);
},
error: function (e) {
var test = e;
}
});
}
注意点：

Beginning background method returns a value of type string, the return value: return callback (callback method name) + (data), such as the return of Code 200, statusText as a success, but does not enter into the success callback function, but into in error.

Later the Internet to find reasons, many say the answer is to return data format problems, but in accordance with the format and I wrote above them is the same. Last Modified background method, using HttpContext.Current.Response.Write way to return data to solve the problem.

Copy the code
// for testing cross-domain JSONP written
[HttpGet]
public void GetAll (String callback)
{
List retList = new List ();
Context context = new Context();
var users = context.Users.ToList();
if (users != null && users.Count > 0)
{
retList = users;
}
context.Dispose();

        //return "callback(" + JsonConvert.SerializeObject(retList) + ")";
        HttpContext.Current.Response.Write(callback + "(" + JsonConvert.SerializeObject(retList) + ")");
        HttpContext.Current.Response.End();
    }

Copy the code
data acquired by the front desk:

In addition, because JSONP principle is added dynamically, so JSONP request to GET way, even if you specify the type: "POST" last JSONP request to GET background service mode or way too