1）什么是jsonp
为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，
然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，
不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>获取天气</button>
</body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function demo(data){
//console.log(data);
}
//jquery
$('button').click(function(){
$.ajax({
type:"get",
dataType:'jsonp',
//url:"http://v.juhe.cn/weather/index?dtype=jsonp&format=1&key=b0a56b5965463c16d79fa1bbebbca684&cityname="+city,
url:"http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=demo",
async:true,
jsonpCallback:'demo',
success: function (data) {
console.log(data) //同上回调函数
}
});
});
//原生
// 得到数据后的回调函数
function demo(data){
console.log(data)
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=demo";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</html>
浙公网安备 33010602011771号