Невозможно получить вывод AJAX с функцией onClick

Question

Я очень новичок в AJAX и только начал эту тему.У меня есть этот XML-файл, который я должен использовать вызов AJAX, чтобы показать информацию, которая требуется.Я анализирую все элементы тега в соответствующем коде JavaScript, но когда я нажимаю кнопку, я не могу отобразить то, что я хочу, даже если я просто хочу отобразить заголовок файла XML.Снимок экрана ниже показывает ожидаемый результат.

function makeAjaxQueryWeather(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
  };
  xhttp.open("GET", "A8.xml", true);
  xhttp.send();
}

// handler for the readyState change
function readyStateChangeHandler(xhttp){

  if (xhttp.readyState == 4){
    // readyState = 4 means DONE

    if(xhttp.status == 200){
      // status = 200 means OK

      handleStatusSuccess(xhttp);

    }else{
      // status is NOT OK

      handleStatusFailure(xhttp);

    }
  }

}

// XMLHttpRequest failed
function handleStatusFailure(xhttp){

  // display error message

  var displayDiv = document.getElementById("display");

  displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}

// XMLHttpRequest success
function handleStatusSuccess(xhttp){

  var xml = xhttp.responseXML;

  // parse the XML into an object
  var weatherObj = parseXMLWeather(xml);

  // display the object on the page
  displayWeather(weatherObj);
}

// parse the XML into an object
function parseXMLWeather(xml){

  // print XML on the console
  // console.log(xml);

  //create an object to hold the information in the xml file
  var weatherObj = {};
  
  // get the forecast XML element
  var forecastElement = xml.getElementsByTagName("forecast")[0];
  // get the query location
  weatherObj.queryLocation = forecastElement.getAttribute("queryLocation");
  // get the query time
  weatherObj.queryTime = forecastElement.getAttribute("queryTime");
  
  //get the weather XML element
  var weatherElementList = xml.getElementsByTagName("weather")[0];
  weatherObj.YYYYMMDD = weatherElementList.getAttribute("yyyymmdd");
  
  //get the rest of the child XML element in weather
  weatherObj.list = [];
  for(var i=0; i < weatherElementList.length; i++) {
  
    var weatherElement = weatherElementList[i];
	
	var weather1Obj = parseWeatherElement(weatherElement);
	
	weatherObj.list.push(weather1Obj);
  
  }
  return weatherObj;
  
}

// parse a stock XML element into a JavaScript stock object
function parseWeatherElement(weatherElement) {
    var weather1Obj = {};
	
	//get all elements
	var yearElement = weatherElement.getElementsByTagName("year")[0];
	weather1Obj.year = yearElement.textContent;
	var monthElement = weatherElement.getElementsByTagName("month")[0];
	weather1Obj.month = monthElement.textContent;
	var dateElement = weatherElement.getElementsByTagName("date")[0];
	weather1Obj.date = dateElement.textContent;
	var dayOfWeekElement = weatherElement.getElementsByTagName("dayOfWeek")[0];
	weather1Obj.dayOfWeek = dayOfWeekElement.textContent;
	var overallElement = weatherElement.getElementsByTagName("overall")[0];
	weather1Obj.overall = overallElement.textContent;
	var highestElement = weatherElement.getElementsByTagName("highest")[0];
	weather1Obj.highest = highestElement.textContent;
	var lowestElement = weatherElement.getElementsByTagName("lowest")[0];
	weather1Obj.lowest = lowestElement.textContent;
	
	return weather1Obj;

}

// display the weather object on the page
function displayWeather(weatherObj){
  // print the weatherObj on the console
  // console.log(weatherObj);

  // construct HTML code to display weather information
  var html = "<h1>" + weatherObj.queryLocation + weatherObj.queryTime "</h1>";
  html = html + weatherObj.yyyymmdd;

  // show the constructed HTML code in the display div
  var displayDiv = document.getElementById("display");
  displayDiv.innerHTML = html;
}

<h1>Part 2</h1>
<button onClick="makeAjaxQueryWeather()">
Click here to view weather forecast 1
</button>
<br/> <br/>
<div id="display">
</div>

Это XML-файл:

Answer 1

Вам необходимо проанализировать строку XML в нужный документ XML DOM, используя DOMParser():

Примерно так:

// Convert XML string to proper XML DOM document.
function parseXML(xmlString) {
  return new window.DOMParser().parseFromString(xmlString, "text/xml");
}

Затем вы можете правильно проанализировать содержимое строки XML из функции XMLHttpRequest, которая возвращает строку XML.

Вышеприведенная функция должна быть реализована в этой функции:

// XMLHttpRequest success
function handleStatusSuccess(xhttp) {
  var xml = xhttp.response; // Change to xhttp.response.
  xml = parseXML(xml); // Call the parseXML function here, where xml parameter is a string.

  // parse the XML into an object
  var weatherObj = parseXMLWeather(xml);
  // display the object on the page
  displayWeather(weatherObj);
}

Последнее изменениев этом:

var html = "<h1>" + weatherObj.queryLocation + " " + weatherObj.queryTime + "</h1>";
html += weatherObj.YYYYMMDD; // Use weatherObj.YYYYMMDD.

Затем вы получите что-то вроде этого:

function makeAjaxQueryWeather() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      readyStateChangeHandler(this);
    }
  };
  xhttp.open("GET", "https://gist.githubusercontent.com/dannyjhonston/e56a6461d88ebd43d039bac215fa4eb4/raw/af9b5883d35097e8a8a68b619c3b0a9f7a51dc7d/A8.xml", true);
  xhttp.send();
}

// handler for the readyState change
function readyStateChangeHandler(xhttp) {
  if (xhttp.readyState == 4) {
    // readyState = 4 means DONE
    if (xhttp.status == 200) {
      // status = 200 means OK
      handleStatusSuccess(xhttp);
    } else {
      // status is NOT OK
      handleStatusFailure(xhttp);
    }
  }
}

// XMLHttpRequest failed
function handleStatusFailure(xhttp) {
  // display error message
  var displayDiv = document.getElementById("display");
  displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}

// XMLHttpRequest success
function handleStatusSuccess(xhttp) {
  var xml = xhttp.response;
  xml = parseXML(xml);

  // parse the XML into an object
  var weatherObj = parseXMLWeather(xml);
  // display the object on the page
  displayWeather(weatherObj);
}

// parse the XML into an object
function parseXMLWeather(xml) {

  // print XML on the console
  // console.log(xml);

  //create an object to hold the information in the xml file
  var weatherObj = {};

  // get the forecast XML element
  var forecastElement = xml.getElementsByTagName("forecast")[0];
  // get the query location
  weatherObj.queryLocation = forecastElement.getAttribute("queryLocation");
  // get the query time
  weatherObj.queryTime = forecastElement.getAttribute("queryTime");

  //get the weather XML element
  var weatherElementList = xml.getElementsByTagName("weather")[0];
  weatherObj.YYYYMMDD = weatherElementList.getAttribute("yyyymmdd");

  //get the rest of the child XML element in weather
  weatherObj.list = [];
  for (var i = 0; i < weatherElementList.length; i++) {
    var weatherElement = weatherElementList[i];
    var weather1Obj = parseWeatherElement(weatherElement);
    weatherObj.list.push(weather1Obj);
  }
  return weatherObj;
}
// Convert XML string to proper XML DOM document.
function parseXML(xmlString) {
  return new window.DOMParser().parseFromString(xmlString, "text/xml");
}

// parse a stock XML element into a JavaScript stock object
function parseWeatherElement(weatherElement) {
  var weather1Obj = {};

  //get all elements
  var yearElement = weatherElement.getElementsByTagName("year")[0];
  weather1Obj.year = yearElement.textContent;
  var monthElement = weatherElement.getElementsByTagName("month")[0];
  weather1Obj.month = monthElement.textContent;
  var dateElement = weatherElement.getElementsByTagName("date")[0];
  weather1Obj.date = dateElement.textContent;
  var dayOfWeekElement = weatherElement.getElementsByTagName("dayOfWeek")[0];
  weather1Obj.dayOfWeek = dayOfWeekElement.textContent;
  var overallElement = weatherElement.getElementsByTagName("overall")[0];
  weather1Obj.overall = overallElement.textContent;
  var highestElement = weatherElement.getElementsByTagName("highest")[0];
  weather1Obj.highest = highestElement.textContent;
  var lowestElement = weatherElement.getElementsByTagName("lowest")[0];
  weather1Obj.lowest = lowestElement.textContent;

  return weather1Obj;
}

