关于JSONP以及跨域问题，请自行搜索。
本文重点给出AJAX JSONP的模拟实现代码，代码中JSONP的基本原理也一目了然。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟实现AJAX JSONP源码</title>
<script type="text/javascript">
// 生成随机字符串
function randomString(len) {
len = len || 32;
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhijklmnoprstuvwxyz1234567890";
var maxPos = chars.length;
var pwd = ‘‘;
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function ajax_jsonp(data) {
// 生成随机函数名并指向传入的回调函数
var callbackfun = "jquery_" + randomString(32);
eval( callbackfun+ " = data.success; ");
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = data.url + "&callback="+callbackfun;
// 创建script标签，设置其属性
var script = document.createElement(‘script‘);
script.setAttribute(‘src‘, url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName(‘head‘)[0].appendChild(script);
}
// 模拟调用
ajax_jsonp({
url: "http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",
success: function(data){
alert(‘ID ‘ + data.ad[0].id );
}
});
</script>
</head>
<body>
</body>
</html>
基本工作思路：
1. 创建一个随机字符串作为回调函数名
2. 把传入的回调函数赋值给随机函数。
3. 把该随机函数名作为callback参数补充到传入的URL（真正要访问的跨域的URL）中
4. 动态创建出script元素并触发URL的访问。浏览器获取返回的JS代码并执行，也就是执行了传入的回调函数。
（第三方URL返回的必须是一个合法的JS函数调用字符串，其中函数名是参数callback，参数是真正要返回的数据。）
注意：此文章属博主原创，转载请注明原始链接，谢谢合作。
http://www.cnblogs.com/zhangfanwen/p/5486860.html
时间： 2024-10-21 14:31:17