QQ空间的JSONP示例
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”方法
腾讯云开发者
