如何利用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

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一气呵成。


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

大的图景

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

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

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

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

这里callback是什么?

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

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

callback和更多的callback,哦,我的!

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

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

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

我希望我有道理。 🙂

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

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

在控制器中使用服务:

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

@jon是正确的称之为asynchronous!

我个人比较喜欢用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()