Day ?? - jQuery ajax , Javascript ajax
jQuery ajax
jQuery ajax가 편해서 많이 쓴다. javascript ajax랑 비교해보자
일단 get방식과 post방식을 나누자면 get방식은 주소 전달 post방식은 html 전체를 전달하는 것이다.
javascript에서 ajax 실행을 위한 객체가 필요 바로
XMLHttpRequest : Object를 통한 HTTP 데이터 송수신이 가능하도록 만들어준다.
state는 작동의 진행을 나타내고 / status는 작동 후 상태를 나타낸다
작동상태는 찍어내는 기능 onreadystatechange : state 정보
state 상태정보 4단계
0. uninitialized : 실행이 되어 있지 않음 ( 초기화와 다르다. 초기화는 load가 된 상태에서 진행되는데 이건 load도 안됨)
1. loading : load가 진행
2. loaded : load가 끝
3. interactive : 통신
4. complete : 완료
status code
200 : 성공
404 : 페이지가 없음
403 : forbidden
500 : 서버 문제
javascript ajax
servlet으로 진행
우선 get방식은 queryString 으로 주소를 전달하기 때문에
function getParameterValues(){
var name = "name="+$("#name").val();
var kor = "kor="+$("#kor").val();
var eng = "eng="+$("#eng").val();
var math = "math="+$("#math").val();
console.log(name);
return(name+"&"+kor+"&"+eng+"&"+math);
}input tag에 입력되는 값을 위치탐색을 통해서 가져온다
그리고 반환 값은 "name"=name&"kor"=kor&"eng"=eng&"math"=math의 queryString으로 반환
function ajaxLoad(){
var url = "./ScoreCal.do?"+getParameterValues();
// alert(url);
httpRequest = new XMLHttpRequest();//서버와 송수신을 위한 통신 객체 생성
httpRequest.onreadystatechange = callback;//callback에 처리될 함수를 생성 및 입력
httpRequest.open("GET",url,true);// GET방식 / 호출 url / 비동기
httpRequest.send();//get방식으로 URL 호출 하겠다
}이제 그 반환 값을 들고 servlet으로 보냄
전달을 위해서 XMLHttpRequest를 생성하고
onreadystatechange = callback으로 작성한다.
즉 함수 자체를 언제든 가져오도록 대입하는 것이다.
그리고 open해준다 보내기위해 (방식, 호출url, 비동기방식) 작성
send 보낸다 호출하겠다
callback()
실제로 전달 과정이 이루어지는 곳은 callback이다. 진행하면서 상태마다 callback을 해준다
state에 따라서 callback한다
0은 자동으로 이루어지고? 어차피 load안된 상태니까
if(httpRequest.readyState == 4){
alert("통신이 완료되었습니다.")
if(httpRequest.status == 200){
// alert("성공적으로 서버와 interactive하였습니다.");
// alert(httpRequest.responseText);
var obj = JSON.parse(httpRequest.responseText);
$("#result").html(obj.name+"의 총점은 ?"+obj.sum+"점 이고 평균은 " + obj.avg+"이다");
}else{
alert("데이터를 수신할 수 없습니다.");
}
}readyState가 4라는 것은 완료가 됐다는 것을 의미하고 거기에 status code가 200이라면 서버와 interactive가 성공했다는 것이다.
responseText 응답 text를 보여준다
String name = request.getParameter("name");
int kor = Integer.parseInt(request.getParameter("kor"));
int eng = Integer.parseInt(request.getParameter("eng"));
int math = Integer.parseInt(request.getParameter("math"));
System.out.printf("%s %d %d %d\n",name,kor,eng,math);
int sum = kor + eng + math;
double avg = (double)sum/3;
System.out.println("총계 : " + avg);
JSONObject jsonO = new JSONObject();
jsonO.put("name", name);
jsonO.put("sum", sum);
jsonO.put("avg", avg);
PrintWriter out = response.getWriter();
out.println(jsonO.toJSONString());그럼 찾아서 java로 간다. 그럼 똑같이 파라미터 받아준다. 그리고 원하는 sum avg 구한다
JSONObject를 생성하고 put으로 입력해준다 (map이랑 똑같다 map도 key:value니까)
PrinterWriter 객체로 출력한다
출력할때 toJSONString
Post방식은 html 전달이다
function ajaxLoad2(){
var url = "./ScoreCal.do?";
// alert(url);
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = callback2;
//preparedStatement
alert(httpRequest.onreadystatechange);
httpRequest.open("POST",url);
httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
httpRequest.send(getParameterValues());
}
전부 똑같고 open시 post로 설정하는 것만 다르다
비동기식 처리 방식 선택은 기본이 true(비동기)이고 false를 하는 경우는 ID중복검사와 같이 정확한 데이터를 가지고 와야할 때 사용한다
그리고
header정보를 변경해줘야한다
setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
전체 applicatin에 적용시킨다는 것? encoding 맞춰주겠다?