在通常情况下,为了网站的安全性,Ajax对象只能访问到与当前页面位于同一个域下的资源。但有时往往需要访问别的域中的资源,这是就运用到了跨域这个概念,这其中运用最广泛的就是JSONP。
JSONP,即JSON with padding(填充式的JSON)。JSON由两部分组成,一部分是回调函数,一部分是所包含的数据。回调函数是请求数据时指定,而数据则是跨域资源返回的JSON数据。
要实现使用JSONP跨域需要三步:
第一步,动态创建一个script元素;
第二步,设置script元素的src为想要跨域请求资源的url,这个url的参数callback为请求到资源后的处理函数;
第三步,定义处理函数,处理返回的对象;
第四步,把script元素添加到页面中
var scriptEl = document.createElement('script');
scriptEl.src = 'http://www.freegeoip.net/json/?callback=handleResponse';
document.body.appendChild(scriptEl);
function handleResponse(response) {
/*response的类型是Object*/
alert(response.country_name);
}
但是JSONP也并不是完美的,主要有两个缺点:
一、由于请求的是其他域中的资源,很有可能这个资源不安全,造成网站的损失。
二、不容易确定资源是否请求成功。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。