使用JavaScript实现跨域数据提交的原理与实现

出于安全性的考虑，在AJAX应用中，浏览器通常都会限制跨域提交数据，但这又恰恰是非常常用的需求。比如在a.com的页面上中提交一些请求数据到b.com的服务器上，b.com服务器处理请求完毕后返回响应内容到a.com的页面上。如何解决呢，使用js是比较简单易实现的方案，缺点是代码跟应用相关，无法抽象出模板机制进行重用。

具体的原理和实现是这样的，在a.com的页面上，假设叫a.html, 提交数据的javascript事件中动态添加一个类型为javascript的节点，这个节点指向接收数据的b.com的动态页面，以php为例，假设叫b.php页面。
但是在浏览器(包括IE系和Mozilla系以及Opera等)看来就像是包含一个真正的js脚本一样，因此它会去请求这个
b.php，在b.php中处理相应逻辑之后，返回一小段打印结果的javascript代码即可。返回到a.html后浏览器负责解析这一小段javascript代码，打印或显示出请求结果。正是通过这种‘欺骗’浏览器的方式，实现了数据跨域的功能。

a.html的相关Javascript代码如下：

这个PostData()是数据提交的函数，ShowPrompt()是负责回调的打印结果的小函数

function PostData()
｛
 //.......
 var requestURL =
'http://www.b.com/b.php?data1=' + data1+ '&data2=' + data2 ;

 var objHead = document.getElementsByTagName('head');
 var objScript = document.createElement('script');
 objScript.type = 'text/javascript';
 objScript.src = requestURL;
 objHead[0].appendChild(objScript);
 //......
}

function ShowPrompt(promptText)
{
 alert(promptText);
}

b.php的相关代码如下：

<?php 

/**
 *@exitalert 输出javascript代码并退出
 */
 function exitalert($alerttext)
 {
  echo("ShowPrompt('{$alerttext}');");
  exit();
 }

//read the request data...

  $alerttext .= "数据已收到，谢谢";
  exitalert($alerttext);

?>