如何利用asynchronousXMLHttpRequest的callback函数？

我目前正在编写JavaScript和令人困惑的callback 。 我发现它不是一种内置function，但…
我正在阅读O'Relly JavaScript 5th Edition，它显示了一个如下所示的示例代码：

getText = function(url, callback) // How can I use this callback? { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { callback(request.responseText); // Another callback here } } request.open('GET', url); request.send(); } 

基本上，我想我不明白callback的一般想法虽然…有人可以写一个示例代码来利用上面的callback ？

Answer 1

callback是非常简单和漂亮！ 由于AJAX调用的性质，在请求结束之前，您不会阻止脚本的执行（这将会是同步的）。 callback只是一个指定的方法来处理响应，一旦它回到你的方法。

由于JavaScript方法是第一类对象，你可以像variables一样传递它们。

所以在你的例子

 getText = function(url, callback) // How can I use this callback? { var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { callback(request.responseText); // Another callback here } }; request.open('GET', url); request.send(); } function mycallback(data) { alert(data); } getText('somephpfile.php', mycallback); //passing mycallback as a method 

如果你这样做，这意味着你通过mycallback作为处理你的回应（callback）的方法。

编辑

虽然这里的例子没有说明callback的正确好处（你可以直接把警报放在onReadyStateChange函数中！），但是可用性肯定是一个因素。

你必须记住，这里重要的是JS方法是第一类对象。 这意味着你可以将它们传递给类似的对象，并将它们附加到各种事件中。 当事件触发时，附加到这些事件的方法被调用。

当你做request.onreadystatechange = function(){}你只是分配该方法来调用适当的事件触发。

所以这里很酷的是这些方法可以被重用。 假设你有一个error handling方法，在AJAX请求中出现404的情况下，popup警告并填充HTML页面中的一些字段。

如果你不能分配callback或传递方法作为参数，你必须一遍又一遍地编写error handling代码，但是你只需要把它作为callback函数，所有的error handling就会被sorting一气呵成。

---

Answer 2

首先我build议读一下callback是什么。 这是一个开始。

大的图景

callback被广泛用于asynchronous编程。 当你不想阻塞，直到一个（可能）长时间运行的操作完成时，解决问题的方法之一是将操作委托给将要为你做的一方。 这就产生了一个问题：你将如何知道手术何时完成，以及如何得到结果？

一种解决办法是将工作委派给别人，并且不时地从正常的工作中抽出一点时间来问“我给你做的工作还没有完成？”。 如果是这样，以某种方式得到结果，并离开你。 问题解决了。

这种方法的问题是，它不会让你的生活变得更容易。 你现在被迫每隔一段时间就问一次，你不会知道这个操作一旦完成就完成了（但是只有在下一次你记得要问的时候）。 如果你忘了问，你永远不会被通知。

更好的解决方法是callback：委托工作时，提供一个函数。 那么实际上做这个工作的代码会在工作完成后立即调用这个函数。 现在你可以忘掉所有关于这个东西的东西，并且在工作完成的时候，你的callback将会被调用。 不早，不迟。

这里callback是什么？

在这个特定的情况下， callback函数是您提供给getText一种方式，允许它与您进行通信。 你实际上是在说“为我做这个工作，等你完成后，给你打电话让我知道”。

实际上getTextselect只在XMLHttpRequest （XHR）完成的时候使用这个callback函数，同时“让你知道”它也传递给你HTTP响应的内容（所以你可以根据这些信息）。

callback和更多的callback，哦，我的！

但花一点时间阅读代码。 它存储的价值是什么request.onreadystatechange ？ request.onreadystatechange的目的是什么？

答案是request.onreadystatechange在那里为你填充一个callback 。 实际上，XHR为您提供了一个callback的方法，并且当底层HTTP请求的状态发生变化时，XHR会答应“回拨”。

getText是一个在上面build立抽象的函数：它在那里插入自己的callback（一个匿名函数 – 我将它称为“内部” ），并接受来自你的另一个callback（参数 – I'将其称为“外” ）。 当内部callback（记住：每当状态改变时被调用）检测到状态是“已完成”（值为4的含义）并且HTTP响应状态码是200（意思是“OK”）时，它调用外部callback让你， getText的用户，知道结果。

我希望我有道理。 🙂

Answer 3

什么以适当的“callback”方式工作是定义一个服务，返回这样的承诺！

 $http.head("url2check").then(function () { return true; }, function () { return false; }); 

在控制器中使用服务：

 <service>.<service method>.then(function (found)) { if (found) {...... } 

@jon是正确的称之为asynchronous！

Answer 4

我个人比较喜欢用callback函数来使用事件监听器。

当你愿意一次处理多个asynchronous请求时，使用Listener非常方便。

用法如下（摘自https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest ）

 function reqListener () { console.log(this.responseText); } var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", "http://www.example.org/example.txt"); oReq.send()