No response from localhost with ajax request

Question

function sendSong(songN) {
console.log("sendSong ran");
    var tlh = new XMLHttpRequest(), url = "http://localhost/stream/musicgrabber.php";
    tlh.open("POST", url, true);
    tlh.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    console.log(tlh);
    //output=XMLHttpRequest {statusText: "", status: 0, response: "", responseType: "", responseXML: null…}

    tlh.onreadystatechange = function() { //readystate never changes.
    console.log(tlh); //this doesn't fire

    if(tlh.readyState == 4 && tlh.status == 200) {
        var return_data = tlh.responseText;
    }
        tlh.send("songname="+songN); //can't tell if this is sending or not.. nothing my php file is supposed to do, happens.
    };
}

Everything else in the javascript file works, my problem is with the request to the server.. I'm trying to post a POST request to localhost with a script running in my browser (userscript injects this page (Also from // localhost /), so I know that much works.) The connection is a modified snippet I found somewhere and altered to my information.

The javascript console in chrome is returning no other errors, and my PHP file doesn't have an errors.. below : musicgrabber.php

$ssn = file_get_contents("http://localhost/stream/currentsong.txt");
        if($ssn != $_POST['songname']) { 
            saveSong($_POST['songname']);
        }else{
            echo "You messed up, or it's the same song";
        }


function saveSong ($sname){
    $fo = fopen("currentsong.txt", 'w');
    fwrite($fo, $sname);
    fclose($fo);

    $fcheck = file_get_contents("songhistory.txt");
    if($fcheck){
    $hday = date('\[m\/d\/ g:i a\ \] \\n');
        $writeto = $sname + $hday + $fcheck;
        file_put_contents($writeto);
    }
}

The php doesn't run when the request with AJAX is sent, the text file isn't updated, and when I use $_GET with .php?songname=test it works..

Network returns 304, and 200 used from cache, and I'm still fairly new, I don't know how else to see if the connection is being made or not.

I'm not sure what I'm missing, but I've been working on this entire thing for about 12 hours, so any and all help is much appreciated..

==== Update ====

I managed to get the response working(-ish).. I get "XMLHttpRequest cannot load http:// localhost /stream/musicgrabber.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '//www.domainhere.com' is therefore not allowed access." any way to bypass this somehow? It's sending information over localhost, so don't know what to do to fix it..

Answer 1

why not try jquery post method

function sendSong(songN){
   $.post(
     url: "http://127.0.0.1/stream/musicgrabber.php",
     {data: "songname="+songN},
     function(response){
       alert(response);
     });
}

Answer 2

Found the solution to my problem.. all of my request protocols, or order of forming the request was out of whack.. here is the fixed part of my script.

function sendSong(songN) {
    console.log("sendSong ran");
    var tlh = new XMLHttpRequest(), url = "http://127.0.0.1/stream/musicgrabber.php";
    tlh.open("POST", url, true);
    tlh.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    tlh.send("songname=" + songN);
    console.log(tlh);

    tlh.onreadystatechange = function () {
        console.log(tlh);
        if (tlh.readyState == 4 && tlh.status == 200) {
            console.log(tlh.responseText);
        }
    };
}

For the cross-site problem, I fixed that with adding:

header("Access-Control-Allow-Origin: *");

to my musicgrabber.php. Some other minor things I need to work out, but the requests are going through, thank you everyone for the help you provided.