Как вызвать несколько функций AJAX (в PHP) без повторения кода

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

Предложения по параметризации вашей функции верны и позволят вам избежать повторения кода.

---

библиотека 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 делает.

На сайте, на который я ссылался выше, вы можете скачать отдельный файл библиотеки размером 29 КБ, чтобы вы могли использовать его на своих страницах с помощью простого <script src='jquery.min.js'></script> Также есть много отличных документов. jQuery довольно популярен, и вы увидите, что у него много вопросов и прочего по SO. ajax - это всего лишь одна из многих вещей, с которыми может помочь библиотека / фреймворк jQuery (например, предпочтительный термин).

Answer 3

Решение MARTIN будет отлично работать.

Кстати, вы должны использовать некоторые Javascript Framework для обработки Ajax, такие как jQuery.

Это облегчит вашу жизнь.

Если у вас есть легкие изображения, вы предварительно загружаете изображения на свою страницу.

Answer 4

Это должно работать (если я правильно понимаю)

<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 5

Я решил эту проблему, создав в вашем случае массив xmlHttp и глобальную переменную, чтобы она увеличивалась для каждого запроса.Затем, если вы неоднократно совершаете вызовы к одной и той же вещи (например, он возвращает пользователей онлайн или что-то еще), вы также можете фактически повторно отправить, используя тот же элемент массива.* Чтобы преобразовать его в событие повторного получения, сделайте копию этих 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);
  }