EventListeners、onreadystatechange 或 jQuery 用于 AJAX 调用？

Question

我正在调用 OpenWeatherMap API 以获取天气预报 JSON 对象。我使用了 3 种不同的 javascript 方法，当有人在 zipweather html id 元素中输入邮政编码并按提交或输入，调用 zipWeather() 并基本上将邮政编码粘贴到api 地址，然后发回该邮政编码的数据。

它们都工作正常。他们都有一个城市名称和转换为华氏温度的温度。

它们都在错误处理程序中使用回调函数本身以防失败。第一个使用 5 秒超时回调。

onreadystatechange方法：

function zipWeather() {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//responseText code
}
// else ifs for readystate 3 2 and 1 gives a console log
else {
console.log("request failed, retrying in 5 seconds...");
window.setTimeout(zipWeather, 5000);
return;
}
}
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=" + document.getElementById("zipweather").value,
true);

xhr.send();

事件侦听器而不是 onreadystatechange:

xhr.addEventListener("load", function() {
//responseText code
}, false)

xhr.addEventListener("error", function(err) {
console.log(err);
if (weatherData.retryCount <= weatherData.retryMax) {
    weatherData.retryCount++;
    console.log(weatherData.retryCount);
    console.log(err);
    zipWeather();
    return;
    }
else {
return;
}

当然还有jquery:

function zipWeather() {
$.ajax({
type: 'GET',
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + $("#zipweather").val(),
data: {},
dataType: 'json',
success: function(data) {
console.log(data.name);
$('#weather').html(data.name).css({'color': 'blue', 'text-shadow': '1px 0.5px lightblue'});
//change from kelvin
var localTempF = Math.round((data.main.temp - 273.15) * 9/5 + 32);
$('#localtemp').html(localTempF + weatherData.localUnits);
weatherData.localTemperatureValue = localTempF;
},
timeout: 3000,
retryCount: 0,
retryMax: 5,
error: function(jqXHR, textStatus, errorThrown) { 
this.retryCount++;
    if (this.retryCount <= this.retryMax) {
    //try again
    $.ajax(this);
    return;
    }
return;
}

最后两种方法使用了我在 What's the best way to retry an AJAX request on failure using jQuery? 中发现的 retryCount 和 retryMax 变量技巧，因此它不会继续调用 API。

最后，问题：

所有这些方法在性能方面都几乎相同吗？是否有潜在的灾难性错误潜伏在所写的任何方法中？
使用AJAX时，在错误处理程序中使用回调函数是否最合适？
javascript 代码标准是否正在从使用 onreadystatechange 或事件处理程序转向 jquery $.ajax 和 $.get 函数？

谢谢大家。抱歉拖了这么久！

Answer 1

三个问题的答案：

1。性能

由于JavaScript中发送请求的方式完全不影响实际的网络加载性能，所以根本无所谓。此外，三者之间几乎没有客户端性能差异。

2。失败时回调

你处理得很好很优雅。不要担心方法，除非它很慢或不起作用 :D

3。哪一个？

这完全取决于你！如果你想做jQuery，那就去做吧。如果你想用事件监听器做简单的 JavaScript ，那就去做吧。

希望对您有所帮助，如有任何问题，欢迎随时提问:)

Answer 2

您或许可以使用性能测试工具自己回答性能问题。我更喜欢事件监听器，因为代码读起来更清晰。就错误而言，如果服务中断，我会将第一种方法无法跳出回调循环的情况归类为严重错误。如果服务中断，可能会导致性能下降，这需要通过性能测试来检查。

我不知道在错误处理程序中是否有重新调用该方法的约定，但只要您有循环突破，这似乎是一种处理它的好方法。如果达到最大重试次数，您可能希望提醒用户并提示他们将在任意时间后再次尝试服务调用。有关此行为的示例，请参阅 Gmail 处理连接中断的方式。

至于 jQuery 与不是 jQuery，这取决于您的用例。在执行最少 JavaScript 编码的轻量级网页中，您可能会发现 jQuery 就库的大小而言有点过分了。另一方面，jQuery 很受欢迎，因为它掩盖了浏览器的不兼容性，让您（编码人员）专注于应用程序功能。如果您从流行的 CDN 加载它，许多用户可能已经在缓存中拥有它，因此加载时间不会成为一个因素。至于人们使用什么，jQuery 很流行，但除此之外，我不知道是否存在任何统计数据可以打破这两种方法的相对流行程度。

EventListeners、onreadystatechange 或 jQuery 用于 AJAX 调用？

EventListeners, onreadystatechange, or jQuery for AJAX calls?

javascript

jquery

ajax

event-listener

onreadystatechange

1。性能

2。失败时回调

3。哪一个？