Insert mysql data using javascript and ajax

You have to load it before your php file starts up.
All you have to do is to write a controller, and use it anywhere instead of your index.php and in that, (after loading those things from DB) redirect user to your index.php page providing those data you need.

So you are calling same page where ajax call is.. obviously it returns the code.

write php code in another file and try to call it. it works

You write code in conditional statement as per given below.

<?php
        if(isset($_GET["q"]))
        {
             $q = $_GET["q"];
             $username = $_COOKIE["user"];


             if(isset($username) && !empty($q)){
                mysql_query("INSERT INTO comments (comment,username) VALUES ('$q', '$username')");
            } elseif(!empty($q)) {
                mysql_query("INSERT INTO comments (comment,username) VALUES ('$q', 'Guest User')");
            }
        }
        else
        {
        ?>
        <script>
         function insertSQLData(str){
            if(str == 0){
                document.getElementById("holder").innerHTML="";
                return;
            }

            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById("holder").innerHTML = xmlhttp.responseText;
                }
            }
        xmlhttp.open("GET", "index-async.php?q=+str", true);
        xmlhttp.send();
        }
        </script>
        <form action="" method="get">
    <textarea onblur="insertSQLData(this.value);" id="quick-post-form" name="quick-post-form"></textarea>
    <input type="button" value="Submit" name="quick-post-btn" id="quick-post-submit">
    <div id="holder"></div>
        <?php

        }
?>