The XMLHttpRequest() function throws NS_ERROR_FAILURE when sending requests to localhost using either an absolute or relative path

Encountering an error in Firefox 31 ESR:

Error: NS_ERROR_FAILURE:

Source file:

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

Similar issue observed on Internet Explorer 11:

SCRIPT5022: InvalidStateError

The script used for AJAX function call is as follows:

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

Below is the code snippet for the 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);
   }
  }
 }

Seems like Firefox and IE suspect cross-site scripting issues even with localhost involved?

Tried both absolute and relative paths for the URL :

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

  2. window.location.href

  3. 'standard'

After going through several pages including Stack, no solution seems to fit.

  1. No intention of implementing cross-site scripting.

  2. Not altering the method.

  3. Solely using HTTP, not HTTPS.

  4. No involvement of subdomains.

  5. Avoiding frameworks entirely.

  6. Just need the URL to work, regardless of being absolute or relative.

  7. Intranet website scenario.

  8. Server and client are the same computer.

  9. Originating URL format - 

    http://localhost/Client/standard/?http-query

  10. Target URL - 

    http://localhost/Client/standard/
    .

  11. Apache Access log indicates request completion with HTTP 200 response.

  12. An alert() post open doesn't show all parameters.

  13. onreadystatechange states don't get logged in console.

  14. Optional parameters when calling the ajax function.

What aspect am I overlooking?

javascriptajaxlocalhost

Answer №1

You're making a mistake by calling send() twice for the same XHR object, causing an InvalidStateError due to attempting to send data when the object is already in the process of 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); // sending here
        }

        xhr.send(null); // then sending again triggers an error

        ..........

Additionally, it's recommended to URL encode the data before sending it.

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);
            }
        }
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The request sent by Ajax to the Spring MVC resulted in a 404 error

Having recently delved into Spring MVC, I am encountering an issue with my requests. The browser console is showing a 404 error message. What changes should I make to my code? My suspicion lies with the XML files being incorrect. Any guidance would be grea ...

ajaxspringspring-mvc

Use setTimeout and setInterval with the initial input without parentheses or double quotation marks

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var count=0; function increaseCount(){ document.getElementById('txt').value=count; count++; setTimeout(increaseCount(),1000); } </script> </head&g ...

javascriptjquerynode.jshtml

Create a PHP form that includes text and image inputs with the help of AdminLTE and integrates DropZone.js

I have been working with a template from adminLTE and you can check it out at the following link: . At this point, I am trying to upload images first and then use the image names as input text elements in my main form for submission. However, I have encou ...

javascriptphpfileuploaddropzone.js

What is the best way to compare dates in order to obtain the necessary results?

Question : Filter the JSON array to retrieve specific entries 1: All entries with name "Sam". 2: All entries with date "Dec 2019". // JSON Data provided below. var data = [{ "id":"27", "0":{ "name":"Sam", "date":"2021-02-28" ...

javascriptnode.jsangular

What could be the reason for the discrepancy between the values displayed in the two alerts? What is causing this difference in

Check out this JavaScript code snippet: var x = 3; var foo = { x: 2, baz: { x: 1, bar: function() { return this.x; } } } var go = foo.baz.bar; alert(go()); alert(foo.baz.bar()); When you run the two alert functions here, you&ap ...

javascriptfunctionoopobjectscope

Switching from constructors to Hooks in REACT

I am currently working on adding a modal example within a function in my project. I have a specific requirement to incorporate hooks instead of using the constructor in a class-based component. This is the code snippet with the class-based implementation: ...

javascriptreactjsconstructorreact-hooks

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

javascriptjqueryhtml

I am looking to generate div elements using JavaScript to avoid the tedious task of individually creating numerous divs

Instead of manually typing out multiple div tags in the HTML, I would like to dynamically generate them using JavaScript and display them on the page. Below is an attempt at achieving this, but it appears to not be functioning correctly. var arr = {}; f ...

javascriptjqueryhtml

Error 404: Page Not Found on Local XAMPP Server

Hello everyone! I'm currently experiencing some issues with XAMPP. I expected typing "localhost" into the browser would display something, but that hasn't been the case for me. I tried typing in localhost:8080 and it did work as it showed the XA ...

phpxamppwebserverlocalhost

What is the preferred method for initiating a call from a JSP to a servlet using an href link?

Currently, I am successfully using href to call a servlet URL. However, I would like to add parameters and receive a response from this request. Is it possible to achieve this? I attempted an AJAX call but encountered a CORS issue when trying to call an ex ...

javascriptjavaajaxjspservlets

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

javascriptjqueryhtmlcss

The addEventListener feature in Bootstrap 5.2.3 seems to be malfunctioning

I have a sample page with a Bootstrap dialog being returned from the server. I want to display it inside a DIV. However, when clicked, I receive this error: Uncaught TypeError: myModal.addEventListener is not a function It points to this line of code: ...

javascripttwitter-bootstrapbootstrap-5

Encountering a problem while retrieving JSON or XML data from a URL using jQuery AJAX

Here is a snippet of code that I've been working on: jQuery(document).ready(function(){ var user_key = "asdflk134"; var app_key = "pigasdb95r91bva"; var params = "app_key="+app_key+"&user_key="+user_key+"&format=xml"; jQuery ...

phpjavascriptjqueryajax

Modifying the data of a particular object in my rtk asynchronous thunk

I recently started using rtk and immer. I encountered an issue when trying to update my state with redux. For example, when a user logs in, I store their data in redux with the following structure: data = { "user_profile" : { "name&q ...

javascriptreactjsreact-reduxredux-toolkit

Tips for transferring data between two forms in separate iFrames

I'm trying to achieve a functionality where the data entered in one form can be submitted to another form within an iframe. The idea is to allow visitors to preview their selected car in the iframe, and if satisfied, simply press save on the first for ...

javascriptjqueryformsiframe

Exploring the capabilities of HTML5's file API along with Octokit.js to work with

I have been trying to create a form that allows users to upload binary data to GitHub using octokit.js. However, every time I attempt to do so, the data ends up corrupted on the GitHub side. Here is a minimal working example: http://jsfiddle.net/keddie/7r ...

javascripthtmlgitblobhtml5-filesystem

The Sizzle.js error, "Uncaught TypeError: undefined (reading 'expr')," is causing some trouble

$.expr[':'].containsCaseInsensitive = function (n, i, m) { return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; .expr is not recognized. To ensure it's defined, I included a CDN link below: <script src=&qu ...

javascript

What is the best way to modify Mega Menus using JavaScript?

I am currently managing a website that features "mega menu" style menus. These menus consist of nested <UL> elements and contain approximately 150 to 200 entries, resulting in a heavy load on the page and posing challenges for screen readers. To add ...

javascriptjqueryuser-interfacemenu

Sending the complete data from an HTML table to a web method

Is there a way to pass the data from a dynamically generated HTML table grid to a web method using jQuery AJAX? The table grid creates multiple rows on button click at runtime, and I need to send the entire table data. Please refer to the following snaps ...

javascriptjqueryhtmlasp.net

Errored Out: No content found in file_get_contents('php://input') following an ajax post

I've run into a dilemma and am seeking help. I recently encountered an issue where data sent to a PHP file through an AJAX function seemed to vanish when attempting to retrieve it in the PHP file. Strangely enough, a similar function I implemented yes ...

javascriptphpjqueryangularjsajax