<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>client.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function jsonpCallback(Data){
alert('333');
alert(Data.title['$t']);
}
function CallJSONPServer(url){ // 调用JSONP服务器，url为请求服务器地址
var oldScript =document.getElementById(url); // 如果页面中注册了调用的服务器，则重新调用
if(oldScript){
oldScript.setAttribute("src",url);
return;
}
var script =document.createElement("script"); // 如果未注册该服务器，则注册并请求之
script.setAttribute("type", "text/javascript");
script.setAttribute("src",url);
script.setAttribute("id", 'aaa2222');
document.appendChild(script);
}
</script>
</head>
<body>
<input type="button" onclick="CallJSONPServer('http://api.douban.com/book/subject/1220562?alt=xd&callback=jsonpCallback');" value="点击我"/>
</body>
</html>
下面是通过douban提供的js类访问
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>client.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="http://www.douban.com/js/api.js?v=2"></script>
<script type="text/javascript" src="http://www.douban.com/js/api-parser.js?v=1"></script>
<script type="text/javascript">
DOUBAN.apikey = '';
function getMovie(id){
DOUBAN.getMovie({
id:id,
callback:function(movie){
alert(movie);
alert(movie.title['$t']);
var subj = DOUBAN.parseSubject(movie);
var tl = subj.title ? subj.title : "";
var author = subj.author ? subj.author : "";
var di = subj.attribute.director ? subj.attribute.director.join(' / ') : "";
var tmp = "<img src="+subj.link.image+" style='margin:10px;float:left'>";
tmp += "<div>Title : <a href="+subj.link.alternate+" target='_blank'>"+tl+"</a></div>";
if (subj.attribute.author) tmp += "<div>Authors : "+(subj.attribute.author.join(' / '))+"</div>";
if (subj.attribute.director) tmp += "<div>Director : "+(subj.attribute.director.join(' / '))+"</div>";
if (subj.attribute.cast) tmp += "<div>Casts : "+(subj.attribute.cast.join(' / '))+"</div>";
if (subj.attribute.aka) tmp += "<div>A.k.a : "+(subj.attribute.aka.join(' <br/> '))+"</div>";
if (subj.attribute.language) tmp += "<div>Language : "+(subj.attribute.language.join(' / '))+"</div>";
if (subj.attribute.country) tmp += "<div>Country : "+(subj.attribute.country.join(' / '))+"</div>";
if (subj.rating.average)
tmp +="<div>Rating: "+subj.rating.average+" / "+subj.rating.numRaters+decodeURI("%E4%BA%BA")+ "</div>"
tmp += "<p>"+(subj.summary ? subj.summary : "")+"</p>";
document.body.innerHTML = tmp;
}
});
}
</script>
</head>
<body>
<input type="button" onclick="getMovie('2340927');" value="点击我"/>
</body>
</html>
分享到：
相关推荐
在本实例中，我们将结合Ajax与Jsonp，通过Jquery库来访问豆瓣API，获取书籍信息。 **1. 同源策略** 首先，我们需要了解什么是同源策略。同源策略是浏览器的一项安全政策，它限制了来自不同源的“脚本”之间交互。这...
电影信息查询脚本:open_book: 介绍 Introduction本...jsonp=imdb.rating.run:imdb.api.title.ratings/data.json考虑到豆瓣的 API 极其不稳定并有下线的可能性，本脚本尽量避免了对豆瓣 API 的调用，以避免对其过多的
- 在页面中，我们调用`$jsonp`（已将`jsonp`函数挂载到全局`window`对象上）来获取数据，传入豆瓣电影API的URL、空数据对象和一个处理数据的回调函数。 - 当服务器响应时，它会返回一个包裹着数据的JavaScript语句...
以豆瓣的公开API（https://api.douban.com/v2/book/1220562）为例，当前我的服务器处于http://127.0.0.1:5000下，豆瓣的服务器很显然跟我的服务器不同源，服务器中的一个页面通过AJAX请求该接口时，浏览器会发出如下...
- 小程序通常需要与服务器进行数据交换，这可能涉及JSONP、Ajax或小程序自带的网络请求API，如`wx.request()`。 - 为了获取和更新同城分类信息，开发者可能需要对接豆瓣或其他第三方API，获取分类、地点、时间等...
当用户访问豆瓣电影的某个电影页面时，插件会自动检测网页内容，然后通过API接口或者爬虫技术获取IMDB的相关数据。由于涉及到跨域请求，开发者可能需要处理跨域策略，例如利用JSONP（JSON with Padding）或者CORS...
6. **跨域请求**：由于浏览器的安全限制，前端JavaScript直接发起API请求可能存在跨域问题，需要服务器端进行代理，或者利用JSONP、CORS等技术解决。 7. **错误处理**：分享操作可能会失败，如网络问题、用户未授权...
然而，为了与不同的社交平台API进行通信，插件可能使用了JSONP（JSON with Padding）或者CORS（跨源资源共享）技术来实现跨域数据交换。 5. **URL短链服务**：在分享长链接时，一些平台可能会限制URL长度。插件可能...