Unable to use two functions with same ajax object

Question

Below function only works to fetch URL that is function 1. Function 2 which makes another ajax call to fetch and display data in one of the pages that fetched by function 1, doesn't work. WHy is it so, is there any conflict here? I believe can use same object which is xmlhttp in this case for multiple function?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script>
var xmlhttp = false;
try {
    xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
    //alert("javascript version greater than 5!");
} catch (e) {
    try {
        xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
        // alert("you're using IE!");
    } catch (E) {
        xmlhttp = new XMLHttpRequest();
        //alert("non IE!");
    }
}

//function 1
function sendtobox(param, param2) {
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (this.responseText !== null) {
                var ajaxElm = document.getElementById('boxA');
                //ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML; // append in front
                jQuery(ajaxElm).prepend(this.responseText);
            }

        }
    }

    xmlhttp.open("GET", "getsubjects.php?q=" + param + "&r=" + param2, true);
    xmlhttp.send();

}


//function 2

function makerequest(serverPage, objID) {
    var obj = document.getElementById(objID);
    xmlhttp.open("GET", serverPage);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

html

<div class="row">
    <div class="small-11 medium-12 large-12 small-centered medium-centered large-centered text-center  columns top_menu">
        <ul class="small-block-grid-4 maedium-block-grid-4 large-block-grid-4">
            <li>
                <a href="home.php" onclick="makerequest('home.php','hw'); return false;">Home</a>
            </li>
            <li>
                <a href="search.php" onclick="makerequest('search.php','hw'); return false;">Search Tutors</a></li>
            <li>
                <a href="tutor.php" onclick="makerequest('tutor.php','hw'); return false;">Become a tutor</a>
            </li>
            <li>
                <a href="success.php" onclick="makerequest('success.php','hw'); return false;">How it works</a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="small-11 medium-12 large-12 columns">
        <section id="content">
            <div class="row">
                <div class="small-12 medium-12 large-12 columns" id="hw">
                </div>
            </div>
        </section>
    </div>
</div>

Answer 1

Create different xmlHTTP request objects for each call

function getXmlHttp() {
    var xmlhttp = false;
    try {
        xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
        //alert("javascript version greater than 5!");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
            // alert("you're using IE!");
        } catch (E) {
            xmlhttp = new XMLHttpRequest();
            //alert("non IE!");
        }
    }
    return xmlhttp;
}

//function 1
function sendtobox(param, param2) {
    var xmlhttp = getXmlHttp();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (this.responseText !== null) {
                var ajaxElm = document.getElementById('boxA');
                //ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML; // append in front
                jQuery(ajaxElm).prepend(this.responseText);
            }

        }
    }

    xmlhttp.open("GET", "getsubjects.php?q=" + param + "&r=" + param2, true);
    xmlhttp.send();

}


//function 2

function makerequest(serverPage, objID) {
    var xmlhttp = getXmlHttp();
    var obj = document.getElementById(objID);
    xmlhttp.open("GET", serverPage);
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}