원래는 database + java 로 만들어야함 배열 => [ ] (key 없는 배열) or { } (key배열일경우) json파일 내 주석사용 X
datafile 종류 : xml,json(api서버가 없을 때) / jsp,do (api서버가 있을 때 )
[
["hong","kim","park"],
["22","32","42"]
]
⚡ ajax 기본 구조 : ajax는 비동기 통신
전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것
XMLHttpRequest 서버와 클라이언트가 서로 상호작용을 할수 있도록 하는 통신언어 (=XHR)
readyState 송수신이 정상적인 상황을인지 받아내기 위함 (0~5번으로 되어있음 / 3,4번을 자주 씀)
0 - 기본, 객체 생성만 함 1 - 오픈형태 / get,post,put.. 정상적으로 실행 되었는지 2 - 응답결과만 체크 (가져오진 않고 있는지 없는지만 체크 - 파일 유무) 3 - 요청만 하고 결과값을 반환 x 4 - 요청된 data및 값을 load 5 - data처리가 완료되었을때(잘 사용 x)
aj.readyState == XMLHttpRequest.DONE : 문제가 없는 경우(정상)
aj.readyState == 4 : 위랑 같은거 둘중 아무거나 사용
status 응답 결과 200(성공) - network에서 확인가능
해당 이미지는 강제 에러 상황
onreadystatechange 통신 결과에 대한 return 역할
open("통신방법","파일명",true or false : 동기 or 비동기) - ajax는 비동기통신이기 때문에 비동기통신 할거면 비동기 동신을 써줘야함 - true : 동기 / false : 비동기
JSON.parse(받아온data 인자) 문자열 -> 배열로 변경 (json 기본은 문자) , 배열일 때만 JSON.parse 적용
parse를 이용해 문자열-> 배열로 변경
<body>
<input type="button" value="클릭" onclick="ajax_load()">
<div id="box"></div>
</body>
<script type="text/javascript">
var aj; //통신 및 data를 받는 변수
function ajax_load(){
function wck(){
if(window.XMLHttpRequest){
return new XMLHttpRequest(); //XHR 신규 생성
}
}
function ajload(){
if(aj.readyState==XMLHttpRequest.DONE && aj.status==200){
//200 ? network의 status 200(성공)
//console.log(this.response); //배열 출력
htmlcode(this.response);
}else if(aj.status==402||aj.status==403||aj.status==500){
alert("서버와 통신 오류 발생!!");//여러번뜸.. 왓다리 갓다리
}
}
var v = new Date();
aj = wck(); //통신함수 생성
aj.onreadystatechange = ajload;
//계속해서 변하는 시간변수를 넣음 - 지속적으로 json을 refresh해줌
aj.open("GET","./data.json?v="+v,true);
aj.send(); //ajax 통신으로 값을 전달
}
//html 출력 파트
function htmlcode(data){
var z = JSON.parse(data);
var html = document.getElementById("box");
var w=0;
while(w<z[0].length){
var code = " 고객명 : " + z[0][w] + ",나이 : " + z[1][w] + " / ";
html.append(code)
w++;
}
}
</script>
