Basic working implementation

jlertle · Jun 3, 2011 · 574057c · 574057c
commit 574057c
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+Copyright (c) 2011 Alexey Komissarouk, Eric Allen
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README b/README
@@ -0,0 +1,2 @@
+This is a simple bridge for making cross-domain AJAX requests to a specific
+remote host, probably your API hosted on a different domain from your main app.
diff --git a/bridge.js b/bridge.js
@@ -0,0 +1,35 @@
+Bridge = {
+  dispatchTable : {},
+  nextCallbackId : 0,
+  init : function(url, origin) {
+    //sample origin: https://api.example.com
+    Bridge.origin = origin;
+    Bridge.iframe = document.createElement('iframe');
+    Bridge.iframe.setAttribute('src', url);
+    document.body.appendChild(Bridge.iframe);
+  },
+  ajax : function(args) {
+    // add args to callback table
+    var callbackId = Bridge.nextCallbackId++;
+    Bridge.dispatchTable[callbackId] = {
+      success: args.success,
+      error: args.error
+    }
+    var message = {
+      args:       args,
+      callbackId: callbackId
+    };
+
+    Bridge.iframe.contentWindow.postMessage(
+      JSON.stringify(message), Bridge.origin);
+  },
+  receive : function(event) {
+    message = JSON.parse(event.data)
+    func_to_call = 
+      Bridge.dispatchTable[message.callbackId][message.successOrFail];
+    // TODO: error check here
+    func_to_call(message.response);
+  }
+}
+
+window.addEventListener('message', Bridge.receive, false);
diff --git a/iframe.html b/iframe.html
@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
+    </script>
+    <script>
+      var receiveMessage = function (event) {
+        // todo here: security for event.src coming from a reasonable place
+        console.log(event.data);
+        message = JSON.parse(event.data);
+        ajaxResponse = function(successOrFail) {
+          return function(response) {
+            event.source.postMessage(JSON.stringify({
+              callbackId:    message.callbackId,
+              successOrFail: successOrFail,
+              response:      response
+            }), event.origin);
+          }
+        }
+        message.args.success = ajaxResponse("success");
+        message.args.error = ajaxResponse("error");
+
+        $.ajax(message.args);
+      };
+
+      window.addEventListener("message", receiveMessage, false);
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/test.html b/test.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css"
+    media="screen" />
+    <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
+    <!--//TODO: make sure the other side of this is running--> 
+    <script src="bridge.js"></script>
+    <script>
+      $(document).ready(function(){
+        Bridge.init("http://localhost:1337/iframe.html",
+                    "http://localhost:1337");
+        test("success callback works", function() {
+          stop(500);
+          Bridge.ajax({
+            url: "/double",
+            data: "value=2",
+            type: "POST",
+            success: function(response) {
+              equals(response, "4", "got the doubled response");
+              start();
+            }
+          });
+        });
+        test("error callback works", function() {
+          stop(500);
+          Bridge.ajax({
+            url: "/triple",
+            data: "value=2",
+            type: "POST",
+            success: function(response) {
+              ok(false, "url doesn't exist, how is this successful?");
+              start();
+            },
+            error: function(response) {
+              ok(true, "sweet, we failed");
+              start();
+            }
+          });
+        });
+
+      });
+    </script>
+
+  </head>
+  <body>
+    <h1 id="qunit-header">QUnit example</h1>
+    <h2 id="qunit-banner"></h2>
+    <div id="qunit-testrunner-toolbar"></div>
+    <h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+    <div id="qunit-fixture">test markup, will be hidden</div>
+  </body>
+</html>
diff --git a/testserver.js b/testserver.js
@@ -0,0 +1,27 @@
+var fs = require('fs');
+var http = require('http');
+var url = require('url');
+
+http.createServer(function (req, res) {
+  if (req.url === "/double") {
+    req.addListener("data", function(data) {
+      // format of post expected: value=k
+      value = parseInt(data.toString().split("=")[1]);
+      res.writeHead(200);
+      res.end("" + (value * 2));
+    });
+  } else {
+    fs.readFile(req.url.substring(1), function(error, content) {
+      if (error) {
+        res.writeHead(404);
+        res.end("404 file not found");
+      } else {
+        res.writeHead(200);
+        res.end(content);
+      }
+    });
+  }
+}).listen(1337, "127.0.0.1", function() {
+  //runs when our server is created
+  console.log('Server running at http://127.0.0.1:1337/');
+});