Safari's Failure to Execute Ajax Requests

Question

Safari's Failure to Execute Ajax Requests

My HTML page includes an ajax request that is functioning properly on Firefox, but does not work on Safari. While debugging, I noticed that the readystate is undefined and the status is "". Can anyone suggest why it might not be working on Safari?

Javascript Code:

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "pegSolitaireSettings.html", true);
  xhttp.send();
}
function reloadGame() {
    location.reload();
}
</script>

HTML Code:

<div id="demo">
  <button type="button" onclick="loadDoc()">Settings</button>
  <div class="center-div">...</div>
</div>

javascript ajax

Answer 1

Answer №1

Firefox is automatically correcting the error, but Safari is not.

You have tried to request a relative URL: "pegSolitaireSettings.html"

To fix this issue, change it to:

"http://HOSTNAME/pegSolitaireSettings.html"

or

"//HOSTNAME/pegSolitaireSettings.html"

and it will work correctly.

Replace HOSTNAME with the domain name of the host.

Answer 2

Firefox is automatically correcting the error, but Safari is not.

You have tried to request a relative URL: "pegSolitaireSettings.html"

To fix this issue, change it to:

"http://HOSTNAME/pegSolitaireSettings.html"

or

"//HOSTNAME/pegSolitaireSettings.html"

and it will work correctly.

Replace HOSTNAME with the domain name of the host.

Answer 3

Answer №2

My current setup is as follows and I have no issues accessing

http://www.pegsolitaire.com/pegSolitaireSettings.html

in my web browser, indicating that the vhost is not the problem

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="CSS/styles.css" type="text/css">
<script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "http://www.pegsolitaire.com/pegSolitaireSettings.html", true);
      xhttp.send();
    }
function reloadGame() {
location.reload();
}
</script> 
</head>

<body>
<div id="demo">
  <button type="button" onclick="loadDoc()">Settings</button>
  <div id="gameInfo" align="center"> <br>
      <div class="values" id="totalTime"></div>
    </div>
</div>
</body>
</html>

Answer 4

My current setup is as follows and I have no issues accessing

http://www.pegsolitaire.com/pegSolitaireSettings.html

in my web browser, indicating that the vhost is not the problem

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="CSS/styles.css" type="text/css">
<script>
    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "http://www.pegsolitaire.com/pegSolitaireSettings.html", true);
      xhttp.send();
    }
function reloadGame() {
location.reload();
}
</script> 
</head>

<body>
<div id="demo">
  <button type="button" onclick="loadDoc()">Settings</button>
  <div id="gameInfo" align="center"> <br>
      <div class="values" id="totalTime"></div>
    </div>
</div>
</body>
</html>

Safari's Failure to Execute Ajax Requests

Answer №1

Answer №2

Similar questions

An easy way to switch animations using CSS display:none

Retrieve the name of the product from the corresponding parent element

In my attempt to assess the correlation between value 1 and a value in the preceding object, I am utilizing the *ngFor directive

formula for an arbitrary velocity vector

The onSubmit event handler seems to be malfunctioning within a Reactjs form

Axios transforms into a vow

Unsynchronized AJAX POST requests fail to function effectively

Using React's useState hook with an array of objects

Creating a linear video playback system

The function iframe.scrollTo() is not effective for scrolling through Excel or PowerPoint documents on an iPad

transferring information from Node.js/MongoDB to the front-end (invisible in the browser)

The significance of 'this' in an Angular controller

Tutorial: Using Laravel 5.6 to transfer selected value from Dropdown menu to PHP variable using Ajax on a single page

The response from the php AJAX request comes back blank

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

The AMP HTML file is unable to load due to the robots.txt file on https://cdn.ampproject.org restricting access

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

Enter key not triggering submission in jQuery UI autocomplete field

Is it possible to achieve a callback with jQuery after loading?

Create a word filter that doesn't conceal the words