公司需要新开发一个项目，这个项目和其他产品有关联。现在需要从其他产品的页面通过加载js文件来实现数据交换。简单的说就是：有两个产品，分别是A和B，A产品提供JS文件接口给B产品，B产品只需把JS接口文件引入到自己的页面即可显示A产品的数据。

ajax 使用json请求的话，如果是相同域名下是可以的。但是跨域的话就不能访问了。这时需要使用 jsonp 来解决问题。如果以下教程帮到了您，请点击关注哦！

• A产品是新项目，负责编写JS接口文件，域名是 localhost .testlink. com ；

• B产品引入JS接口文件，域名是localhost.xyh.com。

1、在A产品里编写JS接口文件代码。

var src = $('script[id=certcenter]').attr('src'); 

这段代码的作用是通过id来获取B产品引入js时的src属性 字符串 ，从而获取参数。

if(isUndefined(src)){
throw new Error("error tips from certCenter：js引入失败！");
} 

为了保险起见，如果B产品未引入或者id不对，将抛出异常。

var param = GetSrcParam(src); 

//从引入的js获取参数
function GetSrcParam(src) {
//截取src中"?"符后的字串
var index = src.lastIndexOf("?");
var url = src.substr(index+1,src.length);
var theRequest = new Object();
strs = url.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
return theRequest;
} 

这是截取src字符串里的参数。

//判断参数是否正确
if(isUndefined( account )){
throw new Error("error tips from certCenter：参数account未传入！");
}
if(isUndefined(token)){
throw new Error("error tips from certCenter：参数token未传入！");
}
if(isUndefined(dleft) || isNaN(dleft)){
dleft = 10;
}
if(isUndefined(dtop) || isNaN(dtop)){
dtop = 10;
}
if(isUndefined(width) || isNaN(width)){
width = 200;
}
if(isUndefined(height) || isNaN(height)){
height = 80;
} 

校验参数是否有传入。B产品必传的参数是用户账户account和加密校验token。

$.ajax({
type: 'GET',
cache: false,
url:"",
data:{"account":account,"token":token},
dataType: "jsonp",
jsonp: " callback ",
jsonpCallback: "success_jsonpCallback",
success: function (result){
var status = result.status;
var  msg  = result.msg;
var data = result.data;
if(status == 1){
var count = data.count;
var return_url = data.url;
var content = "<a target='_blank' href='"+return_url+"' id='cert_content'>您新来了<b>"+count+"</b>个</a>";
console.log(content);
$(document.body).append(content);
}else{
console.log("error tips from certCenter："+msg);
}
},
error:function () {
console.log("error tips from certCenter：数据请求失败，请稍后重试！");
}
}); 

通过jsonp的ajax，请求A产品的PHP脚本。

A产品的PHP脚本部分代码如下：

以上代码是接收ajax传过来的参数以及安全性校验。jsonp返回的方法是：先将内容json_encode，并用括号包起来，

然后连同jsonp的callback方法名一起输出。

如果PHP脚本处理成功，将返回status为1的内容。

然后js那边接收返回的内容，处理后进行展示。

B产品引入JS文件的方法是：

<script id="certcenter" src=""></script> 

浏览器里打开B产品的这个页面，输出如下图：

通过上图知道：确实是从域名localhost.xyh.com来请求域名localhost.testlink.com的数据。

不知道以上教程有没有写清楚，如果有任何疑问和建议，欢迎评论提问！