Question

我有一个小脚本，它使用AJAX和PHP来显示图像。你可以在下面看到，如果我调用函数mom（），它会查看PHP文件index.php？i = mom并显示我正在寻找的图像。

但我需要javascript更轻，因为我有30个图像，每个我必须修改和复制下面的脚本。是不是有一种更简单的方法让函数不同并仍然调用不同的页面？

<script type="text/javascript">
function mom()
{
    var xmlHttp = getXMLHttp();
    xmlHttp.onreadystatechange = function()
    {
        if(xmlHttp.readyState == 4)
        {
            HandleResponse(xmlHttp.responseText);
        }
    }
    xmlHttp.open("GET", "index.php?i=mom", true); 
    xmlHttp.send(null);
}
function HandleResponse(response)
{
  document.getElementById('mom').innerHTML = response;
}
</script>

我的触发器就是这个

<a href="#" onclick='mom();' />Mom</a>
<div id='mom'></div>

Answer 1

您可以修改您的功能，因此它需要一个参数：

// The function receives the value it should pass to the server
function my_func(param)
{
  var xmlHttp = getXMLHttp();
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      // Pass the received value to the handler
      HandleResponse(param, xmlHttp.responseText);
    }
  }
  // Send to the server the value that was passed as a parameter
  xmlHttp.open("GET", "index.php?i=" + param, true); 
  xmlHttp.send(null);
}

当然，在第二个函数中使用该参数：

function HandleResponse(param, response)
{
  // The handler gets the param too -- and, so, knows where to inject the response
  document.getElementById(param).innerHTML = response;
}

并修改您的HTML，以便使用正确的参数调用该函数：

<!-- for this first call, you'll want the function to work on 'mom' -->
<a href="#" onclick="my_func('mom');" />Mom</a>
<div id='mom'></div>

<!-- for this secondcall, you'll want the function to work on 'blah' -->    
<a href="#" onclick="my_func('blah');" />Blah</a>
<div id='blah'></div>

Answer 2

我通过在你的情况下创建一个xmlHttp和一个全局变量的数组来解决这个问题，所以它为每个请求递增。然后，如果你反复调用同一个东西（例如它返回在线用户，或者其他），那么你实际上也可以使用相同的数组元素重新提交。

添加了示例代码：

要将其转换为reoccuring事件，请复制这些2，并在获取数据调用中，只需使用reget重新提交

  var req_fifo=Array();
  var eleID=Array();
  var i=0;

  function GetAsyncData(myid,url) {
    eleID[i]=myid;
    if (window.XMLHttpRequest) 
    {
      req_fifo[i] = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
      req_fifo[i] = new ActiveXObject("Microsoft.XMLHTTP");
    }
      req_fifo[i].abort();
      req_fifo[i].onreadystatechange = function(index){ return function() { GotAsyncData(index); }; }(i);
      req_fifo[i].open("GET", url, true);
      req_fifo[i].send(null);
      i++;
  }
  function GotAsyncData(id) {
    if (req_fifo[id].readyState != 4 || req_fifo[id].status != 200) {
      return;
    }
    document.getElementById(eleID[id]).innerHTML=
      req_fifo[id].responseText;
    req_fifo[id]=null;
    eleID[id]=null;
    return;
  }

  function reget(id) {
    myid=eleID[id];
    url=urlID[id];
      req_fifo[id].abort();
      req_fifo[id].onreadystatechange = function(index){ return function() { GotAsyncData(index); }; }(id);
      req_fifo[id].open("GET", url, true);
      req_fifo[id].send(null);
  }

Answer 3

这应该有效（如果我理解正确的话）

<script type="text/javascript">
function func(imgName)
{
  var xmlHttp = getXMLHttp();
  xmlHttp.onreadystatechange = function()
  {
    if(xmlHttp.readyState == 4)
    {
      document.getElementById(imgName).innerHTML = 
    }
  }
  xmlHttp.open("GET", "index.php?i=mom", true); 
  xmlHttp.send(null);
}
</script>

Answer 4

MARTIN的解决方案将完美运作。

顺便说一下，你应该使用一些javascript框架进行Ajax处理，比如jQuery。

它会让你的生活变得轻松。

如果您的重量较轻的图像，请在页面上预先加载图像。

Answer 5

参数化函数的建议是正确的，可以避免重复代码。

jQuery库也值得考虑。 http://jquery.com

如果你使用jQuery，那么每个ajax调用都会很简单。

$('#mom').load('/index.php?i=mom');

如果您愿意，可以按照以下方式将其打包，因为您说您将多次使用它（并且您希望在点击链接时完成此操作）

function doAjax(imgForAjax) { $('#'+imgForAjax).load('/index.php&i='+imgForAjax);}
doAjax('mom');

它使经常重复的ajax模式更加简单，并且正如我假设你的getXMLhttp函数那样处理不同浏览器之间的问题。

在我上面链接的网站上，您可以下载该库的单个29kb文件，这样您就可以在页面上使用它来进行简单的<script src='jquery.min.js'></script>。还有很多很棒的文档。 jQuery很受欢迎，你会发现它有很多关于SO的问题和内容。 ajax只是jQuery库/框架（idk是首选术语）可以帮助的众多事物之一。

如何在不重复代码的情况下调用多个AJAX函数（到PHP）

5 个答案: