Ajax - используя скрипт для загрузки разных «событий»

Question

Я новичок в ajax, но в настоящее время есть код, который изменит область содержимого сайта после щелчка ссылки.
Проблема в том, что я хочу загрузить различный контент с помощью разных кнопок, но текущий код позволяет мне только ссылаться на один файл/страницу.

<script> 
    function loadXMLDoc() 
{ 
    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 && xmlhttp.status==200) 
     { 
     document.getElementById("centreCont").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","../home/indexFav.php",true); 
    xmlhttp.send(); 
    } 
    </script> 

Вы можете увидеть в приведенном выше сценарии, что, когда я ссылку на скрипт Аякс всегда направит «../home/indexFav.php».

Я хочу использовать разные ссылки для загрузки различного контента. Как это может быть сделано?

Вот мой HTML:

<div class="" onclick="loadXMLDoc()">Everyone</div> 
<div class="" onclick="loadXMLDoc()">Favourites Only</div> 

Answer 1

Это, как вы можете добавить «аргумент» для функции AJAX, которые вы можете позвонить с различными значениями. Javascript ниже:

<script> 
function loadXMLDoc(pageName) 
{ 
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 && xmlhttp.status==200) 
    { 
    document.getElementById("centreCont").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","../home/" + pageName + ".php",true); 
xmlhttp.send(); 
} 
</script> 

Тогда ваш HTML может/будет что-то вроде этого:

<div class="" onclick="loadXMLDoc('indexEveryone')">Everyone</div> 
    <div class="" onclick="loadXMLDoc('indexFav')">Favourites Only</div> 

Надежда, что помогает.

Answer 2

Добавить дополнительный аргумент в вашей loadXMLDOC функции, которая принимает URL для загрузки. например .:

function loadXMLDoc(url) { 
    ... 
    xmlhttp.open("GET",url",true); 
    xmlhttp.send(); 
} 

Затем измените onclick методы:

<div class="" onclick="loadXMLDoc('../home/indexFav.php')">Everyone</div> 
<div class="" onclick="loadXMLDoc('../home/indexAll.php')">Favourites Only</div>