Question

更新

我修改了Bamar建议的代码。我现在使用实例变量来保存回调函数。但是，问题仍然存在，每个makeRequest()调用都使用相同的回调函数。

我在JavaScript中创建了一个http客户端，它适用于同步GET和POST调用，但如果我使用具有两个或更多回调函数的异步请求，则会为每个请求调用相同的函数。

Service.aspx文件只是中继参数名称的值，因此应该针对每个请求进行更改。

以下是JavaScript代码：

//-- Usage examples ----------------------------------------------
/*
    //Full
    client = new httpClient();
    client.method("get");
    client.baseUrl("Service.aspx");
    client.requestData({name: "John", age: 56, location: "Kansas City"});
    var response = client.makeRequest();
    alert(response);

    //Multiple requests
    client = new httpClient();
    client.baseUrl("Service.aspx");

    client.requestData("?q=foo");
    var data = client.makeRequest();
    alert(data);

    client.requestData("?q=foobar");
    var data = client.makeRequest();
    alert(data);

    //Minimal
    client = new httpClient();
    client.baseUrl("Service.aspx?q=test");
    client.makeRequest();

    //Minimal, with deafult base URL http://localhost/
    client = new httpClient();
    client.requestData("?q=foobar");
    client.makeRequest();

    //Full, with response output contained in an object
    client = new httpClient();
    client.method("get");
    client.baseUrl("Service.aspx");
    client.requestData("?q=test");
    var requestObject = client.makeRequestObject();
    alert(requestObject.MimeType);
    alert(requestObject.charset);

    //Custom callback function to handle asychronous httprequests
    myCallback = function (response) {
        document.getElementById("div").innerHTML += response;
    }

    client = new httpClient();

    client.asynchronous(true);
    client.method("get");
    client.baseUrl("Service.aspx");
    client.callback(myCallback);

    client.requestData({ name: "Peter", age: 45, location: "Kansas City" });
    client.makeRequest();

    */

    function httpClient() {
        this.$baseUrl = "http://localhost/";
        this.$method = "get";
        this.$requestData = "";
        this.$asynchronous = false;
        this.$callbackFunction = "";
        this.$invokeCallback = function (func, response) {
            func(response);
        }
    }

    httpClient.prototype.method = function (requestMethod) {
        this.$method = requestMethod;
    }

    httpClient.prototype.baseUrl = function (requestBaseUrl) {
        this.$baseUrl = requestBaseUrl;
    }

    $_xmlhttpConstruct = function () {
        var xmlhttp;
        if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari
            return new XMLHttpRequest();
        }
        else {//IE6, IE5
            try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
            catch (e) { }
            try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
            catch (e) { }
            try { return new ActiveXObject("Microsoft.XMLHTTP"); }
            catch (e) { }
        }
    }

    httpClient.prototype.setRequestHeader = function (header, value) {

    }

    httpClient.prototype.callback = function (func) {
        this.$callbackFunction = func; //Does not get set to new callback function on multiple requests

    }

    httpClient.prototype.asynchronous = function (boolean) {
        this.$asynchronous = boolean;
    }

    httpClient.prototype.makeRequest = function () {

        //Initializing the xmlhttp object
        var xmlhttp = $_xmlhttpConstruct();

        if (this.$requestData == undefined) {
            xmlhttp.open(this.$method, this.$baseUrl, this.$asynchronous);
        }
        else {
            if (this.$method == "post") {

                xmlhttp.open(this.$method, this.$baseUrl, this.$asynchronous);
                xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.setRequestHeader("Cache-Control", "no-cache, must-revalidate"); //HTTP 1.1
                //xmlhttp.setRequestHeader("Pragma", "no-cache"); //HTTP 1.0
                //xmlhttp.setRequestHeader("Expires", "Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

                xmlhttp.send(this.$requestData);

                invokeCallback = this.$invokeCallback;
                callbackFunction = this.$callbackFunction;

                if (this.$asynchronous) {
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            //Callback
                            invokeCallback(callbackFunction, xmlhttp.responseText);
                        }
                    }
                }
                else {
                    return xmlhttp.responseText;
                }

                //alert("URL: " + this.$baseUrl + "\n" + "Method: " + this.$method + "\n" + "Request data: " + this.$requestData);
            }

            if (this.$method == "get") {

                xmlhttp.open(this.$method, this.$baseUrl + this.$requestData, this.$asynchronous);
                xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xmlhttp.setRequestHeader("Cache-Control", "no-cache, must-revalidate"); //HTTP 1.1
                //xmlhttp.setRequestHeader("Pragma", "no-cache"); //HTTP 1.0
                //xmlhttp.setRequestHeader("Expires", Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
                xmlhttp.send(null);

                invokeCallback = this.$invokeCallback;
                callbackFunction = this.$callbackFunction;

                if (this.$asynchronous) {
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            //Callback
                            invokeCallback(callbackFunction, xmlhttp.responseText);
                        }
                    }
                }
                else {
                    return xmlhttp.responseText;
                }

                //alert("URL: " + this.$baseUrl + "\n" + "Full request URL: " + this.$baseUrl + this.$requestData + "\n" + "Method: " + this.$method + "\n" + "Request data: " + this.$requestData);
            }
        }
    }

    httpClient.prototype.requestData = function (data) {

        this.$requestData = "";

        if (typeof (data) == "object") {
            var i = 0;
            for (key in data) {
                if (i == 0) {
                    if (this.$method == "get") {
                        this.$requestData += "?" + key + "=" + data[key];
                    }
                    if (this.$method == "post") {
                        this.$requestData += key + "=" + data[key];
                    }
                    i++;
                }
                else {
                    this.$requestData += "&" + key + "=" + data[key];
                }
            }
        }
        else {
            this.$requestData = data;
        }
    }

