QQ空间的JSONP示例

根据Velocity的演讲“性能优化无未日--Qzone首页性能优化2012篇”写的一个例子

书写的示例,没有做请求成功、失败的处理方法,在实际应用中是需要进行清理操作和超时处理的。

function JSONGetter(url, callbackFn, charset) {

    if (window.ActiveXObject) {
        //IE
        var docFrag = document.createDocumentFragment(),
            tempScript = docFrag.createElement('script');


        docFrag['_Callback'] = function() {
            callbackFn.apply(null, arguments);
        }

        docFrag.appendChild(tempScript);
        tempScript.charset = charset || 'utf-8';
        tempScript.src = url;
    } else {
        //非IE
        var reqSendIfrm = document.createElement('iframe'),
            chst = charset || 'utf-8',
            srcDocText = [
                'javascript:',
                '\'<html><head><meta http-equiv="Content-type" content="text/html; charset='+chst+'"/></head><body>',
                '<script type="text/javascript">',
                'function _Callback() {frameElement._Callback.apply(null, arguments);}',
                '<\/script>',
                '<script type="text/javascript" src="'+url+'" charset="'+chst+'">',
                '<\/script>',
                '</body></html>\''
            ].join('');

        reqSendIfrm['_Callback'] = callbackFn;
        reqSendIfrm.src = srcDocText;
        reqSendIfrm.style.display = 'none';
        document.body.appendChild(reqSendIfrm);
    }

}

在线查看/运行示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JSONP</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <button onclick='requestData();'>请求数据</button> <div style='width:600px; height:400px; border:1px solid #406c99; overflow:auto; padding:2px; margin-top:10px;'> <div style='word-wrap: break-word;' id='resultTxt'></div> </div> </body> </html> 预览代码

有兴趣了解Qzone的实现细节,可以自己动手抓包看看..qzfl 中的“QZFL.JSONGetter”方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏业余草

分享一款jQuery全屏滚动页面特性案例

分享一款jQuery全屏滚动页面特性案例。 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子。可以说全屏滚动页面...

35230
来自专栏业余草

网页固定侧栏的做法

固定侧边的做法有很多种,今天为大家介绍一种非常简单的做法。整个html文档只有23行代码就搞定了。

30220
来自专栏业余草

Ext实现滚动条一直处于底部的方法

在我们的实际开发应用中,经常会使用到ext的常用控件textarea。对于一些form表单,录入信息的备注,简介等等信息较多的时候就会使用的textarea。最...

24330
来自专栏程序人生2.0

在WordPress 5.x 中把 HTML 转换成 Markdown 编写文件

即使在 WordPress 5 启用新的 Gutenberg 编辑器之后,很多 Markdown 的插件都失效了。因为不支援到最新的 WordPress 5。

39230
来自专栏伟大程序猿的诞生

微信小程序开发--【Hello World 及代码结构】(二)

通过上一篇我们已经完成了注册及开发环境的搭建,今天我们来开发我们的第一个微信小程序 微信小程序开发注册流程

28170
来自专栏流川疯编写程序的艺术

基于OpenCV 的美颜相机推送直播流

先从opencv(2.4.10版本)采集回来摄像头的图像,是一帧一帧的 每一帧图像是一个矩阵,opencv中的mat 数据结构。

29020
来自专栏业余草

jQuery实现网页右下角悬浮层提示

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子,很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还...

28420
来自专栏业余草

HTML5 Canvas API详解

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — ...

54720
来自专栏业余草

使用easydrag实现可拖动的DIV弹出框

最近在工作中遇到了jquery的easydrag插件,我有一种相见恨晚的赶脚!easydrag极大的方法我们实现div弹框这个...

19460
来自专栏业余草

二维码在线生成工具

二维码在生活中使用的场景越来越多!支付宝,微信扫描付等。今天为大家展示一款使用jQuery.qrcode插件制作二维码的方法和工具!

80120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励