Ajaxcdr: uses flash to perfectly solve cross-origin http post/get form requests between JavaScript and Ajax

Source: Internet
Author: User
Tags domain server subdomain

Javascript cross-origin get is easy to determine, but cross-origin post is a bit complicated. Today I have no intention of seeing Daniel"Zhang banquet"Article:Http://blog.s135.com/ajaxcdr/, The idea is very good, and it is reproduced here (in fact, this idea can be easily implemented by using Silverlight)

In a recent project, you need to submit form data to the PHP interface under another domain name through JavaScript (because the data is large, you need to submit it through http post) and obtain the PHP interface return value, update the content in the DIV label without refreshing the page or redirecting.

For security reasons, the browser does not allow JavascriptCodeTo perform cross-origin operations. JavaScript and Ajax cross-domain access can be divided into two categories: interaction between the local domain and the subdomain, and interaction between the local domain and other domains.

1. Interaction between the local domain and subdomain: www.s135.com and blog.s135.com
2. Interaction between the local domain and other domains: blog.s135.com and API. bz

For interaction between the local domain and the subdomain, you can use IFRAME to set the two domain names document. Domain = "s135.com" to implement unified cross-origin access under the s135.com domain.

The interaction between this domain and other domains can be achieved through several methods, such as IFRAME, proxy, and JS dynamic Script Creation. This article briefly introduces several methods.

The IFRAME and JS methods for creating dynamic scripts require developers to control the two domains and write the corresponding code at both ends, which is very troublesome. Write a proxy in PHP on the Local Domain ServerProgramTo allow the PHP program in this domain to read data from other remote domains and then return it to itself. This is a common method. However, in the system architecture where "the front end is a CDN or Squid cache server and the backend is a PHP application server, attackers can use CDN or squid to access PHP proxy intermediate programs that cannot be cached. The efficiency is very low.

Some foreign users attempt to use flash for cross-domain access transfer between JavaScript and Ajax, which is undoubtedly a good method. Javascript submits data to the flash in the current domain, and uses flash to transfer the interface to other domains. The condition only requires a crossdomain under the root directory of other domains. XML file, which allows all domain names or local domain access. API domain names of many websites provide crossdomain. XML files.

For example:
1. The crossdomain. xml file (http://blog.sina.com.cn/crossdomain.xml) of Sina Blog is set to allow access from all domain names;
2. Whether the crossdomain. xml file (http://api.fanfou.com/crossdomain.xml) of the API is set to allow access by all domain names;
3. The crossdomain. xml file (http://api.xiaonei.com/crossdomain.xml) of the internal network API is set to allow access by all domain names;
4. The Youku crossdomain. xml file (http://www.youku.com/crossdomain.xml) is set to allow access to all domain names;
5. Tudou's crossdomain. xml file (http://www.tudou.com/crossdomain.xml) is set to allow access from all domain names;

6. The crossdomain. xml file (http://v.xoyo.com/crossdomain.xml) of the happy video is set to only allow access to the * .xoyo.com domain name;
7. Netease's crossdomain. xml file (http://www.163.com/crossdomain.xml) is set to allow only tech.163.com, sports.163.com and other domain names to access.

On the basis of "cross-domain Ajax using flash", I added the function of intelligently processing forms and encapsulated a javascript package: Ajaxcdr . With ajaxcdr, JavaScript and Ajax cross-origin http post/get form requests can be easily solved, and multiple browsers such as IE, Firefox, and Google Chrome can be supported.

Ajaxcdr has two files: ajaxcdr. js and ajaxcdr.swf. ajaxcdr has a JavaScript function ajaxcrossdomainrequest () and a global variable ajaxcrossdomainresponse.

1. ajaxcdr download:
Http://blog.s135.com/demo/ajaxcdr/ajaxcdr-1.0.zip

Download file click here to download the file

Note:Edit ajaxcdr. JS, find "/demo/ajaxcdr/ajaxcdr.swf", and change the path of this flash file to your path.

Ii. ajaxcdr function description:
1. JavaScript Functions:
Ajaxcrossdomainrequest (URL, method, formname, callback );

Parameter description:
URL: the URL to be accessed, which is equivalent to the value of Form Action =.
Method: method. This function supports the post and get methods, which is equivalent to the value of method = of the form.
Formname: form name, which is equivalent to the value of name = of the form.
Callback: the callback function. After the request is complete, it calls back a user's function. You can process the return value in this function.

2. Javascript global variables:
Ajaxcrossdomainresponse
After you call the ajaxcrossdomainrequest () function to complete the http post/GET request, the function writes the data returned by the server to the ajaxcrossdomainresponse variable. You can use the ajaxcrossdomainresponse variable to obtain the returned value.

Iii. ajaxcdr application example:
1. Example 1 (simple demonstration ):
Demo address:Http://blog.s135.com/demo/ajaxcdr/demo1.htmlview plaincopy to clipboardprint?

  1. <Form name ="Cross_domain_demo">
  2. <Input name ="Title"Type ="Text"Value ="Test Data">
  3. </Form>
  4. <A href ="Javascript: ajaxcrossdomainrequest ('HTTP: // API. BZ/ajaxcdr/echo. php', 'post', 'cross _ domain_demo ', 'mycallback ()');"> Submit </a>
  5. <SCRIPT type ="Text/JavaScript">
  6. FunctionMycallback (){
  7. Alert (ajaxcrossdomainresponse );
  8. }
  9. </SCRIPT>
  10. <SCRIPT type ="Text/JavaScript"Src ="/Demo/ajaxcdr. js"> </SCRIPT>

<Form name = "cross_domain_demo"> <br/> <input name = "title" type = "text" value = "Test Data"> <br/> </form> <br/> <a href = "javascript: ajaxcrossdomainrequest ('HTTP: // API. bz/ajaxcdr/ECHO. PHP ', 'post', 'cross _ domain_demo', 'mycallback ()'); "> submit </a> <br/> <SCRIPT type =" text/JavaScript "> <br/> function mycallback () {<br/> alert (ajaxcrossdomainresponse ); <br/>}< br/> </SCRIPT> <br/> <SCRIPT type = "text/JavaScript" src = "/demo/ajaxcdr. JS "> </SCRIPT>Echo. phpSource codeFor: http://api.bz/ajaxcdr/echo.txt
Crossdomain. xml file: http://api.bz/crossdomain.xml

2. Example 2 (complex form Demonstration ):
Demo address:Http://blog.s135.com/demo/ajaxcdr/demo2.html

<HTML> 

Echo. php source code: http://api.bz/ajaxcdr/echo.txt
Crossdomain. xml file: http://api.bz/crossdomain.xml

Postscript:Zhang Yi classmates brought us such a good article, white also embarrassed, finally contribute a demo of aspx, see http://files.cnblogs.com/yjmyzz/ajaxcdr_aspx_demo.7z

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.