Sending Javascript (client side) data to a Server Program

.......e.g. sending data about a Facebook user from client to your app's server program

If you want to send javascript data (variable values) to a Servr Program (like JSP or Servlet or any server program) --

you have to understand that JavaScript is client side technology so even if inside a JSP the JSP does not have access to its
variables --because the JSP has already given its output by the time it reaches the client where the JavaScrip then executes.

WHAT DO YOU DO?  You need to send the data via a HTTP request to the Server Program with parameters in the request (name/value)
pairs set to the data you are trying to send.

EXAMPLE SCENARIO:   you have a Facebook Tweets app and you want to
have user login to Facebook and use the userID to look up
on your DataBase (data store/ data storage) on your server side their tweets.

SOLTUIONS:

=======================

1) Option 1 through a link.

SCENARIO:  suppose you have a link called "Get Tweets" and you  want to pass the javascript variable "userID" to 
that URL.

NOTE: your server code should expect the parameter (userid, ****) where *** is the value and get it from the
HTTP Request object your server code has access to.  When user clicks on link it will go to the Server program and
pass the facebook userid and return the list of Tweets to the client.

Have somewhere in your JSP file the Link "Get Tweets"

<a href="#" id="tweet_link" onclick="return TweetURL();">Get Tweets </a>

  <script type="text/javascript">
  //code to get userid like say call to Facebook to get current userid if inside a facebook app
  // THIS IS YOUR facebook code ending in storing userid in userid_var javascript variable

    //code to build URL

           
      function tweetURL(startURL)
                     {
                       document.getElementById("tweet_link").href="http://myserverurl/TweetServerProgram?userid=" + userid_var ;

                       return false;
                     }
   </script>

2) Option 2 (if you know how) use Javascript AJAX
(see http://algebra.sci.csueastbay.edu/~grewe/CS6320/Mat/AJAX/index.htm)

  SCENARIO: inside Javascript after you have gotten your userid make call to serverprogram via AJAX and pass as a parameter --

  NOTE: in this scenario the USER DOES NOT HAVE OT CLICK ON ANYTHING

• invoke via AJAX an XMLHttpRequest  with URL = "http://myServerUrl//TweetServerProgram?userid=" + userid_var 

• and get back results (in callback function) and use to say populate a DOM HTML element to show your tweets  (you mide have a <div id="Tweets"> tag in your HTML you can populate. Some cases you may not even want any returned data (think about an AJAX request to save a new Tweet) but, rather want the remote server-side program to run successfully and just know that the status was success.

  Special NOTE: if you are using JQuery --javascript framework...here is example of doing it with the $.axjax() method see http://api.jquery.com/jquery.ajax/ // Send the user data to the server $.ajax({ method: 'post', url: 'http://myserverURL/serverprogram.jsp', data: data, dataType: 'json', success: function(data, status) { console.log('Sent User data!'); }, error: function(error) { console.log('Error in sending ajax data'); } });

   

3) Like option #1 you alter something in HTML and the user is clicking on something.
Here the something is a submit button of a form and the javascript variable values are stored in hidden tags of form.

SCENARIO: the user clicks on the button "Start App Now" 

NOTE: your server code should expect the parameter (userid, ****) where *** is the value and get it from the
HTTP Request object your server code has access to.  When user clicks on link it will go to the Server program and
pass the facebook userid and return the list of Tweets to the client.

HTML 

      
<from action="http://myserverurl/ServerProgram" method="POST">

     <input type="hidden" id="userid" value="****"/>
    <input type="Submit" value="Start App Now">
</form

Javascript (in same page as HTML)

<script>
  // THIS IS YOUR facebook code ending in storing userid in userid_var javascript variable  

  //now modify the hidden tag with user id you got above  
  document.getElementById("userid").value=userid_var;

</script>