Order of scripts and php variables for AJAX post on a page (loading order)-CodePudding

I have a question regarding the order of where to place a script and a variable. The reason is that I thought if you have a function and you call it after the page is loaded it will be "found" and executed.

I have a simple POST example, two php pages, the php variable is set before the script:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/digiblox/css/style.php" rel="stylesheet">

<script src="/digiblox/functions/jquery-3.6.0.js"></script>

<script>
<?php $startRow2send = rand(); ?>
function firstPage() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("ajaxCall").innerHTML = this.responseText;
    }
  xhttp.open("POST", "postRec.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("startRow2send="  <?php echo $startRow2send; ?>);
}
</script>

</head>

And the body of this page:

<body>
    <p>
    <div><button type="button" onclick="firstPage()">Test ajax call</button> </div>
    </p>
<div id="ajaxCall">
</div>

</body>


</html>

So this works, it calls a simple page and outputs "The value sent by POST method is :" and the value.

My question is, if I put the php variable set further down, say in the body of the page, then the script doesn't work.

If I put the script at the bottom of the page, it works.So like with php include it basically gets read in the order it appears in the code, understandable but surely the point of a function or script is to declare it and it gets called when the button is pushed.

Is there a way to keep the scripts, functions in the header sections and call them with loaded variables that are only loaded after the script is loaded.

And at the same time, shouldn't the button "refresh" the Ajax call each time?

CodePudding user response：

The page and its contents is rendered from top to bottom. So if you call variable X, you must declare it first, then call it => this should answer about the order. Now regarding Ajax and php. The php code is only rendered once, since this is how it is suppose to work. AJAX was invented so developers can call/access server side variables without reloading the entire page (which you are doing here). The problem is you are mixing AJAX and PHP: your php variable $startRow2send will only have one single value. I think you would want that also this PHP variable value changes with the AJAX call. For that, you should understand that the AJAX call only calls the JAVASCRIPT function. firstPage(). PHP variable remains constant until you reload the page. PHP/HTML only renders the page once and that's it. AJAX/JS can do more actions, since they are run from within the browser (locally). So, maybe you should change the php var into a javascript variable, and put it inside the function. Then with every call also your variable will change.

// you can use this function to generate a random number in Javascript
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min)   min;
}

// then in your original function you can add

function firstPage() {
  // generate a random between 100 and 999
  var myJSRandomNr = getRandomArbitrary(100, 999)

  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("ajaxCall").innerHTML = this.responseText;
    }
  xhttp.open("POST", "postRec.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("startRow2send="   myJSRandomNr );
}