Поскольку я новичок в программировании и пытаюсь изучать несколько языков одновременно, я собрал несколько файлов в одну папку, чтобы проверить, как эти разные языки / технологии работают вместе.В этой папке у меня есть два файла php (включая основной файл, который я тестирую; index.php), файл css, файл json и два файла javascript.Проблема в том, что когда я запускаю его в браузере с использованием сервера Apache XAMPP, сценарии, которые ссылаются на файлы «script.js» и «secondscript.js» в файле «index.php», выполняются неправильнозаказ в зависимости от ситуации.Я ожидал, что они оба будут выполнены в том порядке, в котором они появились в файле, но если я использую Chrome, 'secondscript.js' всегда выполняется первым, даже если я меняю порядок, в котором они записаны в файле, и если я использую Firefox'script.js' всегда выполняется первым.Вот код:
index.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <!-- ADD CSS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ADD JQUERY -->
<script> window.jQuery || document.write('<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"><\/script>')</script> <!-- ADD JQUERY BACKUP -->
<script src="secondscript.js"></script>
<!-- ADD JQUERY TEST -->
<script src="script.js"></script>
<!-- ADD JAVASCRIPT -->
</head>
<body>
<div id="ajaxdiv"></div>
<!-- ADD AJAX TEST -->
<?php include 'server.php'?>
<!-- ADD PHP -->
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!-- ADD BACKUP FOR JSLESS BROWSER -->
</body>
</html>
script.js:
document.write("<h1>Header</h1>")
Request = new XMLHttpRequest()
Request.open('GET', 'json.json')
Request.onload = function (){
Data = JSON.parse(Request.responseText)
p = document.createElement('p')
node = document.createTextNode(Data[1].Three)
p.appendChild(node)
document.getElementById("ajaxdiv").appendChild(p)
}
Request.send()
secondscript.js:
$(function() { alert('Alert') })
server.php:
<?php echo 'PHP TEST'?>
style.css:
body {background-color: pink}
h1 {color: red}
p {color: purple}
json.json:
[{"One": "A", "Two": "B"}, {"Three": "C", "Four": "D"}]
edit: «выполнить сначала», я имею в виду, кажется,таким образом, потому что «C», который появляется через ajax, появляется до или после предупреждающего сообщения в зависимости от браузера.