// display the weather object on the page
function displayWeather(weatherObj) {
  // print the weatherObj on the console
  // console.log(weatherObj);

  // construct HTML code to display weather information
  var html = "<h1>" + weatherObj.queryLocation + " " + weatherObj.queryTime + "</h1>";
  html += weatherObj.YYYYMMDD;

  // show the constructed HTML code in the display div
  var displayDiv = document.getElementById("display");
  displayDiv.innerHTML = html;
}

<h1>Part 2</h1>
<button onClick="makeAjaxQueryWeather()">
Click here to view weather forecast 1
</button>
<br/> <br/>
<div id="display">
</div>

---

Обновление: Сохраняйте код как можно проще.

Анализируя то, что вам нужно сделать, вам в основном нужно:

1. Получить содержимое XML с помощью XMLHttpRequest. Итак, в этом примере я сделал вспомогательную функцию для выполнения AJAXЗапросы легко, когда вы хотите.

---

var newXHR = null;
function sendXHR(type, responseType, url, data, successCallback, failureCallback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.responseType = responseType;
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (this.status === 200) {
                successCallback(this.response);
            } else {
                failureCallback(this.response);
            }
        }
    };
}

Итак, вы можете использовать таким образом:

sendXHR("GET", "text", "https://gist.githubusercontent.com/dannyjhonston/e56a6461d88ebd43d039bac215fa4eb4/raw/af9b5883d35097e8a8a68b619c3b0a9f7a51dc7d/A8.xml", null, function (response) {
    // Success you can use the response object. In this case you get the XML string content.
}, function (error) {
    displayDiv.innerHTML = "XMLHttpRequest failed: status " + error;
});

Анализ содержимого строки XML в XML-документе.

---

function parseXML(xmlString) {
    return new window.DOMParser().parseFromString(xmlString, "text/xml");
}

Итак, с предыдущим кодом вы можете использовать функцию parseXML таким образом:

sendXHR("GET", "text", "https://gist.githubusercontent.com/dannyjhonston/e56a6461d88ebd43d039bac215fa4eb4/raw/af9b5883d35097e8a8a68b619c3b0a9f7a51dc7d/A8.xml", null, function (response) {
    var xml = parseXML(response);
}, function (error) {
    displayDiv.innerHTML = "XMLHttpRequest failed: status " + error;
});

Преобразование из XML в объект JavaScript. С помощью функции parseXML(response) вы получили XML DOM, так что теперь вы можете просматривать каждый узел в документе XML для создания объекта JavaScript в соответствии с тем, чтовам нужно.

---

function convertXMLToObject(xml) {
    var obj = {}, forecastElement = xml.children[0];
    if (forecastElement) {
        obj.queryLocation = forecastElement.getAttribute("queryLocation");
        obj.queryTime = forecastElement.getAttribute("queryTime");
        obj.list = [];
        var weatherElement, weatherElements = forecastElement.children, weatherElementsLen = weatherElements.length;
        for (var i = 0; i < weatherElementsLen; i++) {
            weatherElement = weatherElements[i];
            if (weatherElement) {
                obj.list.push({
                    yyyymmdd: weatherElement.getAttribute("yyyymmdd"),
                    year: weatherElement.children[0].textContent,
                    month: weatherElement.children[1].textContent,
                    date: weatherElement.children[2].textContent,
                    dayOfWeek: weatherElement.children[3].textContent,
                    overall: weatherElement.children[4].textContent,
                    overallCode: weatherElement.children[5].textContent,
                    highest: weatherElement.children[6].textContent,
                    lowest: weatherElement.children[7].textContent
                });
            }
        }
    }
    return obj;
}

С помощью функции выше вы получаете следующий объект JavaScript:

