Calling a PHP script with Ajax (no jQuery)

Question

I am very new to MooTools and fairly new to JavaScript.

My code generates new rows for a user to add additional child jobs to the current job. As part of the template that's generated, a reference number is displayed that is created by calling a PHP function. The problem is that when the second (and subsequent) rows are generated, the reference number is identical. I am using PHP, JavaScript and MooTools, so jQuery is not an option.

All the code is in the same page. I understand the difference between client side and server side programming. I am asking for help on getting this to work. I don't know where to start.

I tried concatenation, but that doesn't work, obviously, as PHP is server side and JavaScript is client side. I don't know Ajax and have watched some tutorials on it, but I need to call a function, not do something on a button click and I'm lost.

Here is part of the template that's generated:

            <script id="connectedjobtemplate" type="text/template">
                <tr id="childjobrow3" class="odd" data-row-id="3">
                    <td style="width: 15%;">
                        <input data-row-id="3" id="reference[3]" name="childjobid[3][reference]" value="<%= ref %>" class="ref" size="14" style="background-color: transparent; border: none;" />
                    </td>
                </tr>
            </script>

I check for the Add New button to be clicked:

$(document.body).addEvent('click:relay(#add-new-row)', function (e, el) {
                try{
                    e.preventDefault();
                    addChildJobRow();
                }catch(e){
                    .
                    .
                }
            });

Then I find the reference number before calling the template:

function addChildJobRow() {
                try {
                    lastrow++;
                    var refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('newChildJobTable'));
                } catch (e) {
                    .
                    .
                }
            }

I would like to be able to call the getNewJobRef function with a second parameter being the current reference number. I can then check if the reference number being generated is the same as the current number and call it again if it is.

I have been looking at this for days already, so it's very possible a simple solution is staring me in the face and I can't see it. Any help would be great. TIA.

UPDATE: I tried my hand at Ajax and this is what I have so far, but it still doesn't work. I think the problem is the PHP script part, but I'm at a loss as to how to change that.

function addChildJobRow() {
                try {
                    lastrow++;
                    var refNum;
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function() {
                        if (this.readyState == 4 && this.status == 200) {
                            console.log(this.responseText);
                            refNum = this.responseText;
                        }
                    };
                    xhr.open('GET', '<?php echo $this->MJob->getNewJobRef(232); ?>', true);
                    xhr.onload = function() {
                        console.log('Test');
                    };
                    xhr.send();
                    //refNum = '<?php echo $this->MJob->getNewJobRef(232); ?>';
                    Elements.from(connectedjobtemplate({
                        rownum: lastrow,
                        cl: cl,
                        ref: refNum,
                        nysid: '',
                        dinNum: '',
                        warrantNum: ''
                    })).inject($('newChildJobTable'));
                } catch (e) {
                    .
                    .
                }
            }