1

我刚开始学习 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 会逐行读取这一行吗？

4

5 回答 5

3

在您的代码中，您是：

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

您分配给的函数是匿名函数的一个示例，一旦更改XMLHttpRequestObject.onreadystatechange就会执行。readyState做一个粗略的比较，就像onchange在 a 中添加一个<select>- 当值发生变化时，执行分配的匿名函数

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

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

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

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

在该函数中确定请求是否完成 (4) 并且页面是否正常 (200)。如果是这样，响应就可以使用了。

于 2012-04-23T07:33:30.573 回答
3

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

线

XMLHttpRequestObject.onreadystatechange = function() { }

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

于 2012-04-23T07:34:07.170 回答
2

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

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

var counter = 0;

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

并检查console.log，你会发现它被调用的次数与onreadystatechange一样多（这是一个触发anonymouse函数的事件）

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

于 2012-04-23T07:35:20.663 回答
2

从这里引用：

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

这意味着只要 readystate 属性发生变化，就会调用回调。由于调用是异步的，你不知道什么时候会发生（因为它基本上取决于服务器的响应时间）。

于 2012-04-23T07:35:36.270 回答
1

好的，我将带您逐步解释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. 为了与服务器通信，我们需要向它发送一条消息（an XMLHttpRequest）。
  3. 在消息中，我们指定了消息使用的方法（GET、等）。您可以在此处POST阅读有关它的更多信息。
  4. 我们需要指定消息的目标地址（URL）。在这种情况下，它是/resource.txt.
  5. 既然我们已经写好了这封信，我们就真的把它寄出去了。就像把它放进邮箱一样。
  6. 现在是邮局（在这种情况下是浏览器）传递邮件的问题。
  7. 但是，如果我们想知道邮件的状态 (the readyState)，我们需要告诉浏览器在它发生变化时通知我们。
  8. 为了得到通知，我们只需添加一个函数到onreadystatechange. 现在，每当readyState消息更改时，浏览器都会自动调用该函数。

这些是消息的就绪状态：

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

好的，现在要了解发生了什么：

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

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

总之，如果您想了解更多关于状态码的信息，请访问此页面。

于 2012-04-23T07:59:31.177 回答