An approach I like to use is to pad/wrap the json with an object literal, and then save the file with a .jsonp file extension. This method also leaves your original json file (test.json) unaltered, as you will be working with the new jsonp file (test.jsonp) instead. The name on the wrapper can be anything, but it does need to be the same name as the callback function you use to process the jsonp. I'll use your test.json posted as an example to show the jsonp wrapper addition for the 'test.jsonp' file.
json_callback({"a" : "b", "c" : "d"});
接下来,在脚本中创建一个具有全局作用域的可重用变量,以保存返回的JSON。这将使返回的JSON数据可用于脚本中的所有其他函数,而不仅仅是回调函数。
var myJSON;
接下来是一个通过脚本注入检索json的简单函数。注意,我们不能在这里使用jQuery将脚本附加到文档头部,因为IE不支持jQuery .append方法。下面代码中注释掉的jQuery方法可以在其他支持.append方法的浏览器上运行。这是作为一个参考,以显示差异。
function getLocalJSON(json_url){
var json_script = document.createElement('script');
json_script.type = 'text/javascript';
json_script.src = json_url;
json_script.id = 'json_script';
document.getElementsByTagName('head')[0].appendChild(json_script);
// $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}
接下来是一个简短的回调函数(与jsonp包装器同名),用于将json结果数据获取到全局变量中。
function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$('#json_script').remove(); // Remove json_script from the document
}
json数据现在可以被脚本的任何函数使用点表示法访问。举个例子:
console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console
这种方法可能与你习惯看到的有点不同,但有很多优点。首先,可以使用相同的函数在本地或从服务器加载相同的jsonp文件。作为奖励,jsonp已经是跨域友好的格式,也可以很容易地与REST类型API一起使用。
当然,没有错误处理函数,但为什么需要呢?如果您无法使用此方法获得json数据,那么您几乎可以打赌json本身存在一些问题,我会在一个好的json验证器上检查它。