The link in the Ajax open() method

Question

The link in the Ajax open() method

I'm experiencing some trouble with my first Ajax program and I could really use some help in identifying the issue in the code.

The debugger is throwing an error that reads, "XMLHttpRequest cannot load http://localhost/function.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

function ajaxCall()
{
    var xhr;
    if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    } else {

    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200)
        {
            document.getElementById("block").innerHTML = this.responseText;
        }

    };
    xhr.open("GET", "http://localhost/function.txt",true);
    xhr.send();
}

function.txt

<html>
<head></head>
<body>
<h2>Ajax is working</h2>
</body>
</html>

javascript ajax

Answer 1

Answer №1

Have you checked if your JavaScript file is in the same location as your function.txt file?

If you want to learn more about CORS, visit this informative link: https://www.html5rocks.com/en/tutorials/cors/

UPDATE: I have successfully implemented this solution, so there might be some issue with your Apache configuration...

function executeFunction()
{
  var xhr = new XMLHttpRequest(),
      method = "GET",
      url = "function.txt";

  xhr.open(method, url, true);
  xhr.onreadystatechange = function () {
          if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
              alert(xhr.responseText);
          }
      };
  xhr.send();
}

executeFunction();

Answer 2

Have you checked if your JavaScript file is in the same location as your function.txt file?

If you want to learn more about CORS, visit this informative link: https://www.html5rocks.com/en/tutorials/cors/

UPDATE: I have successfully implemented this solution, so there might be some issue with your Apache configuration...

function executeFunction()
{
  var xhr = new XMLHttpRequest(),
      method = "GET",
      url = "function.txt";

  xhr.open(method, url, true);
  xhr.onreadystatechange = function () {
          if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
              alert(xhr.responseText);
          }
      };
  xhr.send();
}

executeFunction();

Answer 3

Answer №2

When attempting to make Ajax calls to a URL from a different domain, it is crucial that the domain explicitly allows this through the 'Access-Control-Allow-Origin' header. If you encounter an error, it likely means that your Ajax call is originating from another domain. To resolve this, consider using a relative path in your .open() method if your function.txt file is located in the same directory as your JavaScript.

Answer 4

When attempting to make Ajax calls to a URL from a different domain, it is crucial that the domain explicitly allows this through the 'Access-Control-Allow-Origin' header. If you encounter an error, it likely means that your Ajax call is originating from another domain. To resolve this, consider using a relative path in your .open() method if your function.txt file is located in the same directory as your JavaScript.

Answer 5

Answer №3

Trying to make a CORS request can be risky as most browsers block it by default. If you have control over the website you are targeting, consider enabling CORS through this link. If not, you may need to create a proxy page to handle the request on your behalf. This proxy page will forward the request to the target site and then return the response to the browser. While this workaround can be effective, be sure to properly manage all absolute paths from the target site.

Answer 6

Trying to make a CORS request can be risky as most browsers block it by default. If you have control over the website you are targeting, consider enabling CORS through this link. If not, you may need to create a proxy page to handle the request on your behalf. This proxy page will forward the request to the target site and then return the response to the browser. While this workaround can be effective, be sure to properly manage all absolute paths from the target site.

The link in the Ajax open() method

Answer №1

Answer №2

Answer №3

Similar questions

Using a React button to sort through an array

Display some results at the conclusion of eslint processing

Using JavaScript Regex to parse multi-line base64 encoded strings

The Prisma seed encountered an issue where the node reported a failure in the Unique constraint

I'm encountering difficulties in utilizing Ajax to upload images

What is the best way to sanitize or replace the $& characters (dollar sign and ampersand) within a JavaScript string that cannot be escaped?

An invalid argument error occurred in line 4618 of jQuery version 1.4.2, with a value of NaNpx specifically

Troubleshooting issues with the Bootstrap dropdown menu

turning off row rearrangement feature in jquery datatable

When a prop containing an SVG is sent for rendering, it may appear as [object Object]

Simple method for grouping and tallying elements within an array

Is it necessary to use the "new" keyword when utilizing JS closure to create objects?

extracting information from a database based on specific search criteria

Tips for inserting text to the left rather than the right using Jquery

Is it possible to delete an element from a JSON file by solely utilizing the element's ID?

Is it possible to capture and handle browser-specific errors that occur during an AJAX call? I am having trouble locating and capturing these errors

Getting REST API information and showcasing it on an HTML page

When using jQuery, the script will execute successfully only when running it chunk by chunk in the console, rather than running the

"Using jQuery to trigger a click event on a specific column within

Error in Angular: IE8 is expecting an identifier