<!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>
分享到：
相关推荐
在请求中可能还需要添加一些其他参数，例如`apikey`（如果你已经注册了豆瓣开发者账号并获取了API密钥）和`callback`（如果需要JSONP格式的数据）。 3. **接收响应**：豆瓣API会返回一个JSON格式的响应，其中包含了...
### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中，跨域问题是一项常见挑战，尤其是在涉及不同协议（如HTTP与HTTPS）的数据交互时。本文将深入探讨如何利用JSONP（JSON with Padding）技术来实现HTTP与...
你是否遇到了想利用AJAX访问一些公网API，但是你又不想建立自己的代理服务，因为有时我根本就没打算涉及服务端任何代码，但是讨厌的浏览器的同源策略，阻止了我们的ajax调用。 比如我想访问一个天气的restfull api，...
在本实例中，我们将结合Ajax与Jsonp，通过Jquery库来访问豆瓣API，获取书籍信息。 **1. 同源策略** 首先，我们需要了解什么是同源策略。同源策略是浏览器的一项安全政策，它限制了来自不同源的“脚本”之间交互。这...
在标题"跨域访问禁止以及使用JSONP实现跨域的示例"中，我们将探讨如何应对这一挑战，特别是通过JSONP技术来突破限制。 首先，我们要理解什么是跨域。跨域是指一个域下的文档或脚本试图请求另一个域下的资源。比如，...
跨域访问是Web开发中一个常见的挑战，尤其是在进行Ajax异步请求时，浏览器的同源策略（Same-origin policy）会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题，开发者通常采用JSONP（JSON with ...
在JavaScript的世界里，由于同源策略的限制，浏览器禁止了不同源之间进行AJAX通信，但JSONP（JSON with Padding）作为一种巧妙的方式，允许我们绕过这个限制，实现在jQuery中进行跨域请求。本篇文章将深入探讨JSONP...
### JSONP实现Ajax跨域访问 #### 一、引言 JSONP（JSON with Padding）是一种用于解决跨域数据访问的技术。由于同源策略（Same-Origin Policy）的存在，JavaScript/Ajax只能请求同源的资源，这给需要跨域访问数据...
JSON（JavaScript Object Notation）和JSONP（JSON with Padding）是两种常见的数据交换格式，尤其在Web开发中广泛使用。本文将深入探讨这两种格式的特点、用途以及它们在跨域数据请求中的作用。 **1. JSON简介** ...
为了实现JSONP，ASP.NET需要提供一个支持JSONP的API。这通常通过在Controller或者Web服务方法中添加特定的逻辑来实现，比如检查请求中的回调函数名（通常在查询字符串中指定），然后将数据序列化为JSON，并将其包裹...
JSONP（JSON with Padding）是一种跨域数据交互协议，它的基本思想是利用JavaScript函数调用的特性，将数据封装在函数调用中，从而绕过浏览器的同源策略限制。在网页开发中，如果你需要从一个不同的域名下获取数据，...
在本示例中，我们将深入探讨JSONP的工作原理，以及如何使用Python来实现JSONP服务。 **JSONP的原理** JSONP的核心思想是通过动态插入`<script>`标签，其`src`属性指向提供数据的服务端URL。服务端返回的不是标准的...
例如，假设我们要从一个提供 JSONP 接口的 API 获取数据： ```javascript // MyComponent.vue <div>{{ data }} import jsonpRequest from '@/services/jsonpService'; export default { data() { return { ...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了HTML...这种方法广泛应用于需要跨域获取JSON数据的场景，如API接口的开发。通过这个例子，我们可以更好地理解JSONP的工作机制，并能在实际项目中灵活运用。
HTML通过AJAX和JSONP跨域请求常用于获取远程API数据、实时更新网页内容、用户认证等场景。例如，社交网站获取用户信息、新闻网站动态加载评论、电子商务网站实时显示库存等。 综上所述，HTML借助AJAX和JSONP，可以...
JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签可以跨域请求资源的特性，为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中，前端使用...
因为浏览器允许`<script>`标签引用不同源的资源，所以JSONP利用了这一特性，通过动态创建`<script>`标签并设置其`src`属性为服务器的API接口，接口返回的是一个JavaScript函数调用，函数名是客户端指定的，参数是...
JSONP简单调用实例。ASP.NET和纯HTML。jQuery的$.ajax的调用！jsonP说白了，就是在json字符串外面包上一个：参数名称+左右括弧！只是包了个：jsonpCallback() 而已！ 相关文章：...
虽然存在一些限制和安全隐患，但在很多场景下，特别是在API接口设计早期，JSONP仍然是一个实用的解决方案。随着CORS（跨源资源共享）的普及，JSONP的重要性逐渐被CORS取代，但理解JSONP的工作原理对于前端开发者仍然...