借助<script>发送HTTP请求:JSONP
<script>元素可以作为一种Ajax传输机制:只须设置<script>元素的src属性,然后浏览器就会发送一个http请求以下载src所指向的URL。
使用<script>元素进行ajax传输的一个主要原因是,它不受同源策略的影响,因此可以使用它们从其他服务器请求数据,第二个原因是包含JSON编码数据的响应体会自动解码(即执行)。
为了实现<script>ajax传输,必须允许web页面可以执行远程服务器发送过来的任何js代码,这意味着对于不可信的服务器,不应该采取该技术。这种方法普遍用于可信的第三方脚本,特别是在页面中嵌入广告和“组件”。这种技术有个名称叫:JSONP
假设你已经写了一个服务,它处理GET请求并返回JSON编码数据。同源的文档可以在代码中使用XMLHttpRequest和JSON.parse()。假如在服务器上启用了CORS,在新的浏览器下,跨域的文档也可以使用XMLHttpRequest享受到该服务。在不支持CROS的旧浏览器,跨域文档只能通过<script>元素访问这个服务。使用jsonp,jsonp响应数据(理论)是合法的js代码,当它到达时浏览器将执行它。相反,不使用jsonp,而是对json编码过的数据解码,结果还是数据,并没有做任何事情。这就是JSONP的意义所有,当通过<script>元素调用数据时,响应内容必须用js函数名和圆括号包裹起来。而不是发送一段json数据。
例:使用script元素发送jsonp请求
function getJSONP(url,callback){
var cbnum = “cb”+getJSONP.counter++;
var cbname = “getJSONP.”+cbnum;
//将回调函数名以表单编码的形式添加到URL的查询部分中
//使用jsonp作为参数名,一些支持jsonp的服务
if(url.indexOf(“?”)===-1)
url+=”?jsonp=”+cbname;
else
url+=”&jspnp=”+cbname;
var script = document.createElement(“script”);
getJSONP[cbnum] = function(response){
try{
callback(response);
}finally{
delete getJSONP[cbnum];
script.parentNode.removeChild(script);
}
};
script.src = url; //设置脚本的url
document.body.appendChild(script);
}
getJSONP.counter = 0;