以下是我如何使用客户端（异步）：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="httpClient.js"></script>
</head>
<body>
<form id="form1">

<div id="debug"></div>

</form>
<script type="text/javascript">
    //Custom callback functions to handle asychronous httprequests
    function testone(response) {

        document.getElementById("debug").innerHTML += "<div style='color: green;'>" + response + "</div>";
    }
    function testtwo(response) {

        document.getElementById("debug").innerHTML += "<div style='color: red;'>" + response + "</div>";
    }

    clientOne = new httpClient();

    clientOne.asynchronous(true);
    clientOne.method("get");
    clientOne.baseUrl("Service.aspx");

    clientOne.callback(testone);

    clientOne.requestData({ name: "Peter", age: 45, location: "Kansas City" });
    clientOne.makeRequest();

    //---------------------------------------------------

    clientTwo = new httpClient();

    clientTwo.asynchronous(true);
    clientTwo.method("get");
    clientTwo.baseUrl("Service.aspx");

    clientTwo.callback(testtwo);

    clientTwo.requestData({ name: "Mary", age: 45, location: "Kansas City" });
    clientTwo.makeRequest();


    //Synchronous works!
    /*
    client = new httpClient();

    client.asynchronous(false);
    client.method("get");
    client.baseUrl("Service.aspx");

    client.requestData({ name: "Peter", age: 45, location: "Kansas City" });
    testone(client.makeRequest());

    client.requestData({ name: "Mary", age: 45, location: "Kansas City" });
    testtwo(client.makeRequest());
    */

    </script>
</body>
</html>

Answer 1

您需要为每个并发的AJAX调用使用单独的httpClient对象。

client1 = new httpClient();

client1.asynchronous(true);
client1.method("get");
client1.baseUrl("Service.aspx");

client1.callback(testone);

client1.requestData({ name: "Peter", age: 45, location: "Kansas City" });
client1.makeRequest();

client2 = new httpClient();

client2.asynchronous(true);
client2.method("get");
client2.baseUrl("Service.aspx");

client2.callback(testtwo);

client2.requestData({ name: "Mary", age: 45, location: "Kansas City" });
client2.makeRequest();

在httpClient类中，您需要使回调函数成为实例变量，而不是全局变量，因此$_callbackFunction的所有使用都应为this.$_callbackFunction。

Answer 2

document.getElementById("debug").innerHTML += "<div style='color: green;'>" + response + "</div>";

请注意此处的XSS，以防未正确转发响应。最好使用document.createElement（）和document.createTextNode（）。

使用异步xmlhttp请求的回调函数问题

更新

2 个答案: