title: Pass string variable from Perl CGI script to HTML frontend
body: <p>I'm new to <strong>AJAX</strong> and I have some problems with passing variables back to the HTML script.</p>
  
  <p>I am using a <strong>XAMPP</strong> webserver, <strong>JavaScript</strong> and <strong>jQuery</strong> for the HTML script and a <strong>Perl cgi</strong> script as backend.</p>
  
  <p>I need to take an input string, pass it to the CGI script where it will be used in a Perl function. 
  The resulting string variable from the Perl cgi script needs to be passed back to the HTML frontend and be used for a function inside the <code>$(document).ready(function(){})</code>.</p>
  
  <p>As of now, I am able to pass a user defined input to the cgi script and display the result as a simple HTML text. But how can I use the cgi output as a variable for further JavaScript/jQuery functions?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>This is my HTML and JavaScript code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;AJAX example&lt;/title&gt;
  
      &lt;script type="text/javascript" src="_lib/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.jstree.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          $(document).ready(function() {
  
              /*
              I need to use the string variable "#searchtext" in this example function:
  
              $("#filter").click(function () {
                  $("#testtree").jstree("search",$("#searchtext").val());
              });
              */
  
          });
  
      &lt;/script&gt;
  
      &lt;script language="Javascript"&gt;
  
          function xmlhttpPost(strURL) {
              var xmlHttpReq = false;
              var self = this;
              // Mozilla/Safari
              if (window.XMLHttpRequest) {
                  self.xmlHttpReq = new XMLHttpRequest();
              }
              // IE
              else if (window.ActiveXObject) {
                  self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
              }
              self.xmlHttpReq.open('POST', strURL, true);
              self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
              self.xmlHttpReq.onreadystatechange = function() {
                  if (self.xmlHttpReq.readyState == 4) {
                      updatepage(self.xmlHttpReq.responseText);
                  }
              }
              self.xmlHttpReq.send(getquerystring());
          }
  
          function getquerystring() {
              var form     = document.forms['f1'];
              var word = form.word.value;
              qstr = 'w=' + escape(word);
              return qstr;
          }
  
          function updatepage(str){
              document.getElementById("result").innerHTML = str;
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;      
      &lt;form name="f1"&gt;
          &lt;p&gt;word: &lt;input name="word" type="text"&gt;  
          &lt;input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/ajax_test.cgi")'&gt;&lt;/p&gt;
          &lt;div id="result"&gt;&lt;/div&gt;
      &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my Perl script ajax_test.cgi:</p>
  
  <pre><code>#!/usr/bin/perl -w
  
  use strict;
  use warnings;
  use CGI;
  
  my $query = new CGI;
  
  my $word = $query-&gt;param('w');
  
  print $query-&gt;header;
  print "&lt;p&gt;You are searching for: &lt;b&gt;$word&lt;/b&gt;.&lt;/p&gt;";
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>I tried to use the first solution suggested by <em>collapsar</em> but I'm still not sure where to put the js vars because I need to be able to call them <em>inside</em> the <code>$(document).ready(function(){})</code>:</p>
  
  <pre><code>&lt;script language="Javascript"&gt;
  
  function xmlhttpPost(strURL) {
      //...//
  }
  
  function getquerystring() {
      //..//
  }
  
  function updatepage(str){
      //...//
  }
  
  var resp_html = self.xmlHttpReq.responseText;
  var resp_dom  = jQuery.parseHTML(resp_html );
  var mydata1 = $('#&lt;custom-id-1&gt;', resp_dom).text();
  
  // the alert doesn't work
  $("#alertbutton").click(function () {
  
      alert( "You entered: " + mydata1);
  
  });
  </code></pre>
  
  <p></p>