成长脚印-专注于互联网发展

【解决】JS跨域操作解决方案

post by:天之骄子 2013-5-24 22:09

今天在做注册表单时碰到的问题：两个域名下的相同表单都需提交到同台服务器中的数据库存储。

组好数据，AJAX POST提交过去后没有任何数据返回，Firfox的XHR虽然返回200 OK，但POST地址却红色高亮，Chrome直接forbidden了。
于是知道了，跨域操作被阻止了（浏览器的安全策略）。

赶着下班的点弄完，所以用了最简单的跨域方法：JQ的$.getScript方法（原生JS中可以创建Script标签加载请求地址 var JSONP = document.createElement("script")）。

方案初稿：

HTML页面：

function showError(){//回调函数
    if(msg=="success"){
           alert("申请提交成功！");
    }else if(msg=="Register Aready!"){
        alert("您已经提交过申请！");
    }else{
           alert("Sorry,提交失败,请刷新页面后重新提交！");
    }
}

var params=$.param({name:name,mobile:mobile,email:email});//组装数据
$.getScript('http://www.exampe.com/register.php?jsonp=true&'+params,showError);

PHP页面：

$jsonp=$_REQUEST['jsonp'];

//some handle

if(...){
    echo ($jsonp==true)?'msg="Register Aready!"':'Register Aready!';
    return false;
}else if(...){
    echo ($jsonp==true)?'msg="success"':"success";
    return true;
}else{
    echo ($jsonp==true)?'msg="error"':"error";
    return false;
}

在$.getScript 后执行了PHP页面返回的数据，声明了一个全局变量msg,然后回调函数就可以使用这个全局变量了。

方案修改稿：

如果想使调用更灵活（加上回调函数），可以更改如下
HTML页面：

function showError(msg){//回调函数
    if(msg=="success"){
           alert("申请提交成功！");
    }else if(msg=="Register Aready!"){
        alert("您已经提交过申请！");
    }else{
           alert("Sorry,提交失败,请刷新重试！");
    }
}

var params=$.param({name:name,mobile:mobile,email:email});//组装数据
$.getScript('http://www.exampe.com/register.php?jsonp=true&'+params+'&callback=showError');

PHP页面：

//some handle

if(...){
    $status='success';
    $notice='操作成功';
}else{
    $status='error';
    $notice='操作失败';
}

$jsondata = '{status:'.$status.', notice:'.$notice.'}';
echo $_REQUEST['callback'].'('.$jsondata.')';
return;

这样$.getScript后就直接自动传参调用回调函数，而不是创建一个全局变量后再调用了，相比比前一种方法灵活高效。

JS跨域方案还有很多种，这应该是最简单的了。其它方案请参考以下链接，不敷述。

【参考】：

常用关于 JavaScript 中的跨域访问方法

使用Jsonp解决跨域数据访问问题

利用JSONP解决AJAX跨域问题的原理与jQuery解决方案

JavaScript跨域总结与解决办法

Javascript跨域详解

Javascript跨域访问解决方案

评论：

发表评论：