├── README
├── cors.js
├── cors.php
└── index.html


/README:
--------------------------------------------------------------------------------
1 | This is a Cross-Origin Resource Sharing demo.
2 | 
3 | Both GET and POST examples are given for accessing a resource cross-origin.
4 | The PHP file contains the necessary Access-Control headers for announcing that
5 | a resource supports cross-origin requests.
6 | 
7 | http://saltybeagle.com/2009/09/cross-origin-resource-sharing-demo/
8 | 


--------------------------------------------------------------------------------
/cors.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This is for Cross-site Origin Resource Sharing (CORS) requests.
  3 |  * 
  4 |  * Additionally the script will fail-over to a proxy if you have one set up.
  5 |  * 
  6 |  * @param string   url      the url to retrieve
  7 |  * @param mixed    data     data to send along with the get request [optional]
  8 |  * @param function callback function to call on successful result [optional]
  9 |  * @param string   type     the type of data to be returned [optional]
 10 |  */
 11 | function getCORS(url, data, callback, type) {
 12 |     try {
 13 |         // Try using jQuery to get data
 14 |         jQuery.get(url, data, callback, type);
 15 |     } catch(e) {
 16 |         // jQuery get() failed, try IE8 CORS, or use the proxy
 17 |         if (jQuery.browser.msie && window.XDomainRequest) {
 18 |             // Use Microsoft XDR
 19 |             var xdr = new XDomainRequest();
 20 |             xdr.open("get", url);
 21 |             xdr.onload = function() {
 22 |                 callback(handleXDROnload(this, type), 'success', this);
 23 |             };
 24 |             xdr.send();
 25 |         } else {
 26 |             try {
 27 |                 // Ancient browser, use our proxy
 28 |                 var mycallback = function() {
 29 |                     var textstatus = 'error';
 30 |                     var data = 'error';
 31 |                     if ((this.readyState == 4)
 32 |                         && (this.status == '200')) {
 33 |                         textstatus = 'success';
 34 |                         data = this.responseText;
 35 |                     }
 36 |                     callback(data, textstatus);
 37 |                 };
 38 |                 // proxy_xmlhttp is a separate script you'll have to set up
 39 |                 request = new proxy_xmlhttp();
 40 |                 request.open('GET', url, true);
 41 |                 request.onreadystatechange = mycallback;
 42 |                 request.send();
 43 |             } catch(e) {
 44 |                 // Could not fetch using the proxy
 45 |             }
 46 |         }
 47 |     }
 48 | }
 49 | 
 50 | /**
 51 |  * This method is for Cross-site Origin Resource Sharing (CORS) POSTs
 52 |  *
 53 |  * @param string   url      the url to post to
 54 |  * @param mixed    data     additional data to send [optional]
 55 |  * @param function callback a function to call on success [optional]
 56 |  * @param string   type     the type of data to be returned [optional]
 57 |  */
 58 | function postCORS(url, data, callback, type)
 59 | {
 60 |     try {
 61 |         // Try using jQuery to POST
 62 |         jQuery.post(url, data, callback, type);
 63 |     } catch(e) {
 64 |         // jQuery POST failed
 65 |         var params = '';
 66 |         for (key in data) {
 67 |             params = params+'&'+key+'='+data[key];
 68 |         }
 69 |         // Try XDR, or use the proxy
 70 |         if (jQuery.browser.msie && window.XDomainRequest) {
 71 |             // Use XDR
 72 |             var xdr = new XDomainRequest();
 73 |             xdr.open("post", url);
 74 |             xdr.send(params);
 75 |             xdr.onload = function() {
 76 |                 callback(handleXDROnload(this, type), 'success', this);
 77 |             };
 78 |         } else {
 79 |             try {
 80 |                 // Use the proxy to post the data.
 81 |                 request = new proxy_xmlhttp();
 82 |                 request.open('POST', url, true);
 83 |                 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 84 |                 request.send(params);
 85 |             } catch(e) {
 86 |                 // could not post using the proxy
 87 |             }
 88 |         }
 89 |     }
 90 | }
 91 | 
 92 | /**
 93 |  * Because the XDomainRequest object in IE does not handle response XML,
 94 |  * this function acts as an intermediary and will attempt to parse the XML and
 95 |  * return a DOM document.
 96 |  * 
 97 |  * @param XDomainRequest xdr  The XDomainRequest object
 98 |  * @param string         type The type of data to return
 99 |  * 
100 |  * @return mixed 
101 |  */
102 | function handleXDROnload(xdr, type)
103 | {
104 |     var responseText = xdr.responseText, dataType = type || "";
105 |     if (dataType.toLowerCase() == "xml"
106 |         && typeof responseText == "string") {
107 |         // If expected data type is xml, we need to convert it from a
108 |         // string to an XML DOM object
109 |         var doc;
110 |         try {
111 |             if (window.ActiveXObject) {
112 |                 doc = new ActiveXObject('Microsoft.XMLDOM');
113 |                 doc.async = 'false';
114 |                 doc.loadXML(responseText);
115 |             } else {
116 |                 var parser = new DOMParser();
117 |                 doc = parser.parseFromString(responseText, 'text/xml');
118 |             }
119 |             return doc;
120 |         } catch(e) {
121 |             // ERROR parsing XML for conversion, just return the responseText
122 |         }
123 |     }
124 |     return responseText;
125 | }


