Simple AJAX function to set SESSION variable

Question

I'm building a webpage in php, and want to change a $_SESSION variable from true to false on the click of a button.

I understand that php runs serverside, and as such I need to use AJAX to change that variable.

What I'd really like is a code to call an AJAX function (called methods in AJAX?) from a form button, the AJAX script then changes the SESSION variable. I'd really like to avoid page reload.

So, the form should look something like this:

<form action=ajaxMethod() method="get">
       <input type="submit" value="X" id="close">
</form>

And this is the php version of what I want the AJAX script to do:

function ajaxMethod() {
        $_SESSION["variable"] = false;
    }

However, I'm such a noob when it comes to JS, and especially AJAX, that I am unsure how to create that AJAX method.

As simple as possible... If simple is possible...

Any help?

Also: The page I'm building is propeitary and belongs to the company I'm working for, and as such I'm not at liberty to divulge the actual code, but the examples above feels like they describe what I'd like to accomplish. If needed, I'll explain further.

I'd love to avoid using JQuery, if at all possible.

Answer 1

Avoiding Jquery for your need/requirement is not possible since you don't want the page to reload, Ajax is best way for it (And Ajax is more simpler with JQuery).

I have used Ajax request in many of my php webApps to change _SESSION variables.

HTML:-

<!-- Include Jquery library #Important -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<form>
       <input type="button" value="X" id="close" onclick="changeSession();">
</form>

Script:- {JQuery and Javascript both}

 function changeSession(){
        $.post("session.php",{ name : "session", value : "false"},
                function(data, status){ 
                     if(status == "success") console.log("successfully changed session variable"); 
                     else console.log("some error occurred");});
                        }
//Javascript
function changeSession(){
var value="false";
var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function()
    {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
            alert(xmlHttp.responseText);
        }
    }
    xmlHttp.open("post", "session.php"); 
    xmlHttp.send(value);//Don't know how to send multiple data with this sorry, so sending only 1
}

PHP file :- {session.php in my case}

<?php
  if(isset($_POST['name'])){
      //I think we have received Ajax request
      if($_POST['value'] == "false") //Just to ensure the value to be changed should be false
      //Now let us change session variable
      $_SESSION['variable'] = "false";
}?>

Points to remember:-

1. You can make only 1 request to page at a time using Ajax.
2. The request can be either POST or GET at any time.
3. The variables you send from $.post() have to be properly handled at server side script {in my case session.php}.
4. You can also echo out text/html/json from php file as output of Ajax request.

Working Example here

Note:-

The code in working example may vary as I am trying to show how actually it works, however you can find the code in my Github, and for further queries comment below.

Edit:-

Added JavaScript code for Ajax request as you want to avoid JQuery. But didn't make a working example for it since I don't really prefer Ajax using JavaScript.