jsonp跨域请求

这一周都在使用jsonp跨域请求，记录一下做的项目和过程中遇到的问题。

JSONP：JSON with padding的简写 (填充式JSON/参数式JSON)。

JSONP与JSON看起来差不多，只不过是包含在函数调用中的JSON。

上面这句话要好好理解，JSONP其实是一个函数调用，如：

函数名（

{

json内容

}

）;

javascript高级程序设计中这么说的：

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。数据就是传入回调函数中的JSON数据。

JSONP是通过动态script元素来使用的，使用时为src属性指定一个跨域URL。

JSONP是有效的javascript代码，所以在请求完成后，即在jsonp响应加载到页面中以后，就会立即执行。

看完书以后，我觉着很简单，好像是理解了什么是JSONP，以及JSONP该怎么使用。但是，但是，但是，我真的没理解透彻。

首先，JSONP是以函数调用的形式写的json，并不是一个简单的json串；而且，你需要在页面中调用这个函数，才能请求jsonp中的数据。

title.json如下：

handle([
{
"number":1,
"question":"1+8=",
"selector":"9",
"answer":true
},
{
"number":2,
"question":"王俊凯是下面内地团体的成员",
"selector":"TFBoys",
"answer":true
}
)

我要访问里面的数据

var responseResult = null;//全局变量，用于保存json数据

//***回调函数，与title.json中调用的函数名要一致，这个函数的参数response即title.json中的json串***
function handle(response){
responseResult = response;//全局变量，用于保存json数据
var html = "";
var item = null;//用于保存json中每个题的数据
for(var i = current, m = 0 ; i < (current + 4); i ++, m++){
item = response[i];
html += "<div class=\"question\" id=\"title" + (m+1) + "\">";
html += "<div class=\"outer\">" + item.question +"</div>";
html += "<div class=\"inner\">" + item.selector +"</div>";
html += "</div>";
items.push(item);
}
document.getElementById("turnplate").innerHTML = html;
}

function jsonp(url,callback){
var script = document.createElement("script");
script.src = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
}
jsonp('title.json',handle);

这样，jsonp中的数据就可以获取到并显示到页面中了。

所犯的错误：

没有准确理解jsonp是个函数调用的形式。