Added a xhr example.

Added support for relative paths to hash.html. Removed the version string when referencing hash.html. The developer should use different names to differentiate between versions.
HashGo · Aug 19, 2009 · 9e0e9d6 · 9e0e9d6
1 parent 17eb625
commit 9e0e9d6
Show file tree

Hide file tree

Showing 13 changed files with 214 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+artifacts/
 build/
 dist/
 docs/

diff --git a/documentation.bat → documentation.cmd b/documentation.bat → documentation.cmd
diff --git a/package.bat → package.cmd b/package.bat → package.cmd
diff --git a/src/easyXDM.Transport.js b/src/easyXDM.Transport.js
@@ -183,10 +183,7 @@ easyXDM.Transport = {
                 _callerWindow.contentWindow.postMessage(config.channel + " " + message, _targetOrigin);
             };
             _window_onMessageImplementation = _waitForReady;
-            if (config.local.substring(0, 1) == "/") {
-                config.local = location.protocol + "//" + location.host + config.local;
-            }
-            _callerWindow = easyXDM.DomHelper.createFrame(config.remote + "?endpoint=" + config.local + "&channel=" + config.channel, "", config.container);
+            _callerWindow = easyXDM.DomHelper.createFrame(config.remote + "?endpoint=" + easyXDM.Url.resolveUrl(config.local) + "&channel=" + config.channel, "", config.container);
         }
         else {
             this.postMessage = function(message){
@@ -220,15 +217,12 @@ easyXDM.Transport = {
         var _timer = null;
         var _lastMsg = "#" + config.channel, _msgNr = 0;
         var _listenerWindow = (!config.local) ? window : null, _callerWindow;
-        if (config.local && config.local.substring(0, 1) == "/") {
-            config.local = location.protocol + "//" + location.host + config.local;
-        }
         var _remoteUrl = config.remote;
         if (config.local) {
-            _remoteUrl += "?endpoint=" + config.local + "&channel=" + config.channel;
+            _remoteUrl += "?endpoint=" + easyXDM.Url.resolveUrl(config.local) + "&channel=" + config.channel;
         }
         else {
-            _remoteUrl += "?version=" + easyXDM.version + "#" + config.channel;
+            _remoteUrl += "#" + config.channel;
         }
         var _remoteOrigin = easyXDM.Url.getLocation(config.remote);
         var _pollInterval = (config.interval) ? config.interval : 300;

diff --git a/src/easyXDM.Url.js b/src/easyXDM.Url.js
@@ -42,13 +42,29 @@ easyXDM.Url = {
     /**
      * Returns  a string containing the schema, domain and if present the port
      * @param {String} url The url to extract the location from
-     * @returns The location part of the url
-     * @type {String}
+     * @return {String} The location part of the url
      */
     getLocation: function(url){
         var indexOf = url.indexOf("//");
         var loc = url.substring(indexOf + 2);
         loc = loc.substring(0, loc.indexOf("/"));
         return url.substring(0, indexOf + 2) + loc;
+    },
+	/**
+	 * Resolves a path to a complete url
+	 * @param {String} url The path to resolve
+	 * @return {String} The resolved url 
+	 */
+    resolveUrl: function(url){
+        // If the url is a valid url we do nothing
+        if (url.match(/^(http||https):\/\//)) {
+            return url;
+        }
+        // If the url is relative to the root  
+        if (url.substring(0, 1) == "/") {
+            return location.protocol + "//" + location.host + url;
+        }
+        // If the url is relative to the current directory
+        return location.href.substring(0, location.href.lastIndexOf("/") + 1) + url;
     }
 };
diff --git a/src/example/data.html b/src/example/data.html
@@ -17,7 +17,7 @@
                      * or a path relative to the root.
                      * @field
                      */
-                    local: "/hash.html",
+                    local: "../hash.html",
                     /**
                      * Register the url to the remote interface
                      * @field

diff --git a/src/example/glossary.json b/src/example/glossary.json
@@ -0,0 +1,22 @@
+{
+    "glossary": {
+        "title": "example glossary",
+		"GlossDiv": {
+            "title": "S",
+			"GlossList": {
+                "GlossEntry": {
+                    "ID": "SGML",
+					"SortAs": "SGML",
+					"GlossTerm": "Standard Generalized Markup Language",
+					"Acronym": "SGML",
+					"Abbrev": "ISO 8879:1986",
+					"GlossDef": {
+                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
+						"GlossSeeAlso": ["GML", "XML"]
+                    },
+					"GlossSee": "markup"
+                }
+            }
+        }
+    }
+}
diff --git a/src/example/index.html b/src/example/index.html
@@ -50,7 +50,7 @@
                      * or a path relative to the root.
                      * @field
                      */
-                    local: "/hash.html",
+                    local: "../hash.html",
                     /**
                      * Register the url to the remote interface
                      * @field

diff --git a/src/example/methods.html b/src/example/methods.html
@@ -22,7 +22,7 @@
                      * or a path relative to the root.
                      * @field
                      */
-                    local: "/hash.html",
+                    local: "../hash.html",
                     /**
                      * Register the url to the remote interface
                      * @field

diff --git a/src/example/transport.html b/src/example/transport.html
@@ -17,7 +17,7 @@
                      * or a path relative to the root.
                      * @field
                      */
-                    local: "/hash.html",
+                    local: "../hash.html",
                     /**
                      * Register the url to the remote interface
                      * @field

diff --git a/src/example/xhr.html b/src/example/xhr.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+    <head>
+        <title>easyXDM</title>
+        <script type="text/javascript" src="../easyXDM.debug.js">
+        </script>
+        <script type="text/javascript">
+            /**
+             * Request the use of the JSON object
+             */
+            easyXDM.DomHelper.requiresJSON("../json2.js");
+        </script>
+        <script type="text/javascript">
+            var remote;
+            window.onload = function(){
+                /**
+                 * When the window is finished loading start setting up the interface
+                 */
+                remote = new easyXDM.Interface(/** The channel configuration */{
+                    /**
+                     * Register the url to hash.html, this must be an absolute path
+                     * or a path relative to the root.
+                     * @field
+                     */
+                    local: "../hash.html",
+                    /**
+                     * Register the url to the remote interface
+                     * @field
+                     */
+                    remote: "http://provider.easyxdm.net/example/xhr_remote.html",
+                    /**
+                     * Register the DOMElement that the generated IFrame should be inserted into
+                     */
+                    container: document.getElementById("embedded")
+                }, /** The interface configuration */ {
+                    remote: {
+                        getGlossary: {},
+                        ajax: {}
+                    }
+                },/**The onReady handler*/ function(){
+
+
+                });
+            }
+            function getGlossary(){
+                remote.getGlossary(function(json){
+                    alert(json.glossary.title);
+                });
+            }
+
+            function getGlossaryUsingAjax(){
+                remote.ajax("glossary.json", {
+                    name: "sometitle"
+                }, function(json){
+                    alert(json.glossary.title);
+                });
+            }
+        </script>
+        <style type="text/css">
+            #embedded {
+                height: 200px;
+            } #embedded iframe {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            document.write("Domain: " + location.host);
+        </script>
+        <!-- easyXDM.Debug.trace(msg) will output its messages to any element with the id "log" -->
+        <div id="log" style="height:100px;border:1px dotted black;overflow:auto">
+        </div>
+        <div id="embedded">
+        </div>
+        <div>
+            <input type="button" onclick="getGlossary()" value="Call getGlossary using the exposed method"/>
+        <br/>
+		<input type="button" onclick="getGlossaryUsingAjax()" value="Call getGlossary using the exposed ajax wraper"/>
+
+		</div>
+    </body>
+</html>
diff --git a/src/example/xhr_remote.html b/src/example/xhr_remote.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+    <head>
+        <title>easyXDM</title>
+        <script type="text/javascript" src="../easyXDM.debug.js">
+        </script>
+        <script type="text/javascript">
+            /**
+             * Request the use of the JSON object
+             */
+            easyXDM.DomHelper.requiresJSON("../json2.js");
+        </script>
+        <script type="text/javascript" src="../jquery-1.3.2.min.js">
+        </script>
+        <script type="text/javascript">
+
+            var remote;
+            /**
+             * When the window is finished loading start setting up the channel
+             */
+            window.onload = function(){
+
+                /**
+                 * When the channel is ready we create the interface
+                 */
+                remote = new easyXDM.Interface(/** The channel configuration*/{}, /** The configuration */ {
+                    local: {
+                        getGlossary: {
+                            isAsync: true,
+                            method: function(fn){
+                                $.get('glossary.json', null, function(json){
+                                    fn(json);
+                                }, "json");
+                            }
+                        },
+						/**
+						 * This method will in effect give access to all json services on the domain
+						 * @param {String} url the url to the service
+						 * @param {Object} data Name/value pairs
+						 * @param {Function} callback The callback
+						 */
+                        ajax: {
+                            isAsync: true,
+                            method: function(url, data, callback){
+								$.get(url, data, function(json){
+                                    callback(json);
+                                }, "json");
+                            }
+                        }
+                    }
+                });
+            }
+        </script>
+    </head>
+    <body>
+        <script type="text/javascript">
+            document.write("Domain: " + location.host);
+        </script>
+        <!-- easyXDM.Debug.trace(msg) will output its messages to any element with the id "log" -->
+        <div id="log" style="height:100px;border:1px dotted black;overflow:auto">
+        </div>
+    </body>
+</html>
diff --git a/tools/jquery-1.3.2.min.js b/tools/jquery-1.3.2.min.js
-Original file line number
+Diff line change
@@ -1,3 +1,4 @@
+    artifacts/
     build/
     dist/
     docs/
@@ Expand Down @@