728x90
반응형
tisdata_ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> tisdata_ajax.html </title>
<style type="text/css">
*{ font-size:20pt; font-weight:bold; font-family: "Comic Sans MS";}
</style>
</head>
<body>
<div id="demo">
Ajax = Asynchronous Javascript And XML <p></p>
<button type="button" onclick="first()"> ajax xml </button>
</div>
<script>
var xhr ; //javascript에서 변수선언을 let,const 권장
var msg="" ;
function first() {
xhr = new XMLHttpRequest();
xhr.onreadystatechange=display;
xhr.open("GET", "tisdata.xml", true);
xhr.send();
}
function display() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var xml = xhr.responseXML;
for(var i=0; i<4; i++){
var name=xml.getElementsByTagName('name')[i].firstChild.nodeValue
var price=xml.getElementsByTagName('price')[i].firstChild.nodeValue;
msg +=name+ ' ' + price +'<br>';
}
document.getElementById("demo").innerHTML=msg;
}
}
}//end
</script>
</body>
</html>
tisdata.xml
<?xml version="1.0" encoding="UTF-8" ?>
<products>
<product>
<name>홍차</name>
<price>2000</price>
</product>
<product>
<name>커피</name>
<price>3000</price>
</product>
<product>
<name>녹차</name>
<price>1500</price>
</product>
<product>
<name>java</name>
<price>2400</price>
</product>
</products>728x90
반응형
'개발중 > JavaScript' 카테고리의 다른 글
| 실시간 뉴스( 텍스트 ) (0) | 2020.08.18 |
|---|---|
| 실시간 뉴스 (이미지) (0) | 2020.08.18 |
| AJAX 의 이해 (0) | 2020.08.13 |
| ER 방식으로 IF 문(SELECT) (0) | 2020.08.12 |
| ER 방식으로 값 전달 ( 연산 ) (0) | 2020.08.12 |
