JSONP cross-domain uncaught syntaxerror:unexpected token: Workaround

[JQuery] Ajax for cross-domain access to JSON

Ajax cross-domain access JSON

Environment:. Net4.0+jquery+json.net

Because in the cross-domain implementation, so new site here, this site only need ashx file

public void ProcessRequest (HttpContext context)

{

stringstrjson= "[{" id ":" 100009 "," name ":" Mayixue "," link ":" www.mayixue.com "},{" id ":" 100009 "," name ":" Mogujie "," link " : "www.mogujie.com"},{"id": "100009", "name": "Dazayuan", "link": "Www.dazayuan.com"}] ";

Context. Response.Write (Strjson);    

}

Then build the Web site in IIS Web_datasource, which is the site above.

re-build the Web site project web_client in vs for cross-domain access to web_DataSource.

(i) normal JQUERYAAJX cross-domain requests

function Jsonajax () {

$.ajax ({

URL: "http://www.mayixue.com/json/handler.ashx",

Type: "Get",

DataType: "JSON",

Success:function (json) {

if (JSON! = null) {
var rowcount = json.length;
if (RowCount > 0) {
var html = ';
for (var i = 0; i < rowcount; i++) {
HTML + = ' <li><div class= "dd" > </div><div class= "dt" ><a href= "' + Json[i].link + '" target= "_ Blank ">" + json[i].name + ' </a></div></li> ';
}
$ ('. List '). html (' <ul> ' + html + ' </ul> ');
}
}

}

});

}

Result: A prompt window will pop up.

(ii) Jquery JSONP Request

function Jsonpajax () {

$.ajax ({

URL: "/httpwww.mayixue.com/json/handler.ashx?callback=?",

Type: "Get",

DataType: "Jsonp",

JSONP: "Callback",

Success:function (json) {

if (JSON! = null) {
var rowcount = json.length;
if (RowCount > 0) {
var html = ';
for (var i = 0; i < rowcount; i++) {
HTML + = ' <li><div class= "dd" > </div><div class= "dt" ><a href= "' + Json[i].link + '" target= "_ Blank ">" + json[i].name + ' </a></div></li> ';
}
$ ('. List '). html (' <ul> ' + html + ' </ul> ');
}
}

}

});

}

At this point, the ashx file data in the cross-domain Web_ datasource is provided to change:

public void ProcessRequest (HttpContext context)

{

string Strjson = "[{" id ":" 100009 "," name ":" Mayixue "," link ":" www.mayixue.com "},{" id ":" 100009 "," Name ":" Mogujie "," link ":" www.mogujie.com "},{" id ":" 100009 "," name ":" Dazayuan "," link ":" Www.dazayuan.com "}]";

String callback = context. Request.params["Callback"];

Context. Response.Write (callback+ "(" +strjson+ ")");

}

The format of the returned data is:

? ([{"id": "100009", "name": "Mayixue", "link": "www.mayixue.com"},{"id": "100009", "name": "Mogujie", "link": " Www.mogujie.com "},{" id ":" 100009 "," name ":" Dazayuan "," link ":" Www.dazayuan.com "}])

================================= knowledge sharing =====================================

　　The basic principle of JSONP is to add a tag dynamically, while the src attribute of the script tag is not a cross-domain limitation. In this way, this cross-domain approach is actually unrelated to the Ajax XMLHttpRequest protocol .

In fact , "jquery Ajax cross-domain problem " has become a pseudo-proposition , jquery $.ajax method name is misleading .

If set to dataType: ' Jsonp ', this $.ajax method has nothing to do with Ajax XMLHttpRequest , instead it is the JSONP protocol .

JSONP is an unofficial protocol that allows the server-side integration of Script tags to return to the client, using the form of JavaScript callback for cross-domain access jsonp that is JSON with Padding. Due to the limitations of the same-origin policy,XMLHttpRequest only allows resources to be requested for the current source (domain name, protocol, port). If cross-domain requests are made, we can make cross-domain requests by using the HTML script tag and return the script code to execute in the response , where the JavaScript object can be passed directly using JSON . This cross-domain communication method is called JSONP.

Jsoncallback function jsonp1236827957501 (...): A callback function that is registered by the browser client and gets the JSON data on the cross-domain server

　　Jsonp principle:

First register a callback (for example : ' Jsoncallback ') on the client, and then Pass callback's name (for example : jsonp1236827957501) to the server.

At this point, the server becomes JSON data.

Then , in JavaScript syntax, a function is generated , and the function name is the value jsonp1236827957501 of the parameter ' jsoncallback ' passed up .

Finally, the JSON data is placed directly into the function in the form of a parameter, so that a document of JS syntax is generated and returned to the client.

The client browser, parses the script tag, and executes the returned JavaScript document, at which time the JavaScript document data , as parameters,

Passed into the client's pre-defined callback function (as in the previous example, the jquery $.ajax () method encapsulates the success:function (JSON)) . (Dynamic execution callback function)

It can be said that the way the JSONP is consistent in principle (QQ space is a large number of this way to achieve cross-domain data exchange ). JSONP is a script injection (scripts injection) behavior , so there are some security implications .

JSONP cross-domain uncaught syntaxerror:unexpected token: Workaround