Why is this Ajax taking so long to render?

Question

I have a page that has primarily dynamic content generated by Ajax. It is randomized every 30 seconds, and new content from the database appears. The PHP seems fine, but there either seems to be something wrong with my Javascript code or there is a problem on the database causing it to lag (the Ajax takes about 30 seconds to load!)

It would seem as if the recursive call to setInterval in my Javascript is waiting the alloted milliseconds before executing the function, but I can't find any errors in my Javascript.

Also, there are two image url Strings retrieved from the database, and it seems plausible that Ajax would lag when it has to retrieve information from external sources.

Or maybe is there a lag in my usage of the PHP-MySQL syntax ORDER BY rand()?

Here is the relevant html:

Here is the relevant Javascript:

    // global static variables
        var subCategory; // initialized from setCategoryTree
        var t; // for setInterval and clearInterval

        var seconds;
        var millisecondsPerSecond;
        var milliseconds;

    function setIntervalOnload()
    {
        getRandomProducts();
        if(typeof t != "undefined")
            clearInterval(t);

        seconds = 30;
        millisecondsPerSecond = 1000;
        milliseconds = seconds * millisecondsPerSecond;

        t = setInterval(getRandomProducts, milliseconds);
    }

    function getRandomProducts()
    {
        //window.alert(subCategory);
        if(typeof subCategory == "undefined")
            subCategory = "all";
        else
        {
            clearInterval(t);
            t = setInterval(getRandomProducts, milliseconds);
        }

        var req = new XMLHttpRequest();

        var products = document.getElementById("products");

        req.onreadystatechange = function()
        {
            if( (req.readyState == 4) && (req.status == 200) )
            {
                var result = req.responseText;
                products.innerHTML = result;
            }
        };
        req.open("GET", "randomProducts.php?category=" + subCategory, true);
        req.send(null);
    }
    function setCategoryTree(link)
    {
        var categoryTree = document.getElementById("categoryTree");

        /* climbing the DOM-tree to get the category name (innerHTML of highest "a" tag) */
        var category = link.parentNode.parentNode.parentNode.getElementsByTagName("a")[0].innerHTML;

        subCategory = link.innerHTML;

        categoryTree.innerHTML = "==> " + category + "  ==> " + subCategory;

        getRandomProducts();
    }

...and here is the relevant PHP:

Error - Could not connect to MySQL";
             exit;
        }

    // select the blah database
    $blah = mysql_select_db("blah");
        if(!$blah)
        {
            echo "Error  - Could not select the blah database.";
            exit;
        }

    // fix html characters in $subCategory
    $subCategory = $_GET["category"];
    trim($subCategory);
    $subCategory = stripslashes($subCategory);
    $subCategoryFixed = htmlspecialchars($subCategory);

    // for loop for each random product (total of 10 random products)
    for($i = 0; $i < 10; $i++)
    {
        // query the blah database for all products
        if($subCategoryFixed == "all")
        {
            $query = "SELECT * FROM products ORDER BY rand();";
            $result = mysql_query($query);
        }
        else // query the blah database for products in selected subCategory
        {
            $query = "SELECT * FROM products WHERE cat = " . $subCategoryFixed . " ORDER BY rand();";
            $result = mysql_query($query);
        }
            if (!$result)
            {
                echo "Error - the query could not be executed

";
                $error = mysql_error();
                echo "" . $error . "";
                exit;
            }

        $row = mysql_fetch_array($result);
        $productValues = array_values($row);

        $name = htmlspecialchars($productValues[3]);
        $price = htmlspecialchars($productValues[5]);
        $img = htmlspecialchars($productValues[7]);

        // product info is formatted for home.html here
        $str = '
                    
                        
                            
                                ' . $name .'
                            
                            
                                
                            
                            
                                ' . $price . '
                            
                        
                    
                ';
        echo $str;
    } // end of products for loop
?>

mellamokb · Accepted Answer

You are not running your code inside of onload method. It is possible that the AJAX setup code runs faster than the page can load so var products = ... is null. You need to do something like the following:

or

 window.onload = setIntervalOnload;

Why is this Ajax taking so long to render?

Answers (2)

Related Questions