Replace PHP script for jQuery to live AJAX feed

Question

I have an AJAX script powered by PHP backend which parses/gathers data from an XML file. I am trying to eliminate the PHP script and replace it with a JavaScript solution with jQuery. Here is my current JS script which is binded with a PHP script:

function showUser(str) {
    if (str == "") {
        document.getElementById("loadMe").innerHTML = "";
        return;
    }
    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("loadMe").innerHTML = xmlhttp.responseText;
        }
    }
    //xmlhttp.open("GET","lib/getuser.php?q="+str,true);
    //xmlhttp.send();
};

Here is the PHP script (getuser.php)

    <?php
    $q=$_GET["q"];

    $xmlDoc = new DOMDocument();
    $xmlDoc->load("../Administration/data/people.xml");

    $x=$xmlDoc->getElementsByTagName('fullName');

    for ($i=0; $i<=$x->length-1; $i++)
    {
    //Process only element nodes
    if ($x->item($i)->nodeType==1)
      {
      if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
        {
        $y=($x->item($i)->parentNode);
        }
      }
    }

    $user =($y->childNodes);

    for ($i=0;$i<$user->length;$i++)
    {
    //Process only element nodes
    if ($user->item($i)->nodeType==1)
      {
      if($i != 1 && $i != 0) {
        echo("<b>" . $i . $user->item($i)->nodeName . ":</b> ");
        echo($user->item($i)->childNodes->item(0)->nodeValue);
        echo("<br>");
      }
      }
    }
    ?> 

The above PHP works fine but... its PHP and its not written to live feed. I have a working jQuery solution below but I can't seem to implement it correctly with the first JS script above. As you can see right now the above JS script is triggering a GET request and expecting a feed from the PHP file. Here is my jQuery AJAX script:

    setInterval(updateMe2,500);

    function updateMe2(){

        $.ajax({
              type: "GET",
              url: "../Administration/data/people.xml"
            }).done(function (xml) {

            $("#txtHint").empty();

                $(xml).find('person').each(function() {
                    var firstName = $(xml).find('firstName').text();
                    var lastName = $(xml).find('lastName').text();
                    var age = $(xml).find('age').text();
                    var hometown = $(xml).find('hometown').text();
                    var job = $(xml).find('job').text();

                    $('<b></b>').html(firstName).appendTo('#loadMe');
                    $('<b></b>').html(lastName).appendTo('#loadMe');
                    $('<b></b>').html(age).appendTo('#loadMe');
                    $('<b></b>').html(hometown).appendTo('#loadMe');
                    $('<b></b>').html(job).appendTo('#loadMe');
                });

            }).fail(function (response, error) {
                $('#info').text('Error!');
            });

        };

    };

How can I change the first JS snippet to work with this, above jQuery snippet instead of the above PHP file? NOTE: both the PHP file and the jQuery script both spit out the same markup, the PHP file is just written much differently. Thanks a ton in advance!

Answer 1

I created a solution if anyone is interested:

setInterval(itemMenu,1500);

function itemMenu() {

    $.ajax({
        type: "GET",
        url: "people.xml"
    }).done(function (xml) {

        $("#loadMe").empty();

        $(xml).find('fullName').each(function() {
            var fullName = $(this).text();
            $('<button type="button" onclick="itemContent(this.value)"></button>').attr('value', fullName).html(fullName).appendTo('#loadMe');
        });
    }).fail(function (response, error) {
        $('#info').text('Error!');
    });

};


//setInterval(itemContent,1500);

function itemContent(q) {

    $.ajax({
        type: "GET",
        url: "people.xml"

    }).done(function (xml) {

        $(xml).find('fullName').each(function() {

            var fullName = $(this).text();

            if(q==fullName) {

                $("#toadMe").empty();
                firstName = $(this).siblings('firstName');
                lastName = $(this).siblings('lastName');
                age = $(this).siblings('age');
                hometown = $(this).siblings('hometown');
                job = $(this).siblings('job');

                $('<h1></h1>').html(firstName).appendTo('#toadMe');
                $('<h1></h1>').html(lastName).appendTo('#toadMe');
                $('<h1></h1>').html(age).appendTo('#toadMe');
                $('<h1></h1>').html(hometown).appendTo('#toadMe');
                $('<h1></h1>').html(job).appendTo('#toadMe');
            }

        });

    }).fail(function (response, error) {

        $('#info').text('Error!');

    });

};