Issues with iPad's ajax functionality

Question

Issues with iPad's ajax functionality

After a lengthy process, I was tasked with developing a chat feature that functions flawlessly on various devices but seems to be glitchy specifically on the iPad and possibly the iPhone. The client heavily relies on their iPads for communication, so solving this issue has been my main focus for the past 7 months.

Finally, after months of troubleshooting, I have been able to identify the root cause of the problem.

The culprit appears to be the browser in iPads. I use JSON Ajax requests through jQuery library, and while the requests themselves are error-free, the iPad stops processing Ajax requests at a certain point. Despite thorough logging of every request, the server suddenly stops receiving any requests without any clear explanation. The client assures me they are actively using their iPad during this time to prevent it from locking up.

Even reducing the request rate to just 15 per minute did not resolve the issue.

Therefore, my inquiry is: Has anyone encountered a similar issue where iPads cease sending Ajax requests after a short period of time?

javascript ajax ipad safari

Answer 1

Answer №1

Placing this information here since there is no syntax highlighting in the comments.

Check out a very basic test page I created:

The code snippet is as follows:

<?

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

echo date("F j, Y, G:i:s a");
exit();

}

?>
<!doctype html>
<html>
<head>
    <title>AJAX test</title>
</head>
<body>
    <h1>Ajax Test</h1>
    <p>This page sends an AJAX request every 5 seconds and updates the div below with the returned date.</p>

    <div><p id="date"><?= date("F j, Y, G:i:s a") ?></p></div>
    <div><p><span id="count">0</span> updates made.</p></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    var count = 0;

    var getDate = function() {
        $.get('/tests/ajax.php', function(data) {
            $('#date').html(data);
            count = count + 1;
            $('#count').html(count);
        });
    }
    setInterval(getDate, 5000);
    </script>

</body>
</html>

I ran this for an hour without any issues on my fully updated iPad. The performance was consistent throughout.

I also tested this on Chrome and observed its behavior. Here's how it looked:

(Full size)

There were some anomalies where the number of event listeners initially remained constant, then spiked up to 56 before dropping back down to 1. The DOM Node Count also experienced fluctuations, reaching as high as 424. These behaviors are quite unexpected considering the simplicity of the code.

It's possible that your application may be tracking too many Dom Nodes or event listeners, causing the iPad to struggle to keep up with processing, or something similar.

Additionally, the memory usage steadily increased until garbage collection kicked in. While this is normal behavior, it might not be as efficient on the iPad.

Edit: When testing on a clean profile, I noticed that many Event listeners were due to extensions – the behavior remained consistent, though to a lesser extent. Background values were mostly at 0-1 rather than 15-20 as previously observed.

Answer 2

Placing this information here since there is no syntax highlighting in the comments.

Check out a very basic test page I created:

The code snippet is as follows:

<?

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

echo date("F j, Y, G:i:s a");
exit();

}

?>
<!doctype html>
<html>
<head>
    <title>AJAX test</title>
</head>
<body>
    <h1>Ajax Test</h1>
    <p>This page sends an AJAX request every 5 seconds and updates the div below with the returned date.</p>

    <div><p id="date"><?= date("F j, Y, G:i:s a") ?></p></div>
    <div><p><span id="count">0</span> updates made.</p></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    var count = 0;

    var getDate = function() {
        $.get('/tests/ajax.php', function(data) {
            $('#date').html(data);
            count = count + 1;
            $('#count').html(count);
        });
    }
    setInterval(getDate, 5000);
    </script>

</body>
</html>

I ran this for an hour without any issues on my fully updated iPad. The performance was consistent throughout.

I also tested this on Chrome and observed its behavior. Here's how it looked:

(Full size)

There were some anomalies where the number of event listeners initially remained constant, then spiked up to 56 before dropping back down to 1. The DOM Node Count also experienced fluctuations, reaching as high as 424. These behaviors are quite unexpected considering the simplicity of the code.

It's possible that your application may be tracking too many Dom Nodes or event listeners, causing the iPad to struggle to keep up with processing, or something similar.

Additionally, the memory usage steadily increased until garbage collection kicked in. While this is normal behavior, it might not be as efficient on the iPad.

Edit: When testing on a clean profile, I noticed that many Event listeners were due to extensions – the behavior remained consistent, though to a lesser extent. Background values were mostly at 0-1 rather than 15-20 as previously observed.

Issues with iPad's ajax functionality

Answer №1

Similar questions

Replacing variables in a function: A step-by-step guide

Error: Appwrite Login Authentication failed due to account.createEmailSession function not recognized as a valid function

The .php file responds with an empty string after an AJAX request

Receiving a parseerror when trying to use AJAX to retrieve cross-domain data using WCF

The PHP webpage is up and running smoothly, however, there seems to be an issue with the

When the Json payload is lengthy, an Ajax request to an ASP.NET MVC Controller results in a 404 error

Alter the color of the dropdown background when it is changed

Is there any purpose to incorporating an AngularJS directive within a comment?

Receiving a null response from an Ajax post request

Tips for troubleshooting and fixing an Ajax Request in Laravel

Adjust the CSS property of a div to have a fixed position when scrolling

Acquiring the Facebook profile_id and incorporating it into a URL using a Chrome Extension

The Mongoose _id seems to be malfunctioning when a custom value is used instead of the default value

Exploring A-Frame VR: Understanding the Distinction between Cursor and Raycaster

Utilizing pixel values for Material-UI breakpoints rather than using the default sm, md, lg, xl options

Vue Websockets twofold

Prevent resizable elements from expanding to 100% of the screen's height and width

Sliding through various background options

Assign individual heights to multiple iFrames according to their content's height

An error occurred due to an unexpected identifier, '_classCallCheck', while the import call was expecting exactly one