jQuery Ajax returns "status: 0" only in some cases

Question

I have part of a psycholinguistic norming study on Amazon's Mechanical Turk where participants see a picture and then name it out loud. Their voice is recorded via HTML5's audio recording features, and the recording is uploaded to the server. There are three relevant files: the php file which displays the external question (external_question.php), the js file which hands all of the javascript (controller.js), and the php file to accept the file upload (accept_upload.php).

external_question.php set for live server:

<form id="question_form" name="question_form" action="https://www.mturk.com/mturk/externalSubmit" method="post">

external_question.php set for sandbox server:

<form id="question_form" name="question_form" action="https://workersandbox.mturk.com/mturk/externalSubmit" method="post">

Now, for some odd reason, whenever I'm using the live server, the response printed in the console by finalizeRecording() as a response from accept_upload that reads responseText:"", status:0, statusText:"error". (See below for functions and files.) Basically, nothing gets returned.

However, when I use the sandbox server, everything works just fine. The file is uploaded, and my response looks normal:

readyState: 4, responseText: "Page entered.<pre>Audio file successfully processe…↵ [size] => 540716↵ )↵↵)↵</pre>", status: 200, statusText: "OK"

I'm stumped! What could be causing my Ajax request to completely fail when I'm submitting the form to one URL, but then work flawlessly when I'm submitting to a different URL?

Relevant Files and Functions

controller.js (relevant function)

function finalizeRecording( blob ) {
    var myFormData = new FormData();
    myFormData.append('audioFile', blob, 'rec_' + workerId + '_' + stimulusName + '_' + assignmentId + '.wav');

    $.ajax({
        url: 'accept_upload.php',
        type: 'POST',
        processData: false, // important
        contentType: false, // important
        dataType : 'json',
        data: myFormData,
        complete: function(result) {
            console.log(result);
            $('form').trigger('submit');
        }
    });;
}

accept_upload.php (whole file)

<?php
echo "Page entered.";

$uploadDir = '../../WHEREVER/WHEREVER/';
chmod('uploads/', 0777);
$uploadFile = $uploadDir . basename($_FILES['audioFile']['name']);

echo '<pre>';
if (move_uploaded_file($_FILES['audioFile']['tmp_name'], $uploadFile)) {
    echo "Audio file successfully processed\n";
} else {
    echo "Audio file processing attempt unsuccessful\n";
}

echo 'Here is some more debugging info:';
print_r($_FILES);

print "</pre>";

?>

You are correct, I'm not sure why that's like that. But that wouldn't have an effect on the request not connecting. — Nick Anderegg, Jul 22 '15 at 01:34

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Cross Domain, you cannot make a call to a URI that is not the origin of the content. You can however get around this via CORS or using JSONP.

Here are some of my answers on this:

JQuery JSON Calls To PHP WebService Always Runs "Error" Callback

jQuery AJAX cross domain

edited May 23 '17 at 12:14

Community

1
1

answered Jul 22 '15 at 01:14

T McKeown

12,971
1
25
32

But if that's the issue, why is it happening on one server and not the other? Both of them are uploading the file from from a server different than where external_question.php is hosted. – Nick Anderegg Jul 22 '15 at 01:37

jQuery Ajax returns "status: 0" only in some cases

Relevant Files and Functions

1 Answers1