JavaScript中从setTimeout与setInterval到AJAX异步

setTimeout与setInterval

setTimeout

setTimeout是JavaScript中的一个定时器函数，它接受2个参数：一个函数和一个时间（单位为毫秒）。当函数被发送到浏览器的事件队列时，它会在指定的时间之后执行。

setTimeout(function() {
  console.log('This message will be logged after 3 seconds');
}, 3000);

在上述例子中，setTimeout函数将在3秒后执行传递的函数，函数体内会打印出一条消息。

setInterval

setInterval同样是JavaScript中的定时器函数，但它的作用是以一定的间隔循环执行代码块。

setInterval(function() {
  console.log('This message will be logged every 3 seconds');
}, 3000);

以上代码将在每3秒左右循环执行传递的函数，函数体内将打印出一条消息。

AJAX异步

AJAX，即“异步JavaScript和XML”，是一种在不重新加载整个页面的情况下，通过后台与服务器交换数据的技术。

AJAX请求通常是通过XMLHttpRequest对象发起的。

XMLHttpRequest

XMLHttpRequest对象是浏览器内置的一个对象，它提供了一种在客户端与服务端之间传输数据的方式，而不会导致完整页面的重新加载。

以下是一个使用XMLHttpRequest对象从服务器请求数据的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Request failed. Returned status code ' + xhr.status);
  }
};
xhr.send();

首先创建了一个XMLHttpRequest对象，然后使用open方法指定请求类型、请求地址和是否异步。接着，注册一个回调函数，当响应成功返回时，将调用该函数输出响应内容，如果请求失败，则输出错误信息。

jQuery AJAX

jQuery是一个广泛使用的JavaScript库，它的AJAX方法提供了一种更加简单和易用的方式来发起AJAX请求。

$.ajax({
  url: 'http://example.com/data.json',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('Request failed: ' + textStatus + ', ' + errorThrown);
  }
});

以上代码使用jQuery的$.ajax方法发起了一个GET请求并指定请求地址。success回调函数在请求成功时被调用，并输出响应data，error回调函数在请求失败时调用，并输出错误信息。

总结

本文介绍了JavaScript中定时器函数setTimeout和setInterval的用法，以及使用XMLHttpRequest对象和jQuery的$.ajax方法进行AJAX异步请求的方法。通过本文的介绍，您可以更好地理解JavaScript中的定时和异步请求的知识。