JSONP的工做原理

同源策略ajax

跨域的集中方法:json

一、服务器端发送请求,服务器做为中继代理(此方法不理解)跨域

二、iframe服务器

三、script标签app

  经过动过动态生成script标签,并将src指向目标源的方式(img标签一样具备src属性,用img实现不行吗?)函数

原生实现方式示例:jsonp

var url="www.xxx.baidu.com/aa.js",url

  scriptTag=document.createElement("script");代理

scriptTag.src=url;ip

document.getElementByTagName("head")[0].appendChild(scriptTag);

function showSth(data){

  alert(data.a);

}

////////////aa.js

var aa={"a":"A"};

showSth(aa);

 

jsonp:

使用script标签实现跨域访问、可在url中指定回调函数、获取json数据并在指定的回调函数中执行

jQuery实现jsonp

//$.getJSON

var url="wwwa.xxx.baidu.com/aa.js?callback=?"

$.getJSON(url,function(data){

  alert(data.a);

});

//$.ajax;

var url="www.xxx.baidu.com/aa.js"

$.ajax({

  url: url,

  dataType: jsonp,

  success:function(data){

    alert(data.a);

  }

});

jQuery 只支持get方式的jsonp实现

jsonp的缺点:

若是返回的数据格式有问题或返回失败了,并不会报错。

相关文章
相关标签/搜索