data.json 파일을 만들어준다
[{"name":"이상준","address":"충남아산"},
{"name":"김유신","address":"충북청주"}]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax json 파싱</title>
<script>
//body가 읽어지자 마자
window.onload = function() {
//요청 객체를 저장할 변수
var request;
//IE8.0 이하 브라우저가 아닐 때
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
alert("Ajax 요청 객체 생성");
}
//IE8.0 이하 브라우저일 때
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
alert("IE에서 객체 생성");
} else {
alert("객체 생성 실패");
}
//Ajax 요청 주소 생성 - data.txt 를 get 방식으로 요청
//Ajax 요청 주소 생성
request.open('GET', 'data.json');
//Ajax 요청
request.send();
//요청을 한 후 상태 변화를 확인
request.onreadystatechange = function() {
//응답이 전부 왔다면
if (request.readyState == 4) {
//응답이 정상이라면
if (request.status >= 200 && request.status < 300) {
//가져오는데 성공했을 때 처리
//xml을 제외한 데이터를 가져오기
var str = request.responseText;
//JSON 문자열 파싱
var json = JSON.parse(str);
var display = document.getElementById("content");
for (var i = 0; i < json.length; i++) {
display.innerHTML += json[i].name + ":"
+ json[i].address;
}
} else {
alert("데이터를 가져오기 실패");
}
}
}
};
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
'Web개발 > JSP, Web' 카테고리의 다른 글
| [Jquery] 제이쿼리 사용하기 (0) | 2014.11.18 |
|---|---|
| [JSP] local 로컬 스토리지 사용하기 (0) | 2014.11.18 |
| [javascript] 캔버스 트랜스 폼 (0) | 2014.11.18 |
| [javascript] 캔버스 그리기 (0) | 2014.11.18 |
| [Ajax] Ajax xml 파싱 (0) | 2014.11.18 |