JSONP实现
使用jsonp实现跨域获取数据。
js部分（旧）：
(function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1、挂载回调函数 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; //2、将data转换成url字符串的形式 //{id=1,count=4}==>id=1&count=4 var querystring = url.indexOf('?') == -1 ? '?' : '&'; //判断url中最后是否有？，没有则为？ for (var key in data) { querystring += key + '=' + data[key] + '&'; } //3、处理url中回调函数 url+=callback=sdgade querystring += 'callback=' + cbFuncName; //querystring=?id=1&count=4&callback=sdgade //4、创建一个script标签 var scriptElement = document.createElement('script'); scriptElement.src = url + querystring; //5、把script标签放到页面上 document.body.appendChild(scriptElement); }; window.$jsonp = jsonp; })(window, document)
js部分（新）：对js做了一些修改，看的更加明白
(function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1、把data修改成url的格式 ,{id=1,count=4}==>id=1&count=4 var query = url.indexOf('?') == -1 ? '?' : '&'; for (var key in data) { query += key + '=' + data[key] + '&'; } //2、串联上callback var fnsuffix = Math.random().toString().replace('.', '');//生成一个随机数 var cbName = 'my_jsonp_cb_' + fnsuffix; //callback的名字为my_jsonp_cd_3398743 query += 'callback=' + cbName; //3、新建script标签 var scriptElement = document.createElement('script'); scriptElement.src = url + query; //4、执行callback函数,执行完把script标签去掉，以免页面每次刷新都会多个script标签 window[cbName] = function(data){ callback(data); document.getElementsByTagName('head')[0].removeChild(scriptElement); } //5、把标签放到页面上 document.getElementsByTagName('head')[0].appendChild(scriptElement); }; window.jsonp=jsonp; //把jsonp函数暴露给全局 })(window, document)
在页面中测试
<!DOCTYPE html>
<html>
<head>
<title>jsonp</title>
<script src="http.js"></script>
<script>
(function(){
jsonp('http://api.douban.com/v2/movie/in_theaters',
{count:1},function(data){
console.log(data);
document.getElementById('div1').innerHTML=data.subjects[0].title;
});
})();
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
结果可以返回结果，页面显示为，表示获取成功！
