www.webdeveloper.com
Results 1 to 12 of 12

Thread: Serving javascript files from a web server

  1. #1
    Join Date
    Jun 2014
    Posts
    10

    Serving javascript files from a web server

    Hi,
    I am a C++ developer and new to web programming and am using node.js

    I need to do this - The browser should make a request to the server and the server will return javascript files, which will then be run by the browser. The javascript files will be generated on the fly and sent to the client.


    Browser does the following javascript calls:
    foo-jscode.zip = Getengine(params) // Calls the server to get JS files

    Unzip foo-jscode.zip and load the javascript code.


    Server does the following :
    Function Getengine()
    {
    Return a zip of javascript files.

    }

    Could you please tell me how best to make the remote procedure call GetEngine?

    1. Would you do HTTP get request to get the zip files
    2. Or is it better to do something like JSON-RPC

    Which of the above is preferable? Any comparision would give me some insight.

    Thanks

  2. #2
    Join Date
    Mar 2009
    Posts
    521
    For the most part its up to the browser as to whether it will accept gzipped files. If it does, it sends that info as part of the original GET request, and it is the browser that decompresses the file. If the browser doesn't send an "accept decoding: gzip" along the GET request, the server shouldn't send compressed content.

    All you need to do is to call the javascript file with a script tag, whether added dynamically or not, and have the file stuctured something like this:

    Code:
    function getEngine()
    {
    //your code you want to run 
    
    }
    
    getEngine();

  3. #3
    Join Date
    Jun 2014
    Posts
    10
    Hello, Thank you. Sorry I realized, in simplifying my problem I left out one requirement. The js file generated depends on the params to getengine call.

    Function Getengine ( params )
    {
    Depending on params generate js files file1.js, file2.js etc.

    return all js files
    }

    Do you have any suggestions
    thanks

  4. #4
    Join Date
    Mar 2009
    Posts
    521
    The js file generated depends on the params to getengine call.
    Include the parameters in the src attribute of the script. The src of a javascript script tag doesn't have to be a static js file at all. Lets say you wish to send the parameters "car=GM" and "color=yellow". You would have something like:

    Code:
    <script src="http://somewhere.com/zzz.php?car=GM&color=yellow"></script>
    And of course, you can create the script tag dynamically so you can plug the user selected choices into the "src" of the tag.

  5. #5
    Join Date
    Jun 2014
    Posts
    10
    Didnt realize. That might work. Thanks.

  6. #6
    Join Date
    Jun 2014
    Posts
    10
    Hi.
    Thanks Tcobb, the suggestion does work. However, we would prefer to do this without touching any html files.

    We give an api.js to the client. They will simply make calls into the api.js. They will not like to touch their html files.

    In api.js :
    GetEngine(params)
    {
    this returns one big JS file engine.js
    }


    The client can then make calls into engine.js. Does this sound like a reasonable thing to do? If so, how can we do this?
    Thanks

  7. #7
    Join Date
    Mar 2009
    Posts
    521
    The client can then make calls into engine.js. Does this sound like a reasonable thing to do? If so, how can we do this?
    Will this need to be done multiple times in the same user session? This will make a difference in efficiency as to the solution.

  8. #8
    Join Date
    Jun 2014
    Posts
    10
    This is done once at the start. Thank you.

  9. #9
    Join Date
    Mar 2009
    Posts
    521
    One more thing: How are these parameters set within the HTML, and how are they gathered? Or is this supposed to be started by a general script like:

    Code:
    <script>
    getEngine('cars', 'forSale', 'Houston','Texas');
    </script>

  10. #10
    Join Date
    Jun 2014
    Posts
    10
    Hello,
    Thank you. I have been reading a bit and it does look fairly complicated. I wish to do this :

    1. There is a login screen where the user details are provided along with sessionParams. These are stored in window.userid, window.sessionParams
    2. < script>
    getEngine(userId, sessionParams)
    < /script>

    Depending on the userId and the sessionParams an engine.JS will be sent to the client side. I hope this clarifies. If you find this really odd please let me know and I will explain.

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,500
    Look at AJAX and PHP sessions or Apache login and PHP.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  12. #12
    Join Date
    Mar 2009
    Posts
    521
    This should get you some ideas, although \\.\'s suggestion might be the better way to go. This is crappy code. I don't suggest using it as a model, but it does have the virtue of actually working.

    HTML and Javascript:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function setUp(){  //this checks to see if the new script is loaded--starts it if it is
      if(window.doStart){
        doStart();
      }
      else{
        setTimeout(setUp, 1000);
      }
     }
    
    window.onload = function(){
       var x = document.getElementById('ff');
       var q = document.getElementById('sub');
       q.onclick = function(){  //send info to server
           var i, len, all, scr, inp, url = 'demo.php?';
           inp = x.getElementsByTagName('input');
           len = inp.length;
           all = [];
           for(i = 0; i < len; i++){
               if(inp[i].value !== ''){
               all.push((inp[i].name + '=' + inp[i].value));
               }
           }
           all = all.join('&');
           url += all;
           scr = document.createElement('script');
           scr.src = url;
           document.head.appendChild(scr);
           setUp(); //set script to look for when dynamic script is loaded
       }
    }
    
    </script>
    
    </head>
    <body>
    <p>Enter the data. Leave it blank if you don't care about the particular item.</p>
    <form id="ff">
    CALENDER FOR MONTH <input name ="calender" type="text"><br>
    CACULATOR FOR (ENTER DECIMAL OR OCTAL OR HEX--actually anything) <input type="text"
    name = "calculator"><br>
    YOUR NAME: <input type="text" name="greeting"><br>
    <input type="button" id="sub" name ="null" value="GO">
    </form>
    
    </body>
    </html>
    and here's PHP which serves up the javascript. Its name should be 'demo.php' to work with the page above.

    Code:
    <?php
    $str = "function doStart(){\n";
    $keys = array_keys($_GET);
    foreach ($keys as $k){
        switch ($k){
        case 'calender':
        $str .= "(function(month){
    	var h, b, z;
    	h =  document.createElement('hr');
    	z = document.createElement('p');
    	z.innerHTML = \"Create code for a calender widget here for \" + month;
    	b = document.body;
    	b.insertBefore(h, b.firstChild);
    	b.insertBefore(z, h);
        })(\"$_GET[$k]\");\n";  //
        break;
        case 'calculator':
    	$str .= "(function(mode){
    	var h, b, z;
    	h =  document.createElement('hr');
    	z = document.createElement('p');
    	z.innerHTML = \"Create code for a calculater widget here in \" + mode;
    	b = document.body;
    	b.insertBefore(h, b.firstChild);
    	b.insertBefore(z, h);
        })(\"$_GET[$k]\");\n";
        break;
        case 'greeting':
    	$str .= "(function(name){
    	var h, b, z;
    	h =  document.createElement('hr');
    	z = document.createElement('p');
    	z.innerHTML = \"Hello \" + name;
    	b = document.body;
    	b.insertBefore(h, b.firstChild);
    	b.insertBefore(z, h);
        })(\"$_GET[$k]\");\n";
        break;
        default:
    	//unknown--don't do anything
        }
        
    }
    
    $str .="};";
    
    
    echo $str;
    ?>
    I hope its helpful.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles