Я хочу посмотреть, что именно происходит, когда запрос ajax создается и отправляется на сервер. Поэтому я использовал инструмент проверки в chrome (проверка -> источники -> использование точки останова). У меня есть два ajax запроса, чтобы каждый запрос к указанному c адресу и получал свои данные. Я ставлю точку останова в строке «5» и нажимаю кнопку «перейти к следующему вызову функции». Я вижу, что происходит до строки 26, и после этого запроса я не могу нажать «перейти к следующему вызову функции» и не вижу, что происходит во втором запросе. ( ПРИМЕЧАНИЕ: В этот момент » AdditionalPersonInfo "установлено, пока я не видел конфигурацию этого вызова ajax и процесс отправки.) Пожалуйста, объясните мне, что происходит, если я должен что-то знать, пожалуйста, представьте какой-нибудь полезный ресурс и как я могу увидеть оба процесса.
Вот мой HTML файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>table of content</title>
</head>
<body>
<button onclick="getData()">recieve data from site</button>
<script src="./js/index.js"></script>
</body>
</html>
Вот мой сценарий:
let personInfo, additionalPersonInfo;
let allInfo;
function getData() {
let data; //break point here
let xhttpForPersonInfo = new XMLHttpRequest();
let xhttpForAdditionalPersonInfo = new XMLHttpRequest();
xhttpForPersonInfo.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
data = JSON.parse(this.responseText);
setPersonInfoAndAdditionalPersonInfo(data, "personInfo");
}
}
xhttpForAdditionalPersonInfo.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
data = JSON.parse(this.responseText);
setPersonInfoAndAdditionalPersonInfo(data, "additionalPersonInfo");
}
}
xhttpForPersonInfo.open('GET', 'https://api.npoint.io/177cea9c157de479d51b', true);
xhttpForPersonInfo.send(); //chrome get out from debugging mode and I can't see below
xhttpForAdditionalPersonInfo.open('GET', 'https://api.npoint.io/dc6cb50568fac72a4105', true);
xhttpForAdditionalPersonInfo.send();
}
function setPersonInfoAndAdditionalPersonInfo(data, personInfoOrAdditionalPersonInfo){
switch (personInfoOrAdditionalPersonInfo) {
case "personInfo":
personInfo = data;
break;
case "additionalPersonInfo":
additionalPersonInfo = data;
}
}