Question

I want to extract some data from the database without refreshing a page. What is the best possible way to do this?

I am using the following XMLHTTPRequest function to get some data (shopping cart items) from cart.php file. This file performs various functions based on the option value.
For example: option=1 means get all the shopping cart items. option=2 means delete all shopping cart items and return string "Your shopping cart is empty.". option=3, 4…and so on.

My XHR function:

    function getAllCartItems()
    {
        if(window.XMLHttpRequest)
        {
            allCartItems = new XMLHttpRequest();
        }
        else
        {
            allCartItems=new ActiveXObject("Microsoft.XMLHTTP");
        }

        allCartItems.onreadystatechange=function()
        {
            if (allCartItems.readyState==4 && allCartItems.status==200)
            {
                document.getElementById("cartmain").innerHTML=allCartItems.responseText;
            }
            else if(allCartItems.readyState < 4)
            {
                 //do nothing
            }
        }
        var linktoexecute = "cart.php?option=1";
        allCartItems.open("GET",linktoexecute,true);
        allCartItems.send();
    }

cart.php file looks like:

    $link = mysql_connect('localhost', 'user', '123456'); 
    if (!$link)
    {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('projectdatabase');
    if($option == 1) //get all cart items
    {
        $sql = "select itemid from cart where cartid=".$_COOKIE['cart'].";";
        $result = mysql_query($sql);
        $num = mysql_num_rows($result);
            while($row = mysql_fetch_array($result))
            {
                 echo $row['itemid'];
            }
    }
    else if($option == 2)
    {
            //do something
    }
    else if($option == 3)
    {
            //do something
    }
    else if($option == 4)
    {
            //do something
    }

My Questions:

1. Is there any other way I can get the data from database without
   refreshing the page?
2. Are there any potential threats (hacking, server utilization,
   performance etc) in my way of doing this thing? I believe a hacker
   can flood my server be sending unnecessary requests using option=1,
   2, 3 etc.

Answer 1

I don’t think a Denial of Service attack would be your main concern, here. That concern would be just as valid is cart.php were to return HTML. No, exposing a public API for use via AJAX is pretty common practice.

One thing to keep in mind, though, is the ambiguity of both listing and deleting items via the same URL. It would be a good idea to (at the very least) separate those actions (or “methods”) into distinct URLs (for example: /cart/list and /cart/clear).

If you’re willing to go a step further, you should consider implementing a “RESTful” API. This would mean, among other things, that methods can only be called using the correct HTTP verb. You’ve possibly only heard of GET and POST, but there’s also PUT and DELETE, amongst others. The reason behind this is to make the methods idempotent, meaning that they do the same thing again and again, no matter how many times you call them. For example, a GET call to /cart will always list the contents and a DELETE call to /cart will always delete all items in the cart.

Although it is probably not practical to write a full REST API for your shopping cart, I’m sure some of the principles may help you build a more robust system.

Some reading material: A Brief Introduction to REST.