--------------------------------------------------------------------------------
/cors.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // Specify domains from which requests are allowed
 4 | header('Access-Control-Allow-Origin: *');
 5 | 
 6 | // Specify which request methods are allowed
 7 | header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
 8 | 
 9 | /*
10 |  * jQuery < 1.4.0 adds an X-Requested-With header which requires pre-flighting
11 |  * requests. This involves an OPTIONS request before the actual GET/POST to 
12 |  * make sure the client is allowed to send the additional headers.
13 |  * We declare what additional headers the client can send here.
14 |  */
15 | 
16 | // Additional headers which may be sent along with the CORS request
17 | header('Access-Control-Allow-Headers: X-Requested-With');
18 | 
19 | // Set the age to 1 day to improve speed/caching.
20 | header('Access-Control-Max-Age: 86400');
21 | 
22 | // Exit early so the page isn't fully loaded for options requests
23 | if (strtolower($_SERVER['REQUEST_METHOD']) == 'options') {
24 |     exit();
25 | }
26 | 
27 | // If raw post data, this could be from IE8 XDomainRequest
28 | // Only use this if you want to populate $_POST in all instances
29 | if (isset($HTTP_RAW_POST_DATA)) {
30 |     $data = explode('&', $HTTP_RAW_POST_DATA);
31 |     foreach ($data as $val) {
32 |         if (!empty($val)) {
33 |             list($key, $value) = explode('=', $val);   
34 |             $_POST[$key] = urldecode($value);
35 |         }
36 |     }
37 | }
38 | 
39 | echo 'Hello CORS, this is '
40 |      . $_SERVER['SERVER_NAME'] . PHP_EOL
41 |      .'You sent a '.$_SERVER['REQUEST_METHOD'] . ' request.' . PHP_EOL;
42 | 
43 | if ($_SERVER['REQUEST_METHOD'] == 'POST') {
44 |     echo 'Your name is ' . htmlentities($_POST['name']);
45 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 3 | <script type="text/javascript" src="cors.js"></script>
 4 | <script type="text/javascript">
 5 | 
 6 | function testGet()
 7 | {
 8 |     getCORS('http://ucommbieber.unl.edu/CORS/cors.php', null, function(data){alert(data);});
 9 | }
10 | function testPost(form)
11 | {
12 |     postCORS('http://ucommbieber.unl.edu/CORS/cors.php', {name: form.name.value}, function(data){alert(data);});
13 | }
14 | </script>
15 | <body>
16 | <h1>CORS Examples</h1>
17 | 
18 | <p>Test GET
19 |     This page retrieves content from another server, using CORS<br /> 
20 |     <a href="#" onclick="testGet(); return false;">Get content from another server</a>
21 | </p>
22 | 
23 | <p>Test POST:
24 |     <form action="#" onsubmit="testPost(this); return false">
25 |         Name: <input type="text" name="name" />
26 |         <input type="submit" />
27 |     </form>
28 | </p>
29 | <a href="http://saltybeagle.com/2009/09/cross-origin-resource-sharing-demo/">More info</a>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------