jsonp跨域请求，动态script标签实现跨域

1、什么是跨域

首先一个域名地址的组成是：

http://www.xxx.com:8080/xxx/xxx.jsp

协议子域名主域名端口号请求资源地址

当协议、子域名、主域名、端口号中任意一个不相同时，都算作是不同域。

不同域之间相互请求资源，就算作“跨域”。而这是被浏览器的安全机制所禁止的。

2、这里要说的是处理跨域其中一个方法——jsonp

jsonp可用于解决主流浏览器的跨域数据访问的问题，其中的原理是利用<script>元素的跨域能力

科普基础知识：web页面上凡是拥有“src”这个属性的标签都拥有跨域的能力，比如<script>,<img>

JSONP,JSON width Padding,采用json 作为传输数据的载体，具体的实现通过script标签跨域应用来完成。

3、实现方法说明

a,客户端（我的域名）页面代码控制

b,服务端（提供服务和数据）的数据可控。

4、举例实现方法

<script type="text/javascript">

//
// jQuery的调用
//
$.ajax({
crossDomain :true,
url: 'http://s.weibo.com/ajax/jsonp/suggestion?key=a', //不同的域
type: 'GET', // jsonp模式只有GET是合法的
dataType: 'jsonp', // 数据类型
jsonp: '_cb', // 指定回调函数名，与服务器端接收的一致，并回传回来
success: function(data) {
console.log(data);
}
});

//
// jsonp的原理
//
//服务器调用的全局函数，用来接受数据
function getResult(o) {
console.log(o.data);
}

</script>
<script type="text/javascript" src="http://s.weibo.com/ajax/jsonp/suggestion?_cb=getResult"></script>

例子中用的是微博API,查看更多http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI

 

转载于:https://www.cnblogs.com/olivianate/p/5313783.html