Explain about making "JSON" ajax request with our provided PHP service

Making PHP service for FileExplorer

In this section, we will see about creating PHP service for FileExplorer using XAMPP application and configuring and making JSON based AJAX request from client side to the created FileExplorer PHP service.

First create a FileExplorer service using XAMPP.

Usually, the XAMPP gets installed in “C:\\” drive. Now, create a new service folder namely FileExplorerPHP within `C:\\xampp\\htdocs` and place all the below mentioned folders within it.  

1)"FileBrowser" folder and its content, which is exposed by FileExplorer. (It may contain any file or sub folder)

2)Copy the file operation handling files from following installed location of your system

• C:\Program Files (x86)\Syncfusion\Essential Studio\{15.1.0.37}\PHP\Src\Services\FileExplorer

and paste it to the XAMPP server location as shown below

• C:\\xampp\\htdocs\\FileExplorerPHP

The above created sample is now ready to run. Therefore, open the XAMPP control panel and start the Apache module as shown in the below image.

Configure AJAX settings in client side to make request to the PHP service of FileExplorer

In client side, now you need to configure the AJAX request for loading and exposing the necessary folder content from filesystem of the PHP server.

By default, internally we have make AJAX request in FileExplorer with “application/json” as content type. But it causes problem in receiving AJAX request parameters in PHP service, so we need to modify the AJAX content type in sample level.

In below code block, you should note the “beforeRequest” method. In this method, we will modify “contentType” for the “ajaxSettings” property as “application/x-www-form-urlencoded”. That helps to make the “JSON” based AJAX request to the PHP service along with standard content type and get the proper response from that.

<script type="text/javascript">
    $(function () {
        $("#fileExplorer").ejFileExplorer({
            isResponsive: true,
            layout: "tile",
            //path of directory that is need to be exposed by FileExplorer
            path: "http://localhost:7777/FileExplorerPHP/FileBrowser",
            //path to PHP file action handling method, that is available in PHP service
            ajaxAction: "http://localhost:7777/FileExplorerPHP/",
            beforeAjaxRequest: "beforeRequest"
        });
    });
 
    function beforeRequest(arguments) {
        arguments.ajaxSettings.contentType = "application/x-www-form-urlencoded";
    }
</script>

Now, the sample can be run directly on the browser through localhost with appropriate port numbers, on which the Apache server is currently listening. For example, say if the Apache is configured to listen on port 7777, then make request to service as shown in above code block.