23.03.02

학습내용

1. Ajax(Asynchronous JavaScript and XML)
2. Ajax 절차
3. Ajax Call Back Function
4. Ajax 동기, 비동기 전송

Ajax(Asynchronous JavaScript and XML)

기존 classic web에서는 client가 request를 보내면 server에서 해당 request를 처리 한 뒤 처리 결과를 이용해 html을 만들어 client에 response를 보내는 방식이였다.

만약 response html이 기존의 html과 거의 같다면 server는 response로 매번 html을 보내주는것이 아닌 data만을 보내주는 방법이 효율적이다.

Ajax는 Client에서 JavaScript를 통해 server가 html이 아닌 xml만을 response 할 수 있도록 해주는 request 기술이다.

이후 client에서는 받은 data만을 이용해서 동적인 화면을 구성 할 수 있다.

Ajax 절차

		var request = null;
		function createRequest() {
			try{
				request = new XMLHttpRequest();
				//Debug..
				//alert ("XMLHttpRequest() 로 request instancet생성완료");
			}catch(trymicrosoft){
				try{
					request = new ActiveXObject("Msxml2.XMLHTTP");
					//Debug..
					//alert ("ActiveXObject(Msxml2.XMLHTTP) 로 request instancet생성완료");
				}catch(othermicrosoft){
					try{
						request =new ActiveXObject("Microsoft.XMLHTTP");
						//Debug..
						//alert ("new ActiveXObject(Microsoft.XMLHTTP) 로 request instancet생성완료");
					}catch(failed){
						request = null;
					}
				}
			}
			
			if( request == null ){
				alert ("request객체 생성시 error 발생함.");
			}
		}
		
		function getSold() {
			createRequest(); 
			
			var url = "calcServerAjax.jsp"
			
			request.onreadystatechange = updatePage;
			
			/*===========true : 비동기=========*/
			request.open("GET", url, true);
			/*===========false : 동기=========*/
			
			console.log("==>1.request.readyState :"+request.readyState);
	
			request.send(null);
			console.log("==>2.request.readyState :"+request.readyState);
			console.log("==>3.request.readyState :"+request.readyState);
			console.log("==>4.request.readyState :"+request.readyState);
		}
		
		function updatePage(){
	 		console.log("====>updatePage() : "+request.readyState);
		}

JavaScript에서 data만을 요구하는 request를 보내는 과정은 다음과 같다.

1. request 생성

   cross browsing 문제가 존재하기에 try-catch문을 통해 browser에 맞는 request객체를 생성한다.

2. open("HttpMethod", "url", "t/f")

   open메서드를 통해 request를 초기화 한다

   3번째 파라미터는 비동기화 방식(true)을 사용할지 동기화(false) 방식을 사용할지 정하는 파라미터이다

3. send()

   request를 보낼때 Body에 담을 데이터를 넣어주는 메서드이다

   GET 방식으로 요청한다면 null값을 넣고 POST 방식으로 요청한다면 요청 data를 넣어준다.

Ajax Call Back Function

Ajax에서는 요청을 보내고 응답을 받기까지 각 단계가 끝나면 실행되는 Call Back Function을 지원하며 실행되는 단계는 다음과 같다.

1. request가 초기화 된 상태(open()호출, request.readyState = 1)
2. server에 요청이 시작된 상태(send()호출, request.readyState = 2)
3. server로부터 response가 오기 시작한 상태( request.readyState = 3)
4. server로부터 response가 다 도착한 상태( request.readyState = 4)

Ajax 동기, 비동기 전송

동기 전송: client가 request를 보낸 후 server에서 response가 오기 전까지 작업을 수행 할 수 없다. 따라서 clinet에서 server로 요청을 보내는 send() function을 실행 한 후 server에서 완전히 response가 오는시점까지 작업을 수행하지 않기에 request.readyState가 server에서 response가 완료 된 후 상태인 4만 출력하고있다. 비동기 전송: client가 request를 보낸 후 server의 response 여부와 상관없이 작업을 수행 할 수 있다. 따라서 clinet에서 server로 요청을 보내는 send() function을 실행 한 후 server의 response와 상관없이 작업을 수행하기에 request.readyState가 server로 요청을 보낸 후인 2, server로 부터 response가 오기 시작하는 시점인 3, server로부터 response가 완료된 후인 4로 출력된다.