📌 1. Ajax

  • Ajax : Asynchronous javascript And XML
    • 비동기적 통신으로, 빠르게 동작하는 웹페이지를 만들기 위한 개발 기법이다.
      • Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
      • 이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트파일 등이 있다.

📍 1-1. 장단점

  • 장점
    • 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지 일부분만 갱신할 수 있다.
    • 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.
    • 다양한 UI 동적 페이지 구현이 가능해진다.
  • 단점
    • 페이지의 이동이 없기 때문에 히스토리의 관리가 되지 않는다.
    • 반복적인 데이터 요청이 있으면 느려지거나 작동하지 않게 된다.

📍 1-2. 구성 요소

  • HTML, CSS : 웹 페이지의 표현을 위한 요소
  • JSON, XML : 데이터의 교환을 위한 요소
  • XMLHttpRequest 객체 : 웹 서버와의 비동기식 통신을 위한 브라우저 내장 객체

📍 1-3. 서버에 요청(Request)

  • XMLHttpRequest 객체 : 가장 핵심적인 구성요소. 웹 브라우저가 서버와 데이터를 교환할 때 사용한다.

  • open() : 서버로 보낼 ajax요청의 형식을 설정한다.
    open(전달방식, url주소, 동기여부)

  • send() : 작성된 ajax요청을 서버로 전달한다.

📍 1-4. 서버로부터 응답(Response)

  • readyState 프로퍼티 : XMLHttpRequest 객체의 현재 상태를 나타낸다.
    • UNSENT(숫자 0)
      : XMLHttpRequest 객체가 생성
    • OPENED(숫자 1)
      : open() 메소드가 성공적으로 실행됨
    • HEADERS_RECEIVED(숫자 2)
      : 모든 요청에 대한 응답이 도착함
    • LOADING(숫자 3)
      :요청한 데이터를 처리 중임
    • DONE(숫자 4)
      : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
  • status 프로퍼티 : 서버의 문서 상태를 나타낸다. (HTTP상태코드)
  • onreadystatechange : XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.

➕ 예제

  • ajax_text.jsp
<body>
	<h3>Ajax 요청 보내기 테스트</h3>
	<input type = "submit" value = "Get방식으로 보내기"
		onclick="send1()">
	<input type = "submit" value = "Post방식으로 보내기"
		onclick="send2()">
	<p id="result"></p>
	<script>
    	// get 방식으로 보내기 메소드
		function send1(){
        	// XMLHttpRequest 객체 생성
			let xhr = new XMLHttpRequest();
            // url에 데이터를 담음
			xhr.open("GET","request_ajax.jsp?"
					+"userid=apple&userpw=1234",true);
			xhr.send();
			xhr.onreadystatechange = function(){
				// 통신 성공 시 responseText를 페이지에 출력
				if(xhr.readyState == XMLHttpRequest.DONE
						&& xhr.status == 200){
					document.getElementById("result").innerHTML
						=xhr.responseText;
				}
			}
		}
        // post 방식으로 보내기 메소드
		function send2(){
			let xhr = new XMLHttpRequest();
			xhr.open("POST","request_ajax.jsp",true);
            // 요청 헤더 세팅
			xhr.setRequestHeader("Content-Type",
            	"application/x-www-form-urlencoded");
            // send에 데이터 담음
			xhr.send("userid=admin&userpw=abcdefg");
			xhr.onreadystatechange = function(){
            	// 통신 성공 시 responseText를 페이지에 출력
				if(xhr.readyState == XMLHttpRequest.DONE
						&& xhr.status == 200){
					document.getElementById("result").innerHTML
						=xhr.responseText;
				}
			}
		}
	</script>
</body>
  • request_ajax.jsp
	<%
		String userid = request.getParameter("userid");
		String userpw = request.getParameter("userpw");
		out.print("아이디 : " + userid + 
				", 비밀번호 : " + userpw);
	%>

➕ Ajax에서 JSON 사용

  • JSON.parse(xhr.responseText); : 응답으로 JSON형 데이터를 받아올 때 데이터를 알맞게 잘라 주는 메소드
    • 사용 예시
    		<script>
    			let xhr = new XMLHttpRequest();
           // GET요청을 json 파일로 보냄 
    			xhr.open("GET","data.json",true);
    			xhr.send();
    			xhr.onreadystatechange = function(){
    				if(xhr.readyState == XMLHttpRequest.DONE
    						&& xhr.status == 200){
                   // 통신 성공 시 responseText를 JSON 형태로 parse
    					let obj = JSON.parse(xhr.responseText);
                   // JSON 내 name-value 를 사용 가능 
    					alert(obj.result);
    					alert(obj.count);
    				}
    			}
    		</script>

0개의 댓글