FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Javascript Hypertext Transreceiver and Processor (JS HTP)

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Gael_Knightley
I was thinking over a way to send variables from one page to another using javascript, but without the use of cookies; like in server side scripts with the variables embedded in the URL by using the GET method. The advantages of such a program are obvious:


  1. Users can bookmark pages with the javascript variables they desire, e.g. bookmark words in a online dictionary for quick reference.

  2. It does not require creation of cookies and hence saves cookie space, as each domain can set upto a maximum of 20 cookies.


Then, I thought of the link fragment indentifier as a potential implementation of this idea. This is because:


  1. It loads the HTML page as it normally would, even though it may not find an anchor with the fragment identifier name or an element with that id. So the browser happily ignores the fragment identifier.

  2. A web page can reference another page in any domain. This overcomes the problem of cookies, which can only be accessed in a particular domain. So you can send variables to any web page on the internet.


The only disadvantage of such an implementation is that the original purpose of the fragment identifier is defeated. However, in respect to its new usage, this disadvantage is negligible.

So I started working on this project, and in less than 5 minutes I created a prosaic but working script of this idea. I decided to call it "Hypertext Transreceiver and Processor" or "HTP", since is sounds similar to "HTTP". However, the "processor" part of it is not quite true; so I am looking for a more accurate full form for the acronym "HTP" (which I do not want to change). I am also looking for ideas to streamline my script. Feel free to post them here. This is my script till now:

Code:
         var HTP=
         {
            action:"",
            setVariables:[],
            setVariable:function(name,value)
            {
               if(typeof name!="string"||typeof value!="string")return false;
               var invalidSequences=new Array("#","=","&&");
               for(var i=0;i<invalidSequences.length;i++)if(name.indexOf(invalidSequences[i])>=0||value.indexOf(invalidSequences[i])>=0)return false;
               this.setVariables.push(name+"="+value);
               return true;
            },
            submit:function()
            {
               if(this.setVariables.length==0)return false;
               window.location.href=this.action+"#"+this.setVariables.join("&&");
               if(this.action=="")window.location.reload(true);
               return true;
            },
            getVariables:[],
            getVariable:function(name)
            {
               if(typeof name!="string")return false;
               name=name+"=";
               for(var i=0;i<this.getVariables.length;i++)
               {
                  var variable=this.getVariables[i];
                  if(variable.indexOf(name)==0)return variable.substring(name.length,variable.length);
               }
               return null;
            },
            initialize:function()
            {
               if(window.location.href.toString().indexOf("#")>0)
               {
                  var variables=window.location.href.toString().split("#")[1].split("&&");
                  for(var i=0;i<variables.length;i++)this.getVariables.push(variables[i]);
               }
            }
         }
Marcuzzo
I go this a while ago:

Code:
function ArgumentURL() {
   this.getArgument = _getArg;
   this.setArgument = _setArg;
   this.removeArgument = _removeArg;
   this.toString    = _toString;   
   this.arguments   = new Array();
   var separator = "&";
   var equalsign = "=";
   var str = window.location.search.replace(/%20/g, " ");
   var index = str.indexOf("?");
   var sInfo;
   var infoArray = new Array();
   var tmp;
   
   if (index != -1) {
      sInfo = str.substring(index+1,str.length);
      infoArray = sInfo.split(separator);
   }

   for (var i=0; i<infoArray.length; i++) {
      tmp = infoArray[i].split(equalsign);
      if (tmp[0] != "") {
         var t = tmp[0];
         this.arguments[tmp[0]] = new Object();
         this.arguments[tmp[0]].value = tmp[1];
         this.arguments[tmp[0]].name = tmp[0];
      }
   }

   function _toString() {
      var s = "";
      var once = true;
      for (i in this.arguments) {
         if (once) {
            s += "?";
            once = false;
         }
         s += this.arguments[i].name;
         s += equalsign;
         s += this.arguments[i].value;
         s += separator;
      }
      return s.replace(/ /g, "%20");
   }
   
   function _getArg(name) {
      if (typeof(this.arguments[name].name) != "string")
         return null;
      else
         return this.arguments[name].value;
   }
   
   function _setArg(name,value) {
      this.arguments[name] = new Object()
      this.arguments[name].name = name;
      this.arguments[name].value = value;
   }
   
   function _removeArg(name) {
      this.arguments[name] = null;
   }
   
   return this;
}
Gael_Knightley
I really must thank Marcuzzo for introducing me to the location.search property. After learning all I could about it on the web, I came up with a new script with the "processor" part built into it (well it's just an empty method which you can customize to suit your purposes). Here it is:

Code:
var HTP=
{
   variables:[],
   setVariable:function(name,value)
   {
      if(name==null)return false;
      this.variables.push(name+"="+value);
      return true;
   },
   names:[],
   values:[],
   getVariable:function(name)
   {
      if(name==null)return false;
      var index=this.names.indexOf(name);
      if(index>=0)return this.values[index];
      return null;
   },
   url:null,
   submit:function()
   {
      if(this.variables.length==0)return false;
      (this.url)?location.href=this.url+"?"+this.variables.join("&"):location.search="?"+this.variables.join("&");
      return true;
   },
   process:null,
   initialize:function()
   {
      if(location.search=="")this.process(false);
      else
      {
         var variables=location.search.substring(1,location.search.length).split("&");
         for(var i=0;i<variables.length;i++)
         {
            var fields=variables[i].split("=");
            this.names.push(unescape(fields[0]).split("&").join(" "));
            this.values.push(unescape(fields[1]).split("&").join(" "));
         }
         this.process(true);
      }
   }
}


There is very little to explain here.


  1. The setVariable method takes two arguments: name and value. If the name is not supplied, it returns false. Else it saves the name and value string in an array and returns true.

    Note: There is no method to remove a variable after it is set, so only set variables which your are sure you will not remove.

  2. The getVariable method takes one argument: name. If it is not supplied, it returns false. Else it tries to find the corresponding value of the given name. On does so it returns the value; else it returns null.

    Note: For this method to work correctly there must be a search string embedded in the URL.

  3. The submit method takes no arguments. It returns false if there are no variables set. Else it returns true and modifies the location.search property to match the set variables and the page reloads.

    Note: You can modify the HTPs url property to send the variables to a page other than the current page. PHP, ASP and other server side scripts can process the variables you sent.

  4. The initialize function checks if any variables are sent over to the current page. If they are, it saves them in an array to be retrieved at any time, and sets off HTPs process method with a boolean argument true (meaning variables have been sent over to be processed). Else it sets off the process method with a boolean argument false.

    Note: You must manually call the initialize function somewhere in your script. Preferably when the body or the document load.

  5. The process method is empty (it's initially a property containing null). However you can assign it a function. It is automatically called by the initialize method and must accept one argument: parameters. If parameters is true, it means that there are sent variables to be processed.

    Note: Since process is a method of the HTP object, you must refer to the other methods and the url property with the prefix "this."; the same methods and properties can be called from outside the script with the "HTP." prefix.


I am still accepting ideas for the full form of HTP, and also looking forward to using better scripts for the same. Please feel free to post them here.
Related topics

How to design a theme?
[request][html+js]please find the error in this code
conflicting codes (CSS, JS & HTML)
including javascript in php file
SnowScript
Jaki portal php polecacie?
australia day
php page-refresh/redirect/boot help needed please
How do I add a Hotmail login to my site? 20 FRIH$
hide your code
[man]Incluir Java en un Block
comment cacher le code source d'une page html
Javascript - order of loading
more then just the one hosting plan
Ajax login
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.