how do I pass a variable collected thorough xmlhttp.open to PHP code of origin

Question

I am getting a screen resolution through XMLHttpRequest. I am opening a show_content.php file with screen resolution variables which I pull with the GET Method. This works!

 xmlhttp.open("GET","show_content.php"+queryString,true); 

and showing this file with the variables in a following div

<div id="txtResolution"></div>

This part works as well!

PROBLEM: This div contains screen resolution variables that I would like to use throught the rest of the code outside of it but I can not pass them. How can I get those variables to be passed to the original code.

I used the GET method but can not pass the variables to the original code outside the show_content.php I have tried with GLOBALS and Sessions as well but no luck

Here ist the code. Everything works properly but I can not pass the variables from the "txtResolution" div to the rest of the code

function showResolution(field_id)
{
var xmlhttp;
if (field_id.length==0)
{ 
 document.getElementById("txtResolution").innerHTML="";
 return;
 }
    if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myvalue").innerHTML=xmlhttp.responseText;
var myphpvar = document.getElementById('myvalue').innerText;
}
}

var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
    }
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
  var queryString = "?width=" + winW + "&height=" + winH;



 xmlhttp.open("GET","show_content.php"+queryString,true);
xmlhttp.send();
}    

Answer 1

I assume show_content.php contains some HTML markup and some php var you want to use in your JavaScript code. You may just put php var content somewhere in hidden div inside markup returned by show_content.php:

show_content.php:

<?
$myvar = $_REQUEST['width'] +  $_REQUEST['height'];
// send myvar to response:
print '<div style="display:none" id="myvalue">'.htmlspecialchars($myvar).'</div>';
?>

Then put following code to your javascript, just after ...innerHtml = xmlhttp.responseText; (see comment)

function showResolution(field_id)
{
  var xmlhttp;
  if (field_id.length == 0)
  {
    document.getElementById("txtResolution").innerHTML = "";
    return;
  }
  if (window.XMLHttpRequest)
  { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else
  { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function ()
  {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
      document.getElementById("txtResolution").innerHTML = xmlhttp.responseText;
      // Extract myvar value from php
      var myphpvar = document.getElementById('myvalue').innerText;
      alert('Var from php:'+myphpvar);
    }
  }

  var winW = 630, winH = 460;
  if (document.body && document.body.offsetWidth)
  {
    winW = document.body.offsetWidth;
    winH = document.body.offsetHeight;
  }

  if (document.compatMode == 'CSS1Compat' &&
      document.documentElement &&
      document.documentElement.offsetWidth)
  {
    winW = document.documentElement.offsetWidth;
    winH = document.documentElement.offsetHeight;
  }

  if (window.innerWidth && window.innerHeight)
  {
    winW = window.innerWidth;
    winH = window.innerHeight;
  }

  var queryString = "?width=" + winW + "&height=" + winH;

  xmlhttp.open("GET", "show_content.php" + queryString, true);
  xmlhttp.send();
}

For sure, much better to use some kind of JSON with data in response and do not mix html and data in AJAX.