Javascript EventListeners、onreadystatechange或用于AJAX调用的jQuery?

Javascript EventListeners、onreadystatechange或用于AJAX调用的jQuery?,javascript,jquery,ajax,event-listener,onreadystatechange,Javascript,Jquery,Ajax,Event Listener,Onreadystatechange,我正在调用OpenWeatherMapAPI以获取天气预报JSON对象。我使用了3种不同的javascript方法,当有人在zipweather html id元素中输入zipcode并按submit或enter键时,调用zipweather(),基本上将zipcode粘贴到api地址的末尾,然后将该zipcode上的数据发送回 它们都很好用。他们都有一个城市名称和转换成华氏温度的温度 它们都使用错误处理程序中的回调函数本身来防止失败。第一个使用5秒的超时回调 onreadystatechang

我正在调用OpenWeatherMapAPI以获取天气预报JSON对象。我使用了3种不同的javascript方法,当有人在zipweather html id元素中输入zipcode并按submit或enter键时,调用
zipweather()
,基本上将zipcode粘贴到api地址的末尾,然后将该zipcode上的数据发送回

它们都很好用。他们都有一个城市名称和转换成华氏温度的温度

它们都使用错误处理程序中的回调函数本身来防止失败。第一个使用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;
}
xhr.addEventListener(“加载”,函数(){
//应答文本代码
},错)
xhr.addEventListener(“错误”,函数(错误){
控制台日志(err);

如果(weatherData.retryCount回答您的三个问题:

1.业绩 因为用JavaScript发送请求的方式根本不会影响实际的网络加载性能,所以这并不重要。而且,三者之间几乎没有客户端性能差异


2.失败时回调 你实际上处理得非常好和优雅。不要担心方法,除非它很慢或不起作用:D


3.哪一个? 这完全取决于你!如果你想做jQuery,就做吧。如果你想用事件监听器做简单的JavaScript,就做吧



希望有帮助,如果您有任何问题,请随时提问:)

您可能可以使用性能测试工具自己回答性能问题。我更喜欢事件侦听器,因为代码读起来更清晰。就错误而言,如果服务出现严重错误,我会将第一个方法无法突破回调循环归类为严重错误。如果vice已关闭,这需要通过性能测试进行检查

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


至于jQuery v.而不是jQuery,这取决于您的用例。在一个轻量级的网页中,您执行的JavaScript代码很少,您可能会发现jQuery在库的大小方面过于苛刻。另一方面,jQuery很受欢迎,因为它克服了浏览器的不兼容性,让您,编码者,专注于应用程序功能可选性。如果从流行的CDN加载,许多用户可能已经在缓存中使用了它,因此加载时间不是一个因素。至于人们使用什么,jQuery很流行,但除此之外,我不知道是否存在任何统计数据可以分析这两种方法的相对流行程度。

因为ajax请求的性能高度依赖于CDN网络速度,导致ajax请求然后分派处理程序(无论是事件处理程序还是回调)的javascript执行的性能并不重要。@kevin,这就像是说:"一分钟到机场的旅程并不重要,因为广播时间是小时。是的,第一个影响到总时间。另外,问题不是对网络感兴趣,而是对客户端性能感兴趣。我想我想问的问题是:哪一个是最好的使用方式?尽管除了风格上,它似乎没什么关系。谢谢,我也许应该将第三个问题改为“javascript开发人员使用哪种方法来实现ajax?”因为这三个看起来都是可以互换的,我想我会认为这是程序员的决定吗?@jarisky进行了相应的编辑。我在这个回复中勾选了额外的信息。我对javascript和jquery以及stackoverflow有点陌生,所以感谢所有的帮助和鼓励。你会推荐一个特定的测试工具吗在这种情况下,您可以在性能测试JavaScript上看到此线程。
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;
}