1

I am just following a tutorial in AJAX and I discover there is an error:[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Here are my codes

index.php

<script type="text/javascript">
    function getcontent() 
    {
        //creating an instance of the HTTP request object
        var xmlHttp = new XMLHttpRequest();

        //specify the  method and url
        xmlHttp.open("GET", "game-list.php", false);

        xmlHttp.send(null);

        //xmlHttp.responseText = game-list.php

        var element = document.getElementByID("content");
        element.innerHTML = xmlHttp.responseText;
    }
</script>

<form>
    <input onclick="getcontent()" type="button" value="get content">
</form>

<div id="content">
</div>

game-list.php

<ul>
    <li>Witcher 3</li>
    <li>Mass Effect 3</li>
    <li>Heroes of Might & Magic III</li>
    <li>World of Warcraft</li>
</ul>

I have no idea on this error and I just following a tutorial

the errors from my chrome browser

index.php:8 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
getcontent @ index.php:8
onclick @ index.php:20
index.php:14 Uncaught TypeError: document.getElementByID is not a function
    at getcontent (index.php:14)
    at HTMLInputElement.onclick (index.php:20)
getcontent @ index.php:14
onclick @ index.php:20
Kaiido
  • 123,334
  • 13
  • 219
  • 285
Boss Pogs
  • 137
  • 1
  • 14
  • Could you please provide more context on the issue, like where your are seeing error, what browser, etc – Chif Sep 20 '19 at 06:24
  • Take a look at my edited post – Boss Pogs Sep 20 '19 at 06:36
  • Indeed, it's been years since this deprecation started, and for good reasons, synchronous AJAX will block your UI. Whatever the tutorial you are following it must be a few years old, and you should really consider abandon it in favor of one more up to date. – Kaiido Sep 20 '19 at 06:36
  • Thanks Kaiido. The tutorial that I followed was uploaded on Feb 2019 so I thought it is updated – Boss Pogs Sep 20 '19 at 06:39
  • Wow can you link to it? They need some bad comments from anonymous web surfers :P Also, in the error you posted, the real blocking one is that you call `getElementByID` instead of `getElementById` (case matters) – Kaiido Sep 20 '19 at 06:40
  • Yes that one getElementById typo error now it works but when I check the console there is still the depecrated one – Boss Pogs Sep 20 '19 at 06:44

0 Answers0