Calling php function inside Javascript code

Question

I know that this question has been asked before but all of them are using jQuery library and i would like to use Javascript only, no libraries so please bear with me.

This link shows the PHP function being called from jQuery.

How can I call PHP functions by JavaScript?

The code is calling a function that displays images.

I have the following code and I don't understand how to call the function from the mainfile.php and not functions.php.

mainfile.php

<button id="btn">Click</btn>   // button that calls ajax file
<div id="div"></div>   // div where it should appear

<script>
    function loadXML(method, url, div, index)
    {
        var xmlhttp;

        try
        {
            xmlhttp = new XMLHttpRequest();
        }
        catch(e)
        {
            try
            {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(e)
            {
                alert('sorry');
            }
        }

        xmlhttp.onreadystatechange = function()
        {
            if( xmlhttp.readyState === 4 && xmlhttp.status === 200 )
            {
                if( index === null || index === 'undefined' || xmlhttp === '')
                {
                    document.getElementById(div).innerHTML = xmlhttp.responseText;
                }
            }
        };

        xmlhttp.open(method, url, true);
        xmlhttp.send(null);
    }

    document.getElementById('btn').addEventListener('click', function()
    {
        loadXML('GET', 'imgs.php', 'div', null);
    }, false);
</script>

functions.php

<?php

    function getImgs($dir, $type)
    {
        $images = glob($dir . $type);

        print_r($images); // for now i'm printing the array the way it is to see the function work
    }
    getImgs('images/', '.*JPG');   // calling function from php file works

?>

I would like to call the function from inside mainfile.php without using any jQuery library, only plain Javascript, it should be possible considering that the libraries are made with Javascript. I don't know where to call the function from inside mainfile.php. Any help would be appreciated.

The reason I am getting files from php is because it is easier to load them into the DOM, I need to make an image gallery so I would like to know if it will be possible to manipulate the images when they are loaded into the DOM using AJAX.

Answer 1

You can only do it by Making an AJAX request to a php page while passing in a parameter to initialise the function.

That means your AJAX will send in for example "functionName" to the php page "functionsListPage.php"

The GET will be recieved :

 if (isset($_GET['functionName']))
    functionExec();

This is the only way so you are not calling direct from the client however you are indicating to the server you want to run a predefined request.

You cannot call a PHP function directly from the clientside.

Answer 2

It's just like the answer from @Pogrindis, but i think so explanation is needed

It is possible to do it with with plain JavaScript with a little workaround!

What you need to do is the following in JavaScript after the xmlhttp.open();

var functionname = getImgs;
xmlhttp.open();
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.send(functionname);

What this does is simple: it sends the data to the server, so you php file can get this parameter!

In your called php file you need something like this:

if( isset($_POST['functionname']) )
{
    if($_POST['functionname']) == 'getImgs'
    {
        getImgs();
    }
}

Of course you need to make sure that you post the data with post in this case, if you want to use get you need to change the php to $_GET

Notice: This is totally unsafe right now! No escaping from the coming data and anything else.