Question

我在页面中使用了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中的varargs？
如何传递不同的请求参数以附加到URL？
请注意：我不是在问JQuery。我没有要求/使用JQuery的唯一原因是因为我不知道所以请提供简单的javascript建议

Answer 1

您可以在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'），在请求体中发送的数据，错误回调等，可以使函数更加通用。你做得越普遍，逻辑通常就越复杂。

Learn more about functions.

另一方面，如果您发现自己经常向同一个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个不同位置发出相同的请求，那么创建额外功能是值得的。如果你这样做五次，那么可能不是。当然，这取决于将复制多少代码。

回答一些问题：

我如何将其作为单独的实用功能？

在技术方面，你define a function with function funcName() {...}并将逻辑放在那里。有关逻辑的示例，请参见上文。

是否有例如vavascript中的varargs？

是。在每个功能中，您都可以访问特殊arguments variable。这是一个类似数组的对象，它引用了传递给函数的每个参数。

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

你喜欢什么方式！你可以传递一个已经格式正确的字符串，即

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

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

的嵌套数组

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

或像

这样的对象数组

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

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

主要目标是减少代码重复。使用数组或对象传递数据是您无法避免的。但是，可以将从这些数据构建查询字符串纳入函数中。

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

如何为XMLHttpRequest调用创建实用程序函数？

2 个答案: