How to load data from db with ajax? I am new to ajax so my question might be a basic one, but I have not found an answer anywhere so I ask here.
I am building eshop website on D7 with Commerce. On page where products are displayed I have 2 custom php scripts included - one that echoes menu(filter) and one that echoes products. The menu is implemented as a filter, users can select multiple checkboxes to display multiple categories of products. These categories are passed in URL, for example /eshop?filter=category1+category2. There are about 20 products in each category, but because user can select a lot of categories, there can be quite a lot of products to fetch from db and the page load is slow. So I would like to ajaxify this process so the behavior is like this: display whole page, including menu. Display loading gif for each category while it is fetched from the database. When data are ready, display the category(replace loading gif) and continue with the next category, until all categories are displayed.
function loadCategory(filter){

if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status==200) {
            document.getElementById(filter).innerHTML = xmlhttp.responseText;
           
        }
    }
    xmlhttp.open(&quot;GET&quot;,&quot;my_php_file.php?filter=&quot;+filter,true);
    xmlhttp.send(null);
}

I am calling the above function(taken from w3schools) on jQuery(document).ready() event multiple times for each category(filter) and it works fine. The problem is that in my_php_file.php I need to have access to drupal functions - not only db_query(), but also some commerce functions since I am building custom add to cart forms. I have tried bootstraping drupal as hinted here, but it does not work as drupal shows site telling me that drupal is already installed.
How do I achieve this? Or am I taking wrong approach? Thanks a lot.
I suppose your list is implemented with views (if not you can easily do this), to load a view via Ajax use the following code; I supposed your view's name is VIEW_NAME and it's display machine name is block_0 and there is a contextual filter to get filter

$.ajax({
    url: Drupal.settings.basePath + 'views/ajax',
    type: 'POST',
    dataType: 'json',
    data: 'view_name=VIEW_NAME&amp;view_display_id=block_0&amp;view_args='+filter,
    success: function(response) {
        var output = response[1].data;
        $("#filter").html(output);
    },
   error: function(data) {
        alert('An error occured!');
    }
});


The Ajax call in Drupal framework is different to the one you usually see on non-Drupal websites.