Question

下面的函数仅用于获取函数1的URL。函数2进行另一个ajax调用以获取和显示函数1提取的其中一个页面中的数据，但不起作用。为什么会这样，这里有冲突吗？我相信在这种情况下可以使用相同的对象xmlhttp来实现多个功能吗？

<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

为每次调用创建不同的xmlHTTP请求对象

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);
}

无法使用具有相同ajax对象的两个函数

1 个答案: