AJAX failing to retrieve data on a bluehost server

Question

AJAX failing to retrieve data on a bluehost server

I have a dilemma with two basic web pages.

test.php:

<div id="demo"></div>


<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", "sse.php", true);
  xhttp.send();
}

var myVar = setInterval("loadDoc()", 2000);
</script>

sse.php

<?php
echo time();
?>

The issue is that it runs perfectly on my personal computer. Every two seconds, sse.php is fetched and the content in the demo-div updates accordingly.

However, when I try to run the same script on my Bluehost website, it only fetches once (after two seconds) and then stops working.

An interesting observation is that when I manually refresh the sse.php page in another tab, the content in the demo div changes! I've tried troubleshooting the problem but I'm running out of ideas.

Any suggestions or insights are greatly appreciated!

Thank you.

javascript ajax shared-hosting

Answer 1

Answer №1

Upon conducting further investigation, I discovered that adding the following lines at the beginning of my sse.php file and then refreshing the page resolved the issue at hand. Much appreciated.

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

echo time();
?>

Answer 2

Upon conducting further investigation, I discovered that adding the following lines at the beginning of my sse.php file and then refreshing the page resolved the issue at hand. Much appreciated.

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

echo time();
?>

Answer 3

Answer №2

I encountered a similar issue which I detailed here:

AJAX function request causing interruption when called again - without using jQuery

Feel free to grab the code snippet I provided and test it out.

UPDATE:

An example call would be:

ajaxFetchData('http://someurl.com', 'targetElementId');

Also, here are the accompanying functions:

function ajaxFetchData(endpoint, elemId)
{
var req;
if (window.XMLHttpRequest) 
{ 
    req = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{ 
    try 
    {
        req = new ActiveXObject('Msxml2.XMLHTTP');
    } 
    catch (e) 
    {
    try {
        req = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
    }
}

if (!document.getElementById(elemId))
{
    return false;
}
var element = document.getElementById(elemId); /* <= update: added var */
showAjaxLoader(element);

/* EVENT HANDLERS COULD BE OMITTED IF NOT NEEDED */
req.addEventListener("progress", function(event){handleAjaxResponse(event, element)}, false);
req.addEventListener("load", function(event){handleAjaxResponse(event, element)}, false);
req.addEventListener("error", function(event){handleAjaxResponse(event, element)}, false);
req.addEventListener("abort", function(event){handleAjaxResponse(event, element)}, false);

req.onreadystatechange = function() 
{
    if(req.readyState === 4) 
    { 
        if(req.status === 200) 
        { 
            element.innerHTML  = req.responseText;
        }
        else
        {
            element.innerHTML = '<div id="'+id+'">Error loading data.</div>';
        }
    }
};
/* in my scenario, asynchronous AJAX request is used (true) */
req.open('GET', endpoint, true);
req.send(null);
}
/* LOADING ANIMATION CAN BE DISPLAYED HERE */
function showAjaxLoader(elem)
{
idBase = elem.id.split("_");
id = idBase[0]+"_loading_ajax";
elem.innerHTML = '<div id="'+id+'">Loading</div>';
}

/* OMITTING EVENT HANDLER FUNCTIONS IF UNNECESSARY */
function handleAjaxResponse(e) 
{
// Responding to each event type
switch(e.type)
{
    case 'error':
    {
        idBase = elem.id.split("_");
        id = idBase[0]+"_error_ajax";
        elem.innerHTML = '<div id="'+id+'">Server not accessible. Error loading data.</div>';
    } break;
}
}

Answer 4

I encountered a similar issue which I detailed here:

AJAX function request causing interruption when called again - without using jQuery

Feel free to grab the code snippet I provided and test it out.

UPDATE:

An example call would be:

ajaxFetchData('http://someurl.com', 'targetElementId');

Also, here are the accompanying functions:

function ajaxFetchData(endpoint, elemId)
{
var req;
if (window.XMLHttpRequest) 
{ 
    req = new XMLHttpRequest();
} 
else if (window.ActiveXObject) 
{ 
    try 
    {
        req = new ActiveXObject('Msxml2.XMLHTTP');
    } 
    catch (e) 
    {
    try {
        req = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
    }
}

if (!document.getElementById(elemId))
{
    return false;
}
var element = document.getElementById(elemId); /* <= update: added var */
showAjaxLoader(element);

/* EVENT HANDLERS COULD BE OMITTED IF NOT NEEDED */
req.addEventListener("progress", function(event){handleAjaxResponse(event, element)}, false);
req.addEventListener("load", function(event){handleAjaxResponse(event, element)}, false);
req.addEventListener("error", function(event){handleAjaxResponse(event, element)}, false);
req.addEventListener("abort", function(event){handleAjaxResponse(event, element)}, false);

req.onreadystatechange = function() 
{
    if(req.readyState === 4) 
    { 
        if(req.status === 200) 
        { 
            element.innerHTML  = req.responseText;
        }
        else
        {
            element.innerHTML = '<div id="'+id+'">Error loading data.</div>';
        }
    }
};
/* in my scenario, asynchronous AJAX request is used (true) */
req.open('GET', endpoint, true);
req.send(null);
}
/* LOADING ANIMATION CAN BE DISPLAYED HERE */
function showAjaxLoader(elem)
{
idBase = elem.id.split("_");
id = idBase[0]+"_loading_ajax";
elem.innerHTML = '<div id="'+id+'">Loading</div>';
}

/* OMITTING EVENT HANDLER FUNCTIONS IF UNNECESSARY */
function handleAjaxResponse(e) 
{
// Responding to each event type
switch(e.type)
{
    case 'error':
    {
        idBase = elem.id.split("_");
        id = idBase[0]+"_error_ajax";
        elem.innerHTML = '<div id="'+id+'">Server not accessible. Error loading data.</div>';
    } break;
}
}

AJAX failing to retrieve data on a bluehost server

Answer №1

Answer №2

Similar questions

Picture in a clear background without any alteration

Limiting the scope of the jQuery scrollToFixed functionality within various nested DIV elements

Float and tap

What is the reason behind Bootstrap 5's decision to have the getOrCreateInstance() method automatically toggle the collapsible element upon creation?

Vuex failing to return object

CodeIgniter's feature of a dynamically dependent dropdown list

Issue with Ajax functionality not functioning properly in Visual Studio for Windows (Blend)

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Exploring a property within a JavaScript object

Dynamic Visualizations with D3.js: Live Charts for Real-Time

Data from Firebase persists even after removal

Optimizing Your HTML/CSS/JavaScript Project: Key Strategies for Modular

Ensuring uniform sizing of anchor text using jQuery

Dealing with router parameters of an indefinite number in Angular 5: A comprehensive guide

Translating Angular strings from identical origins

Displaying a dynamic menu using Angular's ngFor loop

Using jQuery's post method in your WordPress website

Tips on embedding d3 into an HTML document

Avoid using the `target` attribute for `onclick` in Material UI components with React

When implementing multiple AJAX onclick calls, only one item is able to respond