{
  "queryLocation": "Whoville",
  "queryTime": "22/07/2017 15:30:45",
  "list": [
    {
      "yyyymmdd": "20170727",
      "year": "2017",
      "month": "7",
      "date": "27",
      "dayOfWeek": "THU",
      "overall": "Considerable clouds",
      "overallCode": "cloudy",
      "highest": "18",
      "lowest": "5"
    },
    {
      "yyyymmdd": "20170726",
      "year": "2017",
      "month": "7",
      "date": "26",
      "dayOfWeek": "WED",
      "overall": "Cloudy with thunderstorm",
      "overallCode": "thunderstorm",
      "highest": "15",
      "lowest": "4"
    },
    {
      "yyyymmdd": "20170725",
      "year": "2017",
      "month": "7",
      "date": "25",
      "dayOfWeek": "TUE",
      "overall": "Considerable",
      "overallCode": "cloudy",
      "highest": "18",
      "lowest": "5"
    },
    {
      "yyyymmdd": "20170724",
      "year": "2017",
      "month": "7",
      "date": "24",
      "dayOfWeek": "MON",
      "overall": "Partly sunny",
      "overallCode": "partlySunny",
      "highest": "21",
      "lowest": "10"
    },
    {
      "yyyymmdd": "20170723",
      "year": "2017",
      "month": "7",
      "date": "23",
      "dayOfWeek": "SUN",
      "overall": "Plenty of sunshine",
      "overallCode": "sunny",
      "highest": "25",
      "lowest": "11"
    }
  ]
}

Показать информацию о погоде в теге div. Наконец, с объектом JavaScript, который вы получили в предыдущем пункте, вы можете использовать следующую функцию:

---

function renderObject(data) {
    var html = "";
    html += "<h1>";
    html += data.queryLocation;
    html += " @ ";
    html += data.queryTime;
    html += "</h1>";
    if (data.list && data.list.length) {
        html += "<div class=\"weather\">";
        var len = data.list.length, obj;
        for (var i = 0; i < len; i++) {
            obj = data.list[i];
            html += "<div title=\"";
            html += obj.yyyymmdd;
            html += "\"><div><p><span class=\"dayOfWeek\">";
            html += obj.dayOfWeek;
            html += "</span> ";
            html += obj.month;
            html += "/";
            html += obj.date;
            html += "</p>";
            html += "<p><span class=\"icon ";
            html += obj.overallCode;
            html += "\"></span></p></div><div><p class=\"overall\">";
            html += obj.overall;
            html += "</p><p><span class=\"highest\">";
            html += obj.highest;
            html += "°</span>/";
            html += obj.lowest;
            html += "°</p></div></div>";
        }
        html += "</div>";
    }
    return html;
}

Таким образом, вы можете получить следующий результат в HTML.

Кроме того, вы должны попытаться использовать ненавязчивый JavaScript.

Просто используйте идентификатор в своей кнопке, как в следующей разметке:

<button id="btnGetData" type="button">
  Click here to view weather forecast 1
</button>

И с помощью JavaScript вызовите его, используя следующий синтаксис:

var btnGetData = document.getElementById("btnGetData");
btnGetData.onclick = function () {
    getXMLContent();
};

Здесь я делюсь полнымпример, чтобы вы могли просмотреть его.Я добавил несколько правил CSS3 для лучшей визуализации.

