Ajax를 알아보자
Ajax (Asynchronous JavaScript And XML)
HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법
자바스크립트를 이용해서 비동기 식으로 XML을 이용하여 서버와 통신하는 방식이다
예를 들어 주문을 받으면
주문 받은 메뉴를 정확히 만들어서 상대방에게 정확히 전달하기 때문에
안정적이고 확실한 반면 속도가 느리다
반대로 음식을 주문만 받고 메뉴는 만드는사람한테 던지고 바로 다음 메뉴 주문을 받는다면
속도는 빠르지만 안정성과 정확도가 떨어진다
즉 첫번째 주문의 메뉴가 완성되지 않아도 다음 메뉴 주문을 받을 수 있기 때문에
처리하는 속도가 빠르다고 할 수 있다
장단점이 확실하다
비동기 - > 주문 받고 메뉴넘기고 바로 다음 주문받고 바로 메뉴넘기고 중간에 누락되거나 순서가 바뀔수도 있다
동기 -> 원 바이 원으로 하나 하나 씩 직접 처리하고 완전한 결과를 내면 다음으로 넘어간다 그래서 처음 순서가 늦어지면
하염없이 기다려야한다 속도가 매우 느려질 수 있다
우클릭으로 폴더 하나 만들어서 배워보자
우클릭 other 누르고
XML 에 XML 파일을 눌러준다
data1.xml이라는 파일을 만들어주자
아래에 Source를 눌러서 들어가보자
xml파일 작성법은
태그 안에 속성
태그안에 또 태그
이런식으로 html처럼 만들면 된다
다음으로 우클릭 파일을 만들어서
data2.json 이라는 파일을 만들어보자
{
"name":"lee","addr":"seoul","score":90
}
name , addr ,score 가 키값
그외는 벨류값
위 형식이 json 형식이다
이미지로 보면
이렇게 되고 "" 를 잊지말고 넣어줘야 빨간줄과 에러를 잡을 수 있다
Ajax의 가장 큰 장점중 하나로는
페이지가 바뀌지 않고 해당 페이지에서 누르면 바로바로
DB에서 가져와서 출력하는 방식을 쓸 수 있다
Ajax함수를 이용해서 영화관예매 사이트처럼
클릭 시 바로바로 값을 가져와서 출력하게 만들 수 있다
간단 정리 **
jsp = html + java 코드
html = only html
ajax는 html 자바 상관없이 어디서든 쓸 수 있다
ajaxtest1.jsp파일 하나를 만들어서
body안에 값을 넣어서
페이지가 변하지 않고 값이 나오는지 확인해보자
이렇게 값이 나오게 되고
해당 코드는 아래와 같다
<body>
<img alt=""src="../image/01.png"><br>
<button type="button" class="btn btn-outline-danger" id="btn1">data1.xml읽기</button>
<button type="button" class="btn btn-outline-danger" id="btn2">data2.json읽기</button>
<br><br>
<div id="result">111</div>
</body>
empty로 지워줘서 append를 사용할 때 누를때마다 추가되지않도록 먼저 값을 지워주도록 하자
<script>
$("#btn1").click(function(){
$("#result").empty(); // 누를 때 마다 지워지고 새로 추가되게empty를넣어주자 그렇지않으면 계속 추가된다
// 나중에 append(한 줄 읽어서 추가 한 줄 읽어서 추가)를 넣어줬을 때 empty로 해주지 않으면 계속 추가되므로 추후에
});
$("#btn2").click(function(){
$("#result").empty();
});
</script>
Xml 기본 태그를 알아보자
비동기통신은 대부분 get 방식을 이용한다
기본사용은 아래와같이 사용할 수 있다
자 다음으로 data1 파일을 열어보자
ajaxtest1.jsp 파일을 이용해서
잘못된 값을 url에 넣으면 statuscode 값이 출력되도록 해보고
정확한 값을 넣었을 때는 갯수를 출력해서 맞는 갯수인 1개가 나오는지 확인해보자
해당 코드를 입력해주고
데이터는 1개 이므로
읽기 버튼을 눌러주면
1개값이 정상적으로 출력되고
url 을 일부러 잘못된 값을 넣고 출력해보면
이렇게 404 function 즉 파일 url이 맞지 않았을 때 확인할 수 있도록 적어둔 값이
출력되는 것을 볼 수 있다
<data>
<name city="seoul">lee min ho</name>
<age>32</age>
</data>
find와 attr을 이용해서 값을 읽고어보자
data1에 seoul이랑 값들을 출력하기 위해
와 같이 코드를 줘서
data를 불러와보자
이렇게 값이 정상적으로 출력되는 것을 볼 수 있다
text는 태그와 태그 사이의 값
그래서 위 처럼 코드를 줘서 값을 찾아서 불러온 것이다
append는 한 줄 씩 불러오는 거라
값 3개가 순서대로 불러와지는데
empty 를 주지않으면
클릭하면 계속 값이 줄줄이 출력된다
그것을 막기위해서 #result에 empty로 비워주는 것이다
다음으로 json을 읽어보자
위와 같이 코드를 줘서
data2.json 값을 불러오는데
해당값을 불러와서
이렇게 출력시킨다
이번에도 마찬가지로 empty를 줘서
append로 출력할 때 계속해서 나오지 않도록 만들어준다
조금 더 복잡하게 만들어보자
우클릭 other 에서 data3.xml 파일을 만들어서 아래와같이 작성해주자
값 3개를 주고
우클릭해서 새로운파일 data4.json 파일을 만들어서
이렇게 값을 넣어주자
오타가 하나도 없어야하므로 신중하게 작성해서 골치아프지 않도록 주의하자
해당 파일로 다시 돌아가서
위에 버튼을 복사해서 3번 4번 버튼을 새로 만들고 data 3 ,4 로 만들어주고
#btn1,2 를 복사해서
아래에 3,4 번을 만들고
위처럼 코드를 복붙해서 불필요한걸 지워서 수정해준다
btn3 의 코드는 아래와같다
$("#btn3").click(function(){
$("#result").empty();
//xml읽기
var s="";
$.ajax({
type:"get",
url:"data3.xml",
dataType:"xml",
success:function(data){
//idx는 0부터 , ele는 각 태그값, 여기서는 stu 각각이 ele로 넘어옴
$(data).find("stu").each(function(idx,ele){
var e=$(ele);
s+="Idx:"+idx+"<br>";
s+="Name:"+e.attr("name")+"<br>";
s+="Java:"+e.find("java").text()+"<br>";
s+="Spring:"+e.find("spring").text()+"<br>";
s+="HTML:"+e.find("html").text()+"<br>";
s+="--------------------------<br>";
});
$("#result").append(s);
},
statusCode: {
404:function(){
alert("xml 파일을 찾을 수 없습니다");
},
500:function(){
alert("코드를 다시 한번 확인해보세요 오타가 있을 수 있습니다");
}
}
})
});
버튼4번도 아래와같이 코드를 줘서
$("#btn4").click(function(){
$("#result").empty();
//json읽기
var s="";
$.ajax({
type:"get",
url:"data4.json",
dataType:"json",
success:function(data){
$.each(data,function(idx,ele){
s+="idx:"+idx+"<br>";
s+="Name:"+ele.name+"<br>";
s+="Hobby:"+ele.hobby+"<br>";
s+="HP:"+ele.hp+"<br>";
s+="Addr:"+(ele.addr==null?"주소없음":ele.addr)+"<br>";
}),
$("#result").append(s);
},
statusCode: {
404:function(){
alert("json 파일을 찾을 수 없습니다");
},
500:function(){
alert("코드를 다시 한번 확인해보세요 오타가 있을 수 있습니다");
}
}
});
});
위의 data4 json 파일값을 불러와서
값을 출력하면 된다
$(data).find("stu").each(function(idx,ele){ 라는 코드를 이용해서
data를 순서대로 가져오는데
인덱스 0부터 2까지 순서대로 가져와서
위의 값들을 가져오는데
$(data).find("stu").each(function(idx,ele){
위 코드는 형식이고
"stu" 혹은 (Idx,ele)같은 경우는 편의상 준 이름이고
언제든 내가 원하는 값으로 변경할 수 있다
결론적으로 위 코드를 통해서 data3파일의 값을 불러오려면
해당 형식 자체를 외우고있어야 할 것 같다
find 랑 each 만 알고 나머지는 바꿀 수 있다
find는 그 하위값을 가져오는거고 each문을 공부해야겠다