[ Author: Zhang Yan] In a recent project, I needed to submit form data with JavaScript to a PHP interface under another domain (HTTP POST was required because the data was large), and read back the return value of that PHP interface, updating the contents of a div tag without the page refreshing or navigating. For security reasons, browsers don’t allow JavaScript code to perform cross-domain operations. JavaScript and AJAX cross-domain access falls into two broad categories: one is interaction between the primary domain and a subdomain, the other is interaction between the primary domain and other domains. 1. Interaction between the primary domain and a subdomain: www.zyan.cc and blog.zyan.cc. 2. Interaction between the primary domain and other domains: blog.zyan.cc and api.bz. For primary-domain-to-subdomain interaction, you can set document.domain = “zyan.cc” on both domains through an iframe, giving you cross-domain access under the unified zyan.cc domain. For primary-domain-to-other-domain interaction, you can use several approaches such as iframes, a proxy, or dynamically creating a script from JS; here is an article that briefly introduces several of these methods. The iframe and dynamically-created-script approaches require the developer to control both domains and to write corresponding code on both ends, which is extremely cumbersome. Writing a PHP proxy relay program on the server of your own domain — letting your local PHP program read data from the remote domain and hand it back to you — is a common approach. But under a system architecture where “the front end is a CDN or Squid cache server and the backend is the PHP application server,” going through the CDN or Squid to reach a PHP proxy relay program that can’t be cached is very inefficient.
Some people abroad have tried using Flash as a relay for JavaScript and AJAX cross-domain access, and it is undoubtedly a good approach. JavaScript submits data to a Flash file under the same domain, and the Flash relays it to access the interface in another domain; the only requirement is that the other domain has a crossdomain.xml file in its root directory that either allows all domains or allows your domain to access it. Many websites’ API domains provide a crossdomain.xml file. For example: 1. Sina Blog’s crossdomain.xml file (http://blog.sina.com.cn/crossdomain.xml) is set to allow access from all domains; 2. Fanfou API’s crossdomain.xml file (http://api.fanfou.com/crossdomain.xml) is set to allow access from all domains; 3. Xiaonei API’s crossdomain.xml file (http://api.xiaonei.com/crossdomain.xml) is set to allow access from all domains; 4. Youku’s crossdomain.xml file (http://www.youku.com/crossdomain.xml) is set to allow access from all domains; 5. Tudou’s crossdomain.xml file (http://www.tudou.com/crossdomain.xml) is set to allow access from all domains; 6. Xiaoyao Video’s crossdomain.xml file (http://v.xoyo.com/crossdomain.xml) is set to allow access only from *.xoyo.com domains; 7. NetEase’s crossdomain.xml file (http://www.163.com/crossdomain.xml) is set to allow access only from a few domains such as tech.163.com and sports.163.com.
Building on “Cross-domain AJAX using Flash“, I added the ability to handle forms intelligently and packaged it as a JavaScript bundle: AJAXCDR. With AJAXCDR you can easily solve JavaScript and AJAX cross-domain HTTP POST/GET form requests, with support for browsers including IE, Firefox and Google Chrome. AJAXCDR consists of two files: ajaxcdr.js and ajaxcdr.swf. AJAXCDR exposes one JavaScript function, AjaxCrossDomainRequest(), and one global variable, AjaxCrossDomainResponse. 1. Downloading AJAXCDR: http://blog.zyan.cc/demo/ajaxcdr/ajaxcdr-1.0.zip
Download the file
Click here to download the file
Note: please edit ajaxcdr.js, search for “/demo/ajaxcdr/ajaxcdr.swf”, and replace that Flash file path with your own path. 2. AJAXCDR function reference: 1. JavaScript function: AjaxCrossDomainRequest(URL, Method, FormName, CallBack); Parameter reference: URL: the URL to access, equivalent to the value of a form’s action=. Method: the method; this function supports POST and GET, equivalent to the value of a form’s method=. FormName: the form name, equivalent to the value of a form’s name=. CallBack: the callback function, a user function called after the request completes, in which you can process the return value. 2. JavaScript global variable: AjaxCrossDomainResponse After the user calls the AjaxCrossDomainRequest() function to complete an HTTP POST/GET request, the function writes the data returned by the server into the AjaxCrossDomainResponse variable, and you can retrieve the return value through the AjaxCrossDomainResponse variable. 3. AJAXCDR usage examples: 1. Example one (simple demo): Demo address: http://blog.zyan.cc/demo/ajaxcdr/demo1.html
<form name="cross_domain_demo">
<input name="title" type="text" value="测试数据">
</form>
<a href="javascript:AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php', 'POST', 'cross_domain_demo', 'mycallback()');">提交</a>
<script type="text/javascript">
function mycallback(){
alert(AjaxCrossDomainResponse);
}
</script>
<script type="text/javascript" src="/demo/ajaxcdr/ajaxcdr.js"></script>
The echo.php source code is: http://api.bz/ajaxcdr/echo.txt The crossdomain.xml file is: http://api.bz/crossdomain.xml 2. Example two (complex form demo): Demo address: http://blog.zyan.cc/demo/ajaxcdr/demo2.html
| JavaScript POST/GET 跨域提交信息到：http://api.bz/ajaxcdr/echo.php （源代码） |
| api.bz服务器端返回信息： |
The echo.php source code is: http://api.bz/ajaxcdr/echo.txt The crossdomain.xml file is: http://api.bz/crossdomain.xml Original article link: http://blog.zyan.cc/ajaxcdr/
