Ajax

Ajax( Asynchronous JavaScript and XML )란?

데이터(XML)을 주고 받은 통신

데이터 형식은 XML, Text, HTML, JSON, CSV 등 다양한 형식 사용 가능

=> 멀티쓰레드가 되고 동기식으로만 원래 되던 아이를 비동기로 할수 있도록 만들어 준 것

 

 

동기식 데이터 방식 : 클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기

client가 무언가를 요청했을 때 WAS 로 가서 WAS가 result로 값을 보낼때까지 시간이 있는데..

=> async: false 라고 하면 화면은 뜨지만 뭘 동작할 수가 없음
                 (한번 누르고 응답이 오기 전까지는 무효 처리 - 클릭 불가)

 

 

비동기 방식 

- async: true 라고 하면 화면에서 뭘 누를 수 있음

   ( 응답 대기하는 중간에도 클릭하면 요청을 계속 보내는 것 -> 처리응답도 여러번 오게 됨 )

 

특징

장점:

- 전체 페이지 갱신하지 않고 일부분 업데이트 가능

- 페이지가 전체가 업데이트 안해서 즉각적으로 반응한다고 느낄 수 있음

- Javascript 방식

 

단점:

- Ajax는 JavaScript라서 브라우저에 따른 크로스 브라우저 처리 필요

  => 브라우저가 얼만큼 지원하냐에 따라 달라짐

- 서버 부하 증가하여 페이지 느려짐(계속 누를수도 있어서)

- 페이지 내 복잡도가 증가하여 에러 발생 시 디버깅이 어려움

   ex. ajax안에 ajax를 또 써서 데이터를 받는 것
         => 최대 2개 사용. 그 이상은 success function이 언제 끝나는지 보이지 않아서 웬만하면 사용 X

 

 

JavaScript 방식 Ajax : 브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기 방식으로 데이터 송수신

방법

1. 객체 생성 : XMLHttpRequest 객체 생성

2. onreadystatechange 에 callback 함수 지정

    2-1. 응답 상태 확인
            -> field안에 들어오는 값에 따라 응답 상태 확인

    2-2. 응답 완료(서버 응답 데이터 접근)

            -> responseText / responseXML

3.open() 메소드 호출해서 요청방식, 대상(서버), 동기/비동기 방식 지정

2. send(): 메소드 호출해서 대상(서버)에 전송

//1. 객체 생성 : script문에 요청을 위한 XMLHttpRequest객체 생성
var req = new XMLHttpRequest();

//success 에서 받는 값..
req.onreadystatechange = function(){
	console.log("이곳은 서버에서 응답이 들어오면 호출됨. - 여러번 들어옴(readyState 의 변화만큼 들어옴)");
	console.log(req.readyState); //0, 1, 2, 3, 4까지 들어옴 
	//open 전이면 0번이라 console 창에는 표시안됨. open되면 시작해서 1,2,3,4 까지 들어옴
	//controller에서 데이터를 받을 거 다 받으면 4번까지 나옴
	
	if(req.readyState == 4 && req.status == 200) {
		//레식이 형님의 success 단계 - 들고 들어온 데이터가 있을 것임
		
		console.log(req.responseText);
		//success 의 result에 해당				
	} else {
		//error단계
	}
	
};

//3. req 객체에 전송할 준비 =>  open - (요청 방식, 대상(서버), 동기/비동기 지정)
req.open("post", "${pageContext.request.contextPath}/ajax/test", true );


//4. req 객체에 데이터 실어서 보내기
req.send();

 

 

jQuery 방식 ajax : jQuery에 내장되어 있는 Ajax통신을 위한 가장 기본적인 함수 이용

 

$.ajax();
ajax : 메소드 =>  매개인자로 한개만 주면 됨

$ : 객체명
 $ 는 함수, 객체명으로 존재함
* 값 여러개 주고싶으면 {object 형태} 씀

 

주요 속성

속성명	설명
url	요청(request) 데이터 전송할 URL
data	서버로 전송할 요청 (Parameter 설정)
type	Http 요쳥 방식 지정(GET/POST)
datatype	서버의 응답(response) 데이터의 형식(xml, text, json, html 등) 지정 미 작성 시 자동으로 판단하여 지정
success(data)	ajax 통신 성공 시 호출되는 함수 지정 매개변수로 응답 데이터를 받음 (data)
error	ajax 통신 실패 시 호출되는 함수 지정
complete	ajax 통신 성공여부와 관계없이 통신완료 후 실행 되는 함수 지정
async	비동기(true)/동기(false) 지정

 

장점:

코드 길이가 감소하여 JavaScript방식보다 구현 방법 간단 직관적

다양한 방법의 코딩 가능 크로스 브라우저 처리를 jQuery가 자동으로 해결

(JavaScript방식 XMLHttpRequest 객체 생성 시 브라우저 검사 생략 가능)

ajax 기본 function

<script>
$(loadedHandler);

function loadedHandler(){
	//event 등록
	$(".btn.checkid").on("click", btnCheckidClickHandler);
}

function btnCheckidClickHandler() {
	/* id에 들어있는 value 꺼내는 방법 */
	var idVal = $("[name=id]").val(); /* val이 읽혀서 나와서 밑에 대입 */

$.ajax( { 

url:"${pageContext.request.contextPath}/join"
   //어디로 갔다가 다시 되돌아오고 싶은데 어디로?
	, method:"post"    => 포스트 방식으로 갔다왔으면 좋겠어
	, data : { id : idVal } 
     //어떤 데이터를 들고 controller한테 줄건데? (데이터 전송)
     //여러개 데이터 넣고 싶으면 object 형태로 , 찍고 나열해서 쓰면 됨
	/* id 는 JoinController 에서 getParameter() 안에 이름이랑 같아야함
                              => 데이터 전송해야되서*/
	, success : function(){}
		//controller에서 전달해준 값 여기서 호출
		//function( ) 안에 매개인자 넣어야함(값을 받아서 호출해야 하니까)
		//controller 에서 보낸 자바 자료형 모양 인지 X
        //바스크립트라서 자바스크립트 자료형 보내야함)
	    // => Map 형태를 GSOn을 활용해서 JSON 형태로 바꿔서 여기에 실어주면 
        //JSON이 object 랑 흡사하게 생겨서 자바스크립트 형태로바뀌게됨 
	, error : function(){
		alert("code: "+request.status + "\n" + "message: " 
		+ request.responseText + "\n"
		+ "error: "+error);
						}
	} );
}
 	//contextpath 를 통해 controller로 가서 controller에서 동작을 다 하면 success/error 로 돌아옴

* Controller는 dispatcher forward/sendRedirect 이 둘 중 하나로 끝나지만

  ajax는 근데 이게 아님
  => 왔던 곳으로 돌아가는 것

  => dispatcher/sendredirect 로 다른 페이지 이동하면 안되고 왔던 곳으로 다시 돌아가야함 
        (success, error 둘 중 하나)
       이때 결과물을 가지고 돌아감(결과물 여러개를 가지고 갈수는 없음)