从JavaScript代码使用jsonp
我正在学习javascript和json,我需要从另一台服务器上获取我的json文件。 我已经完成了一些使用本地json文件的javascript测试,但现在我想将所有代码转换为jsonp,因为我需要处理另一个域上的文件。 我的代码是:
function jsonEntity()
{
var richiestaEntity = new XMLHttpRequest();
richiestaEntity.onreadystatechange = function()
{
if(richiestaEntity.readyState == 4)
{
var objectentityjson = {};
window.arrayEntity= []; //creazione dell'array che conterrà le entity
objectentityjson = JSON.parse(richiestaEntity.responseText);
arrayEntita = objectentityjson.cards;
return arrayEntita;
}
}
richiestaEntity.open("GET", "myjson.json", true);
richiestaEntity.send(null);
}
如何在不丢失我的代码结构的情况下使用jsonp而不是本地json?
JSONP和JSON在幕后根本不同。 有关更多详细信息,请参阅我的其他堆栈溢出答案。
由于JSONP的工作方式,您需要服务器的合作将JSON响应包装在函数调用中(其名称通常由callback
GET参数指定);
/get_jsonp.php?callback=foo
(应得:
foo({
"foo": "bar"
});
......在回应中。
假设你有这种合作,你可以改变你现有的功能如下:
function jsonEntity()
{
var callbackName = "ajaxCallback";
var script = document.createElement("script");
// This bit needs the cooperation of the server,
// otherwise `ajaxCallback` won't be called.
script.src = "myjson.json?callback=" + callbackName;
window[callbackName] = function (obj) {
window.arrayEntity = obj.cards;
}
document.body.appendChild(script);
}
JSONP与JSON的工作方式不同。
使用JSON,你基本上使用XHR从你的服务器请求一个文件,解析它并使用结果对象。
使用JSONP插入一个<script>
标签,就像你从其他服务器加载一个lib一样。 只有一些区别:在URL中传输一个附加参数,回调函数,并在页面上定义该函数。
这可能如下所示。 首先我们定义我们的回调:
function myCallback( data ) {
// do some stuff with data
}
然后我们动态插入一个新的<script>
标签来检索数据。
<script src="path.to/remote/server.js?callback=myCallback" type="text/javascript"></script>
我们完成了。
服务器现在发送表单的答案
myCallback( {"your": "answer", "is": "here" } );
它会调用您的回调函数并处理您的处理。 请参阅此处,而不是通常的JSON响应,服务器使用作为参数的对象(代表JSON)对您的回调函数进行函数调用。
请注意,参数的名称(在我的示例中是“回调”)可能因服务提供商的不同而不同。 因此,在使用之前查找正确的名称。
另外需要注意的是,这只适用于GET
请求。 您不能将这种技术用于POST
请求。
上一篇: Use jsonp from javascript code
下一篇: jQuery ajax call to domain that redirects to another domain (isn't followed)