在执行某些 ajax 操作时，此匿名回调函数何时运行

when does this anonymous callback function run when doing some ajax stuff?

本文关键字：回调 函数 运行 何时 执行 ajax 操作      更新时间：2023-09-26

我刚开始学习ajax，我只是无法理解示例中使用的匿名回调函数的概念。

function getData(dataSource, divID) 
  { 
    if(XMLHttpRequestObject) {
      var obj = document.getElementById(divID); 
      XMLHttpRequestObject.open("GET", dataSource); 
      XMLHttpRequestObject.onreadystatechange = function() 
      { 
        if (XMLHttpRequestObject.readyState == 4 && 
          XMLHttpRequestObject.status == 200) { 
            obj.innerHTML = XMLHttpRequestObject.responseText; 
        } 
      } 
      XMLHttpRequestObject.send(null); 
    }
  }

匿名函数何时触发？ JavaScript 会逐行读取此内容吗？

在你的

代码中，你是：

  1. 构建请求对象
  2. 为该对象分配回调
  3. 您发送请求

您分配给 XMLHttpRequestObject.onreadystatechange 的函数是匿名函数的示例，一旦readyState更改，该函数就会被执行。 要进行粗略比较，就像向<select>添加onchange - 当值更改时，执行分配的匿名函数

匿名函数非常重要，其中一个函数使用它来定义一组"要做的事情"，基本上是将"待办事项"列表交给另一个操作。 然后该操作将在需要时执行它，在本例中为 onreadystatechange .

您的代码也是"异步操作"的示例。代码从上到下运行。回调只是"分配"的，因此不会执行。发送请求后，此时它不会等待响应。它就像一个后台操作，而其余的代码在它被执行之后。

一旦 readyState 的值发生变化，您刚刚分配给XMLHttpRequestObject.onreadystatechange的函数就会被执行。 条件

XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200

在该函数中，确定请求是否完成 （4） 和页面是否正常 （200）。 如果是这样，则响应可供使用。

Javascript中的函数是第一类对象，这意味着它们可以像任何其他变量一样传递。

该行

XMLHttpRequestObject.onreadystatechange = function() { }

将XMLHttpRequestObject对象的 onreadystatechange 属性设置为该函数。如果您查看文档，您将看到此函数"每当 readyState 属性更改时都会调用"

当您设置XMLHttpRequestObject.onreadystatechange时，您实际上是在更改类的方法，因此该函数不会在设置时执行，而是在稍后更改就绪状态时执行......

每次更改 readyState 时都会调用该函数，因此如果您在那里设置了一个计数器

var counter = 0;
XMLHttpRequestObject.onreadystatechange = function() { console.log(counter++) };

并检查控制台.log您将看到调用的次数与 OnreadyStateChange 一样多（这是一个触发 anonymouse 函数的事件）

虽然我读到你只是在学习javascript和AJAX，但我建议看看一些跨浏览器支持的东西，如jQuery，Zepto和其他...

从这里引用：

如果 XMLHttpRequest 对象的 open 方法使用 异步请求的第三个参数设置为 true，即 将自动调用 onreadystatechange 事件侦听器 以下更改 readyState 属性的每个操作 XMLHttpRequest 对象。

这意味着每当 readystate 属性更改时都会调用回调。由于调用是异步的，因此您无法知道何时会发生这种情况（因为它基本上取决于服务器的响应时间）。

好的，我将带您逐步解释 AJAX：

var request = new XMLHttpRequest;     // create a new HTTP Request
request.open("GET", "/resource.txt"); // set the method as GET and specify the URL to request for
request.onreadystatechange = handle;  // attach a handler which is called when the ready state of the request changes
request.send();                       // dispatch the HTTP Request
/*
    function to call when the ready state of the request changes
*/ 
function handle() {
    if (request.readyState === 4 && request.status === 200) {
        alert(request.responseText);  // if the ready state is 4 (complete) and the server sends a status of 200 (OK) then alert the contents of resource.txt which is stored in request.responseText
    }
}

现在要了解：

  1. AJAX 用于与服务器通信。
  2. 要与服务器通信，我们需要向其发送消息（XMLHttpRequest）。
  3. 在消息中，我们指定消息使用的方法（GET、POST等）。您可以在此处阅读有关它的更多信息。
  4. 我们需要指定消息的目标地址（URL）。在这种情况下，它是 /resource.txt .
  5. 现在我们已经写好了这封信，我们实际上寄出了它。就像把它放进邮箱一样。
  6. 现在是邮局（在本例中为浏览器）传递邮件的问题。
  7. 但是，如果我们想知道邮件的状态（readyState ），我们需要告诉浏览器在更改时通知我们。
  8. 要收到通知，我们只需添加一个函数即可 onreadystatechange .现在，每当消息readyState发生变化时，浏览器将自动调用该函数。

以下是消息的就绪状态：

  1. 0（未初始化）- 请求未初始化
  2. 1（正在加载）- 服务器连接已建立
  3. 2（已加载）- 收到请求
  4. 3（交互式）- 处理请求
  5. 4（完成）- 请求完成，响应准备就绪

好了，现在来了解发生了什么：

  1. 当我们写一条消息但没有发送它时，readyState 0因为请求没有初始化（即它没有被发送或放入邮箱）。
    2. 将邮件
  2. 放入邮箱后，浏览器会尝试将邮件发送到服务器。此时，readyState变得1。
  3. 当整个消息被传递时，readyState变得2。
  4. 然后，服务器写入对消息的回复，并在消息正文中放置您请求的内容。当服务器写入回复时，readyState变为3。
  5. 最后，当回复到达我们时，readyState更改为 4 .

每次readyState更改时，浏览器都会触发您提供的onreadystatechange函数，以通知您发生了事件。简单吧？

总之，如果您想了解有关状态代码的更多信息，请转到此页面。

相关文章：