jquery实现跨域提交(原创)

jquery实现跨域提交(原创)

 

我们在运营一个产品的时候往往会遇到这样那样的表单提交，如客户数据收集、申请加盟、意见反馈等，由此我们开发了这样一个产品，可以理解为万能型数据收集平台，不难想到，我们在前端会遇到跨域的问题，比如 www.a.com 需要提交数据到www.app.com，以前我们用服务端代理来解决跨域问题，上次遇到一台windows服务器，实现代理比较麻烦，于是想到了jquery实现。他有两种方法，getJSON和getScript．

getScript我常用来获取服务端数据，getJSON可用于提交信息，其实两者均是实现跨域提交。

在jQuery1.3.2中,您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，如"myurl?callback=?"。jQuery将自动替换?为正确的函数名,以执行回调函数。

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里动态执行回调函数。

实例：

jquery代码:

$.getJSON("http://www.app.com/index.php?c=add&callback=?",{id: 10, name: "test"}, function(data){

alert(data.msg);

});

服务端返回：

jsonp1310628945031({"rs":true,"msg":"u60a8u7684u4fe1u606fu63d0u4ea4u6210u529fuff01"})

PHP代码：

$result['rs']　= false;

$result['msg'] = '您的信息提交成功！';

$json = new Services_JSON();

header('Content-Type: application/json');

echo $_GET['callback'].'('.$json->encode($result).')';