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>

function getEl(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}

function callbackFnRef() {
	var o = arguments[0];
	var str = JSON.stringify(o);

getEl('resultTxt').innerHTML = str;
}

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);
	}

}

function requestData() {
	getEl('resultTxt').innerHTML = '正在请求数据...';

JSONGetter('http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin=20050606&fupdate=1&g_tk=2131024478&rd=1356673811', callbackFnRef);
}

requestData();
</script>

</body>
</html>

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