(function() {
  var newXHR = null;

  function sendXHR(type, responseType, url, data, successCallback, failureCallback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.responseType = responseType;
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          successCallback(this.response);
        } else {
          failureCallback(this.response);
        }
      }
    };
  }

  function getXMLContent() {
    var displayDiv = document.getElementById("display");
    if (displayDiv) {
      sendXHR("GET", "text", "https://gist.githubusercontent.com/dannyjhonston/e56a6461d88ebd43d039bac215fa4eb4/raw/af9b5883d35097e8a8a68b619c3b0a9f7a51dc7d/A8.xml", null, function(response) {
        var xml = parseXML(response), obj = convertXMLToObject(xml);
        displayDiv.innerHTML = renderObject(obj);
      }, function(error) {
        displayDiv.innerHTML = "XMLHttpRequest failed: status " + error;
      });
    }
  }

  function parseXML(xmlString) {
    return new window.DOMParser().parseFromString(xmlString, "text/xml");
  }

  function convertXMLToObject(xml) {
    var obj = {}, forecastElement = xml.children[0];
    if (forecastElement) {
      obj.queryLocation = forecastElement.getAttribute("queryLocation");
      obj.queryTime = forecastElement.getAttribute("queryTime");
      obj.list = [];
      var weatherElement, weatherElements = forecastElement.children,
        weatherElementsLen = weatherElements.length;
      for (var i = 0; i < weatherElementsLen; i++) {
        weatherElement = weatherElements[i];
        if (weatherElement) {
          obj.list.push({
            yyyymmdd: weatherElement.getAttribute("yyyymmdd"),
            year: weatherElement.children[0].textContent,
            month: weatherElement.children[1].textContent,
            date: weatherElement.children[2].textContent,
            dayOfWeek: weatherElement.children[3].textContent,
            overall: weatherElement.children[4].textContent,
            overallCode: weatherElement.children[5].textContent,
            highest: weatherElement.children[6].textContent,
            lowest: weatherElement.children[7].textContent
          });
        }
      }
    }
    return obj;
  }

  function renderObject(data) {
    var html = "";
    html += "<h1>";
    html += data.queryLocation;
    html += " @ ";
    html += data.queryTime;
    html += "</h1>";
    if (data.list && data.list.length) {
      html += "<div class=\"weather\">";
      var len = data.list.length, obj;
      for (var i = 0; i < len; i++) {
        obj = data.list[i];
        html += "<div title=\"";
        html += obj.yyyymmdd;
        html += "\"><div><p><span class=\"dayOfWeek\">";
        html += obj.dayOfWeek;
        html += "</span> ";
        html += obj.month;
        html += "/";
        html += obj.date;
        html += "</p>";
        html += "<p><span class=\"icon ";
        html += obj.overallCode;
        html += "\"></span></p></div><div><p class=\"overall\">";
        html += obj.overall;
        html += "</p><p><span class=\"highest\">";
        html += obj.highest;
        html += "°</span>/";
        html += obj.lowest;
        html += "°</p></div></div>";
      }
      html += "</div>";
    }
    return html;
  }

  var btnGetData = document.getElementById("btnGetData");
  btnGetData.onclick = function() {
    getXMLContent();
  };
}());

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1em;
  margin: 0 10px;
  padding: 0;
}

.weather {
  margin: 10px;
  width: 70%;
}

.weather div {
  border: #95b6e0 solid 1px;
  display: flex;
  margin: 5px;
  padding: 0;
}

.weather div div {
  border-style: none;
  display: block;
  padding: 5px;
  width: 50%;
}

.weather div div p {
  display: block;
  margin: 0;
  padding: 0;
}

.weather .dayOfWeek {
  background-color: inherit;
  color: #2b6daf;
  font-weight: 500;
}

.weather .overall {
  font-style: italic;
}

.weather .highest {
  font-size: 2em;
}

.weather .icon {
  background: url(https://cdn1.vectorstock.com/i/1000x1000/13/30/weather-icons-vector-731330.jpg) no-repeat;
  display: inline-block;
  height: 48px;
  width: 48px;
}

.weather .icon.sunny {
  background-position: 4px 6px;
  background-size: 400% 400%;
}

.weather .icon.partlySunny {
  background-position: -46px 7px;
  background-size: 400% 400%;
}

.weather .icon.cloudy {
  background-position: -48px -81px;
  background-size: 400% 448%;
}

.weather .icon.thunderstorm {
  background-position: -48px -41px;
  background-size: 400% 460%;
}

<h1>Part 2</h1>
<button id="btnGetData" type="button">
		Click here to view weather forecast 1
	</button>
<br /> <br />
<div id="display">
</div>

Answer 2

Измените функцию отображения на приведенный ниже код и проверьте.

function displayWeather(weatherObj){
  // print the weatherObj on the console
  // console.log(weatherObj);

  // construct HTML code to display weather information
  var html = `<h1>${weatherObj.queryLocation + weatherObj.queryTime}</h1><span>${weatherObj.yyyymmdd}</span>`;
  // show the constructed HTML code in the display div
  var displayDiv = document.getElementById("display");
  displayDiv.insertAdjacentHTML('afterbegin',html);
}