.book-info
{
color:#ccc;
font-style:italic;
border-bottom:dashed 1px #ccc;
}
</style>
</head>
<body>
<div>
<div>Books</div>
<div>
</div>
</div>
</body>
</html>
我们希望在id为books的div中展示所有book，先添加一个用以显示book的javascript函数，也就是获取到数据后的回调函数，结合上面拼接的json格式可以这么写
复制代码 代码如下:
function displayBooks(books){
var books=books.book;
var booksContainer=document.getElementById('books');
for(var i=0;i<books.length;i++){
var tmp=Array();
tmp.push('<div>'+books[i]['@attributes'].name+'</div>');
tmp.push('<div>');
tmp.push('<div>Publisher: '+books[i]['@attributes'].publisher+'</div>');
tmp.push('<div>Author(s): ');
if(typeof books[i].author=='string'){
tmp.push(books[i].author);
}else{
var authors=books[i].author;
for(var j=0;j<authors.length;j++){
tmp.push(authors[j]+' ');
}
}
tmp.push('</div>'); //end of author
tmp.push('</div>'); //end of book info
booksContainer.innerHTML+=tmp.join('');
}
}
然后是关键的jsonp请求的方法了
复制代码 代码如下:
function getBooks(){
var script=document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src','http://test.com/bookservice.php?callback=displayBooks');
document.body.appendChild(script);
}
getBooks();
在getbooks()方法中动态创建了一个script标签，设置其src为test.com提供的获取数据的service接口并传入回调函数，这样我们可以看看页面的反应，在Chrome控制台下可以看到这条请求
我们就可以在localhost下获取test.com的books了
jquery实现
在jquery中也有对jsonp的封装，不过jquery把其放到了ajax中，不明白为什么，毕竟这东西和ajax不太一样。写一个jQuery版的
复制代码 代码如下: