XMLHttpRequest() send NS_ERROR_FAILURE for localhost with absolute OR relative path

Question

I get the following error in Firefox 31 ESR:

Error: NS_ERROR_FAILURE:

Source file:

http://localhost/Example/scripts/index.js Line: 18

Here is the same thing from Internet Explorer 11:

SCRIPT5022: InvalidStateError

Here is my script that does the call to the AJAX function:

ajax('post','standard/','part='+p+'&price='+q,'sequel_sub_object_key');

Here is my AJAX function:

function ajax(method,url,param_id_container_pos,id_container,id_focus,sequel)
{
 var methods = Array('get','head','post');

 if (window.XMLHttpRequest && in_array(method,methods))
 {
  xhr = new XMLHttpRequest();
  xhr.open(method,url,true);//Error triggers here for localhost.

  if (method=='post')
  {
   xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   xhr.send(param_id_container_pos);
  }

  xhr.send(null);

  xhr.onreadystatechange = function()
  {console.log('xhr.readyState = '+xhr.readyState);
   if (xhr.readyState=='4')
   {
    alert('xhr.responseText = '+xhr.responseText);
   }
  }
 }

Apparently Firefox and IE very vaguely think I'm doing cross site scripting ... on localhost ?

For the URL I've tried passing absolute and relative paths:

1. document.getElementsByTagName('base')[0].href+'standard/'

2. window.location.href

3. 'standard'

I've looked up a couple dozen pages most of which are here on Stack and the questions are all off.

1. I have zero intention of cross-site scripting.

2. I'm not changing the method .

3. I'm not using a different protocol (all HTTP, not HTTPS).

4. I'm not using any subdomains.

5. I never rely on or weaken my code with frameworks.

6. I do not care if the URL must be absolute or relative, I just need it to work.

7. This is for an intranet website.

8. The server and client are both the same computer.

9. The originating URL is formatted as: http://localhost/Client/standard/?http-query

10. The target URL is http://localhost/Client/standard/ .

11. The Apache Access log shows that the request goes through and returns HTTP 200.

12. An alert() immediately after open

13. None of the states for onreadystatechange are logged in the console.

14. Not all parameters need to be set when calling the ajax function.

What am I missing?

Answer 1

You're calling send() twice for the same XHR object, that's probably where the error comes from, as that would trigger an InvalidStateError as the object is not open anymore, it's already sending.

function ajax(method, url, param_id_container_pos, id_container, id_focus, sequel) {
    ....

        if (method == 'post') {
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(param_id_container_pos); // you're sending here
        }

        xhr.send(null); // and then again here, which triggers an error

        ..........

Also, you should generally url encode the data you're sending

var data = 'part=' + encodeURIComponent(p) +'&price=' + encodeURIComponent(q);
ajax('post', 'standard/', data, 'sequel_sub_object_key');

All together

var data = 'part=' + encodeURIComponent(p) +'&price=' + encodeURIComponent(q);

ajax('post', 'standard/', data, 'sequel_sub_object_key');

function ajax(method, url, param_id_container_pos, id_container, id_focus, sequel) {
    var methods = ['get', 'head', 'post'];

    if (window.XMLHttpRequest && methods.indexOf(method) != -1) {
        var xhr = new XMLHttpRequest();

        xhr.open(method, url, true);

        if (method == 'post') {
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.send(param_id_container_pos);
        } else {
            xhr.send(null);
        }

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert('xhr.responseText = ' + xhr.responseText);
            }
        }
    }
}