0

更新

我已经按照 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>
4

2 回答 2

1

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

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.

于 2013-06-27T09:59:35.677 回答
0 
document.getElementById("debug").innerHTML += "<div style='color: green;'>" + response + "</div>";

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

于 2013-06-27T10:28:35.383 回答