0

我XMLHttpRequest在一个页面中使用了很多次。我手动构建网址，例如 

http.onreadystatechange = function() {  
    if (http.readyState === 4){  
        //dosomething  
    }  
};    
http.open('GET','/path/to/page.html?a=1&b=2&c=3&d=4);  
http.send(null);

这在页面中至少重复了 4 次。所以我正在寻找如何重构它。
我如何使它成为一个单独的实用函数？是否有例如可变参数javascript？
将如何传递不同的请求参数以附加到 url？
请注意：我不是在询问JQuery. 我不问/不使用的唯一原因JQuery是因为我不知道。
所以请就普通的javascript提出建议

4

2 回答 2

4

您可以在 JavaScript 中定义函数，从而使命令/过程可重用。例如，您可以创建一个函数，该函数接受key -> value数据的映射对象和一旦收到响应就应该调用的回调：

function make_request(url, data, done) {
    // initialize XMLHttpRequest object here

    http.onreadystatechange = function() {  
        if (http.readyState === 4){  
            done(http.responseText); // call callback
        }
    };

    // build query string / URL
    // this should be moved in its own function
    var kv = [];
    for (var prop in data) {
        kv.push(encodeURIComponent(prop) + '=' + encodeURIComponent(data[prop]));
    }
    url = url + (url.indexOf('?') === -1 ? '?' : '&') + kv.join('&');

    http.open('GET', url);
    http.send(null);
}

然后会这样调用：

make_request('/path/to/page.html', {a:1, b:2, c:3}, function(response) {
    // do something with the response
});

您可以通过让函数接受参数来配置方法（“GET”或“POST”）、要在请求正文中发送的数据、错误回调等来使函数更加通用。逻辑通常变得更复杂。

了解有关函数的更多信息。

另一方面，如果您发现自己不断地向同一个 URL 发出请求并始终以相同的方式处理响应，那么创建另一个函数是有意义的，它只接受要发送的数据并向 URL 发出请求。
例如：

function update(data) {
    make_request('/path/to/page.html', data, function(response) {
        // do something with the response
    });
}

然后你只需要打电话

update({a: 1});
// or
update({b: 2});

在避免代码重复和代码重复之间存在权衡。如果您在代码中的 100 个不同位置发出相同的请求，那么创建一个额外的函数是值得的。如果你只是这样做五次，那么可能不会。当然，这取决于要复制多少代码。

回答一些问题：

我如何使它成为一个单独的实用函数？

用技术术语来说，你定义一个函数function funcName() {...}并将逻辑放在里面。有关逻辑的示例，请参见上文。

javascript中是否有可变参数？

是的。在每个函数中，您都可以访问特殊arguments变量。这是一个类似数组的对象，其中包含对传递给函数的每个参数的引用。

将如何传递不同的请求参数以附加到 url？

以任何你喜欢的方式！您可以传递一个已经正确格式化的字符串，即

"a=1&b=2&c=3"

或者您可以传递一个对象，其中键是参数名称，值是参数值，然后动态构建查询字符串，如上所示。您还可以传递表单的嵌套数组

[['paramName', 'paramValue'], ...]

或一组对象，如

[{name: 'paramName', value: 'paramValue'}, ...]

并做同样的事情。这真的取决于你。

主要目标是减少代码重复。使用数组或对象传递数据是您无法避免的事情。但是从这些数据构建查询字符串可以分解为一个函数。

于 2013-06-04T20:39:36.970 回答
-2

你可能会考虑使用jQuery——它为你抽象了很多。

http.onreadystatechange = function() {  
    if (http.readyState === 4){  
        //dosomething  
    }  
};    
http.open('GET','/path/to/page.html?a=1&b=2&c=3&d=4);  
http.send(null);

变成：

$.ajax({
    url: '/path/to/page.html',
    data: { a: 1, b: 2, c: 3, d: 4 }
})
.done(function(r) {
    // do something
});
于 2013-06-04T21:16:05.103 回答