json의 [ ] 안에 { } 로 들어갈 시 key배열 ! => 백엔드가 가장 많이 만드는 형태
key배열은 { }에 넣을것!!
나중에 mysql의 coloumn명이 key가 됩니다
대표키는 table명
[
{"seq": 1,"product":"모니터","price":195000},
{"seq": 3,"product":"냉장고","price":295000},
{"seq": 4,"product":"에어컨","price":395000},
{"seq": 9,"product":"세탁기","price":495000}
]
👀 변수 형태의 function
=> 변수 형태의 function이 먼저 읽힘
//일반 function
function aaa(){
alert("function")
}
//변수 형태의 function
var aaa = function(){
alert("변수 function")
};
var bbb = function(){
return "Testbbb";
}
aaa(); //변수 function 출력
console.log(bbb()); //Test1 출력
// 2가지 기능을 다쓰기 위해 사용 : 복합함수
var ccc= new Array();
ccc.test = function(){ //test라고 작명
ccc.push("testccc");
return ccc;
}
console.log(ccc.test()); //배열 ccc가 출력됨
🔽 https://dev-eunse.tistory.com/159 의 예제에서 변수형태의 function 으로 ajax 통신하는 방법 => 확 줄이는 방법
var data;
var html = new XMLHttpRequest(); //통신 XHR 생성
html.onreadystatechange = function(){ //통신에 대한 성공,실패,오류..등 체크
if(html.readyState == 4 && html.status == 200){
data = JSON.parse(this.response);
//통신하고 나서 작동되어야 함
//(즉시 실행되는 function보다 ajax통신이 느려서 밖에다 작성시 undifined)
//htmlcode(); 실행할 함수는 여기다!
}
}
var v= new Date();
html.open("GET","./member.json?v="+v,true);
html.send();
⚡ ajax + json(key가 있는 배열) => 5초에 한번씩 띄우기
<body> <div id="box"></div> </body> <script type="text/javascript"> var data; //5초에 한번씩 data를 새롭게 load하기 위해 function으로 묶음 function dataloads(){ var html = new XMLHttpRequest(); //통신 XHR 생성 html.onreadystatechange = function(){ //통신에 대한 성공,실패,오류..등 체크 if(html.readyState == 4 && html.status == 200){ data = JSON.parse(this.response); //통신하고 나서 작동되어야 함 //(즉시실행되는 function보다 ajax가 느려서 밖에 작성시 undifined) htmlcode(); } } var v= new Date(); html.open("GET","./member.json?v="+v,true); html.send(); } setInterval(dataloads,5000); //5초에 한번씩 호출 function htmlcode(){ //console.log(data); //전역변수 data - 2차배열 var h = document.getElementById("box"); var code = ""; data.forEach(function(a,b,c){ //a : 자기 자신 , b : index 번호 , c : 배열 전체(잘안씀) code += ` <span>고유번호 : `+a["seq"]+`</span> <span>상품명 : `+a["product"]+`</span> <span>가격 : `+a["price"]+`</span><br> `; }) h.innerHTML = code; } </script>
❗ json data가 추가,삭제,변경 되어도 5초에 한번씩 실시간으로 반영됨
'CLASS > AJAX' 카테고리의 다른 글
| #3-1 / ajax + .do (0) | 2024.07.02 |
|---|---|
| #2-1 / id 중복체크 연습용(ajax) - POST (0) | 2024.06.24 |
| #1-4 / js, jquery - 외부 data load (CORS 해결) (0) | 2024.06.20 |
| #1-3 / 🌺 ajax(jquery) (0) | 2024.06.20 |
| #1-1 / 🌺 ajax(javascript) 기본 구조 (0) | 2024.06.20 |