同一个js函数可以同时进行AJAX调用吗?

时间:2011-10-12 22:02:23

标签: javascript ajax jquery

我有一个表,其中每一行都有一个触发AJAX调用的按钮。调用相同的功能但不同的参数。结果显示在进行调用的同一行中。

呼叫确实很快,所以甚至可能需要一分钟左右。我可以观察到,如果我在前一个完成之前启动新的AJAX调用,则会松开调用的结果。

有什么方法可以在同一时间运行多个AJAX调用并从调用中获取结果并显示它们?

  • 使用jQuery
  • 在同一个浏览器窗口中
  • 调用php

调用javascript的HTML代码

    <button type="button" onclick="update_revision(\'' . $directory  . '\',\''.$server_name.'\')" > update </button>

的Javascript

   function update_revision(revision,server_name)
    {
      if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
      else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("rev."+revision).value="updated to "+update_to;
          }
        }
      xmlhttp.open("GET","https://"+server_name+"/imacs/radek/svn_update.php?code_base="+revision+"&revision="+update_to+"&t=" + Math.random(),true);
      xmlhttp.send();
    }        

1 个答案:

答案 0 :(得分:3)

问题是您使用单个全局变量来存储所有XMLHttpRequest实例。每当您创建一个新实例并将其引用存储在全局变量xmlhttp中时,之前引用的实例就会被取消引用,因此它将很快被垃圾收集因为浏览器认为合适。通常,这意味着它立即被垃圾收集;在您的情况下,即使在收到待处理的响应之前,它也会被垃圾收集。

解决此问题的一种方法是将xmlhttp声明为update_revision()函数中的局部变量。像这样:

function update_revision(revision, server_name) {
    // declare xmlhttp locally
    var xmlhttp;  

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
            if( xmlhttp.status == 200) {
                document.getElementById("rev." + revision).value = "updated to " + update_to;
            }

            // explicitly drop the reference when
            // we're done with it, so the browser will reclaim the object
            // (this is optional, but it's a good idea)
            xmlhttp = null;
        }
    }
    xmlhttp.open("GET", "https://" + server_name + "/imacs/radek/svn_update.php?code_base=" + revision + "&revision=" + update_to + "&t=" + Math.random(), true);
    xmlhttp.send();
}

注意:

  1. xmlhttp被声明为本地var

  2. 当我们不再需要它时,
  3. xmlhttp被“取消”(在readyState == 4之后)。这将导致浏览器垃圾收集请求实例,从而防止资源泄露。这是一个很好的做法(所以我在上面的例子中展示了它),但从技术上讲,它是可选的。