如何跨域获取json数据源?我们都知道要有callback,具体callback是如何工作的呢?如果服务器端不接收callback,我们是不是就没有办法处理了呢?读完本文后相信你会有一个大体的了解。

我们先来看一个例子:http://www.darlingbank.com/cutpage/index.php/promote/edit/getfun/json/

如果查看源码,你会发现,根本看不到页面里面的图片和文字。这是你会想应该是ajax异步获取的数据,但是打开FF,查看

你会发现也没有请求,这是怎么回事呢?

再细心的攻城狮们会发现,页面底部多了三个js:

这是在查看源码时没发现的。但是,在页面源码里面,你能看到

<ul class="cf" dataurl="http://www.paipai.com/sinclude/xml/tjw/tjw2014/tjw4/tjw179255804475.js" commlen="4" commsta="1" commtpl='<li><a href="{#recmdReason#}" target="_blank">{#recmdRegName#}</a></li>'>

类似这样的html标签。随便打开其中的一个js文件,你能发现,它其实就是一个规则的、静态的json格式的文件,也不能接收callback,这是如何做到的呢?

【注】如果是能接收calllback的,一般是动态语言,如php,$_get['callback']之类,然后生成的json对象名就为callback之后的参数值。

相信我们理解了jsonp的原理,就很容易做到了:

简单理解jsonp:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。

Jsonp整个执行过程是这样的:

首先在客户端注册一个callback (如:'callback'), 然后把callback的名字(如:tjw179464084474)传给服务器。注意:服务端得到callback的数值后,要用tjw179464084474({......})把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。然后以 javascript 语法的方式,生成一个function, function 名字就是传递上来的参数 'callback'的值tjw179464084474。最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数, 传入到了客户端预先定义好的 callback 函数,如该例子的function tjw179464084474(){}。

再回到我们的例子:毋庸置疑,那三个请求的js是通过下面的代码解析出来的:

  var J_data = {
debug : true,
log : function(s){
this.debug && (window.console ? console.log(s) : alert(s));
},
create_script : function(src){
var Scrip=document.createElement('script');
Scrip.charset="gbk";
Scrip.src=src;
document.body.appendChild(Scrip);
},
get : function(){
var thats=this;
$("[dataurl]").each(function () {
var that=this;
dataurl=$(this).attr("dataurl"),
tpl_tmp=$(this).attr("commtpl");
if(typeof tpl_tmp==='undefined' || tpl_tmp===''){
thats.log('请填写模板');
}else{
var c_str=dataurl.slice(dataurl.lastIndexOf('/')+1).split('.')[0]; window[c_str]=function(j){
var d=j.data.adList,html='',
len=parseInt($(that).attr("commlen")) || d.length,
start=parseInt($(that).attr("commsta")) || 0,
tpl=$(that).attr("commtpl");
if(start>0 && len<d.length){
len +=start;
}
for(var i=start;i<len;i++){
html += tpl.replace(/{#recmdReason#}/g,d[i].recmdReason).replace(/{#recmdRegName#}/g,d[i].recmdRegName).replace(/{#image#}/g,d[i].image).replace(/{#adSentence#}/g,d[i].adSentence);
}
$(that).html(html);
}
// $.getScript(dataurl+"?callback="+c_str); //亦可以用jquery方法
thats.create_script(dataurl+"?callback="+c_str);
}
});
}
}
$(function(){
J_data.get();
})

我们看得出来,这里服务器端js文件是没办法接收callback参数的,但是我们发现另外一个特点:每个json对象名都是跟js文件名有关的。如果理解了上述jsonp原理,我们知道之所以要有callback,是为了返回生成对象的对象名是什么,以至于知道返回到客户端的方法名,这是就可以注册全局的方法,所以我们能看到这段代码:

window[c_str]=function(j){

就已经获取到callback的方法名了。接下来的事就顺理成章了,只是解析json对象里面的值,拼成html插入dom,大功告成!

跨域获取json一些理解[腾讯电商数据的拉取方式]的更多相关文章

  1. 跨域获取json数据

    原文地址:http://my.oschina.net/LinBandit/blog/34570   前阵子做了一个前端动态加载json数据的应用,其中使用xmlhttprequest动态加载js,但是 ...

  2. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  3. [ 转 ]jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  4. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  5. ASP.NET 跨域获取JSON天气数据

    前几天做一个门户网站,在首页需要加载气象数据,采用了中央气象局的接口. 刚开始采用JSONP在前台跨域请求数据,没成功~ 后换成在c#后台请求数据返回... 前端代码: $(function () { ...

  6. javascript跨域获取json数据

    项目在开发过程中,用到了天气预报的功能,所以需要调用天气预报的api,一开始以为直接用ajax调用url就可以获取天气数据,结果涉及到了跨域的问题,这里做一个记录. 说到跨域,就得知道同源策略. 同源 ...

  7. jq跨域获取json

    <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" ...

  8. 关于跨域读取json数据我的理解

    这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...

  9. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

随机推荐

  1. CozyRSS开发记录15-获取和显示RSS内容

    CozyRSS开发记录15-获取和显示RSS内容 1.内容列表 我们先给RSSContentFrame增加一个ViewModel,里面和RSS源列表一样,提供一个ObservableCollectio ...

  2. CozyRSS开发记录9-快速实现一个RSS解析器

    CozyRSS开发记录9-快速实现一个RSS解析器 1.再读RSS标准 既然需要自己实现一个RSS解析器,那自然需要仔细的读一读RSS的标准文档.在网上随便找了两份,一份英文一份中文: http:// ...

  3. Go语言 Cookie的使用

    首先看看Cookie的结构体 type Cookie struct { Name string Value string Path string // optional Domain string / ...

  4. Eclipse启动时发生An internal error occurred during: "Initializing Java Tooling".错误的解决方法

    问题描述: Eclipse启动时发生An internal error occurred during: "Initializing JavaTooling".错误的解决方法 解决 ...

  5. hdu2662

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2662 莫名其妙写了一个题,感觉还是很有价值的记录一下. 题目大意:给两个互质的数,求用无限个它们不能组 ...

  6. wpf 触发器理解

    (1)属性触发器:其对应的类是Trigger.它在特定关联属性发生变化时被触发.一个属性的更改会在另一个属性中触发即时或动态更改. (2)数据触发器:其对应的类是DataTrigger.它在特定的CL ...

  7. UBUNTU 16.04 编译 OPENJDK8

    参考了几篇文章,和错误查询,最后总结如下 一.下载 我比较倾向于使用mercurial来获取源代码,虽然你得挑网络稳定的时候更新,但是易更新. 从官网查找一下,可以通过以下步骤完成源代码的下载 1. ...

  8. asp.net,cookie,写cookie,取cookie

    Cookie是一段文本信息,在客户端存储 Cookie 是 ASP.NET 的会话状态将请求与会话关联的方法之一.Cookie 也可以直接用于在请求之间保持数据,但数据随后将存储在客户端并随每个请求一 ...

  9. php清理服务器无效软链接(源码)

    <?php /** * @desc 递归删除当前目录下的无效软连接 * @author mengdj<mengdj@outlook.com> 2014.10.03 1118 */ / ...

  10. 启动tomcat 报 Could not delete D:/online/.metadata/.plugins/org.eclipse.wst.server.core/tm

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXkAAADkCAIAAADy7sNDAAAgAElEQVR4nO2deVQUV77H6z+haSeTkZ