Synchronous XMLHttpRequest on the main thread is deprecated / AJAX & API - php

Question

I am looking to create an ajax function with the MailChimp list API however I am facing the following error 'Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects '. PHP code works fine but when I try to introduce ajax it all goes wrong.
Honestly, I don't know where to start with this as have little experience in using ajax with API.
Could someone please be kind enough to review the below code and give me their thoughts?
$(document).ready(function() {
$("#subCard").submit(function(event) {
event.preventDefault();
var emailSub = $("#emailSub").val();
var fNameSub = $("#fNameSub").val();
var lNameSub = $("#lNameSub").val();
var subSubmit = $("#subSubmit").val();
$(".form-message").load("action.php", {
emailSub: emailSub,
fNameSub: fNameSub,
lNameSub: lNameSub,
subSubmit: subSubmit
});
});
});
<?php
session_start();
if(isset($_POST['subSubmit'])){
$emailSub = $_POST['emailSub'];
$fNameSub = $_POST['fNameSub'];
$lNameSub = $_POST['lNameSub'];
if(!empty($emailSub) && !filter_var($emailSub, FILTER_VALIDATE_EMAIL) === false){
// MailChimp API credentials
$apiKey = 'user API key';
$listID = 'user list ID';
// MailChimp API URL
$memberID = md5(strtolower($emailSub));
$dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
$url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID;
// member information
$json = json_encode([
'email_address' => $emailSub,
'status' => 'subscribed',
'merge_fields' => [
'FNAME' => $fNameSub,
'LNAME' => $lNameSub
]
]);
// send a HTTP POST request with curl
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
$result = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
// store the status message based on response code
if ($httpCode == 200) {
$_SESSION['msg'] = '<p style="color: #ffffff">You have successfully subscribed to AquaCodeStudio.</p>';
} else {
switch ($httpCode) {
case 214:
$msg = 'You are already subscribed.';
break;
default:
$msg = 'Sorry a problem occurred, please try again.';
break;
}
$_SESSION['msg'] = '<p style="color: #EA4335">'.$msg.'</p>';
}
}else{
$_SESSION['msg'] = '<p style="color: #EA4335">Please enter a valid email address.</p>';
}
}
// redirect to homepage
header('location:about.php');
?>

Answer 1

.load in itself is synchronous, unless something else is specified in the global jQuery AJAX settings.
The redirect to the about.php page after processing the form data seems to be the culprit here.
It actually redirects the AJAX request in the background - so first the data is send to load.php and processed there, and then the browser makes another (GET) request for about.php. What is then inserted into your original document is the content of the latter. Not sure how exactly this causes the “Synchronous…” warning, but maybe that page itself contains code that makes AJAX requests again, or something like that. (.load, when executed without a suffixed selector expression, executes <script> elements contained in the loaded HTML automatically.)