Complete ajax call before body loads

Question

I read in w3schools that there are several ways an external script can be executed:

1. If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
2. If async is not present and defer is present: The script is executed when the page has finished parsing
3. If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page.

So, if i understood correctly, since i have the following script in the head section of my html file without using async or defer it should first be executed and then the browser will continue parsing.

<script type="text/javascript" src="js/display.js"></script>

display.js

$.ajax({
    url:"fetch_items.php"
});

fetch_items.php fetches some items from the database and puts them in an array $_SESSION("my_array") .

So inside the body section of the html folder i use the values that reside in $_SESSION("my_array") to show some content.

<?php 
if(isset($_SESSION["my_array"]))
{
?>
 <!-- html code echoing values from session -->
<?php
}
?>

but $_SESSION["my_array"] isn't set yet so the content doesn't appear. (if i reload the page the content will appear correctly)

Why is this happening? How can i ensure that the script has completed it's execution before the body loads? is the following refers only to scripts: If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page.

Answer 1

AJAX stands for "Asynchronous JavaScript and XML". So it makes asynchronous request from your browser by running your javascript code. Your current code makes request from browser to server. Then server saves your array to session by using your PHP code and not reloads the page. That is why your array not printing immediately.

Bad solution: Refreshing page on success method of your ajax request.

Better solution: Don't keep your array in session if it is not really necessary. Return your array in the method at "fetch_items.php". Then print the array using success callback of the ajax request.

Here is an example for usage of success and print method: Ajax response inside a div

For more information you can read jquery api documentation: http://api.jquery.com/jquery.ajax/

Answer 2

尝试在ajax调用参数中放入async : false 。

Answer 3

This is because of asynchronous calls. I encountered similar issue and fixed it by adding async:false in AJAX . You may see the below code fragment I used.

 $.ajax({
        type: "GET",
        url: "fetch_items.php",
        data: {},
        async : false, // make it false
        success: function (html) {
            alert (html);
        }, error: function (error) {
            alert (error);
        }
    });