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

Question

我在一个页面中多次使用XMLHttpRequest。我手动构造url，例如

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

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')，在请求体中发送的数据，错误回调等。你写得越一般，逻辑就越复杂。

另一方面，如果你发现自己不断地向同一个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'}, ...]

和做同样的事情。这完全取决于你。

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

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