집 >웹 프론트엔드 >JS 튜토리얼 >ajax_javascript 기술을 통해 xml 파일 내용을 동적으로 읽는 JS 방법

ajax_javascript 기술을 통해 xml 파일 내용을 동적으로 읽는 JS 방법

WBOY원래의: 2016-05-16 16:07:481298검색

이 기사의 예에서는 JS가 ajax를 통해 xml 파일의 내용을 동적으로 읽는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

다음 JS 코드는 note.xml 파일을 읽고 관련 필드를 채웁니다

HTML 파일 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById('A1').innerHTML=xmlhttp.status;
  document.getElementById('A2').innerHTML=xmlhttp.statusText;
  document.getElementById('A3').innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p>
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadXMLDoc('note.xml')">Get XML data</button>
</body>
</html>

xml 파일의 내용은 다음과 같습니다

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：nodejs中实现sleep功能实例_node.js다음 기사：JSONP之我见_json

ajax_javascript 기술을 통해 xml 파일 내용을 동적으로 읽는 JS 방법

관련 기사