[JSP/Ajax] Ajax basic 기본 개념과 문법 (+ xml, json 설명)

[ AJAX ] 

: Asynchronous JavaScript And XML
= "비동기 통신" :  비동기 통신의 주체는 JavaScript와 XML(최근에는 JSON)이다

 

★ 핵심 ★

동기적 방식의 전체 페이지를 응답받는 것이 아니라, "필요한 데이터"만 응답받는 방식이다!

사용자는 페이지 변경 없이 필요한 데이터만 응답받으므로, 응답 여부과 관계없이 작업을 지속할 수 있다.

[ 개요 ]

1. JavaScript와 XML을 이용하여 Web Client와 Server간의 비동기적 처리를 지원하는 프로그래밍 기법
   - Google의 Google Map이 AJAX를 이용하여 구축된 이후 각광 받음.
   - Web 2.0의 Rich Client 기술로 인식되어 Web의 많은 분야에서 적용되는 추세
2. AJAX는 그 자체가 하나의 기술이라기 보다는 패턴을 의미 한다. 
   - 기존 Web Browser가 제공하는 기능을 활용하는 프로그래밍 패턴
   - 기존 기술인 JavaScript와 XML등을 이용한 프로그래밍 패턴

[ 구조화된 데이터 응답을 위한 기술]

XML 

1) 설정 정보 역할과 2)데이터 전송 역할을 한다.

Ajax에서는 2번인 데이터 전송 역할을  의미한다.

 

JSON

(JavaScript Object Notation )

: 구조화된 데이터 응답을 위한 기술
: 경량의 데이터 교환 형식

→ Ajax 통신 시 주로 사용되며, XML에 비해 가볍고 개발 생산성이 뛰어나다.

 

* 서버에서 비동기 통신 응답 시, 구조화된 데이터로 응답하기 위해서

초기에는 xml을 많이 사용했으나, 최근에는 성능 및 개발 생산성이 좋은 JSON을 많이 이용한다.

---

[ Ajax 프로그래밍 패턴 ] 

1. XMLHttpRequest 객체 구하기
2. 서버에 Request 전달
3. 서버에서 응답한 Response 데이터 처리하기

---

1단계. XMLHttpRequest 객체

•  AJAX 의 비동기적 처리의 핵심 JavaScript 객체
• 서버와 클라이언트(Web Browser) 사이의 비동기적 데이터 송수신을 담당하는 객체
• 모든 Web Browser가 지원하나 사용 방법은 차이가 있다.
  – IE 6버전 까지는 지원하는 MS 자체 객체로 지원

<script language=“javascript”>
  var xhr;
  
  function createXMLHttpRequest(){
      if(window.ActiveXObject){
          xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
      }else{
          xhr = new XMLHttpRequest();
      }
  }
</script>

---

2단계. 서버에 Request 전달

 

•  XMLHttpRequest 객체의 함수를 이용 
  - open() : 요청 정보 설정. Http Method, URL
  - send() : 요청 전송
  - call back(event Handler) 함수 등록
      : 서버와의 데이터 송수신 상태에 따 른 처리를 담당할 call back 함수 등록
  
  
• open(http method, url, 동기화 방식); 
  - http method : 전송 방식 -  GET, POST
  - URL : 요청정보를 전송할 URL
  - 동기화 방식 
      -> true : 비동기적 전송 처리
      -> false : 동기적 전송 처리
      xhr.open(“GET”, “process.jsp”, true);
• send(전송데이터) ;
  - 전송데이터 : 요청 시 서버에 보낼 querystring
  - GET 방식의 경우 URL에 붙여 보내므로 null 값으로 처리
  - POST 방식은 데이터를 key-value로 저장하여 전달 할 수 있다.
  

[ GET 방식 데이터 전달 ] 

: open()의 url 뒤에 query string으로 전달

var url = “send_data.jsp?name=홍길동”
xhr.open(“GET”, url, true);
xhr.send(null);

 

[ POST 방식 데이터 전달 ]

 : 요청 전에 헤더의 Content-Type을 지정해 준다. 

 : send() 호출 시 argument로 데이터를 전송한다

var url = “send_data.jsp”
xhr.open(“POST”, url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=euc-kr');
xhr.send(“name=홍길동”); 

---

3단계. 서버가 보낸 Response 데이터 처리

 

• Call Back 함수
  - XMLHttpRequest는 요청과 관련된 상태값을 저장하며 그 값이 변경시 마다 event를 발생시킨다.
     그 event를 처리할 handler 함수.
  - 주로 서버가 보낸 응답을 처리
  - 개발자는 call back 함수를 정의 하고 XMLHttpRequest에 등록
• Call Back 함수 등록
  - xhr.onreadystatechange = call back 함수 
  - xhr.onreadystatechange = function(){ // =function(){ //코드 } 
  - onreadystatechange : 요청에 대한 상태가 변화할 때 마다 발생하는 event를 처리하기 위한 handler
•  Call Back 함수 구현 
  - 서버와의 연결 상태 변화 체크
    • readyState == 4
  - 응답 status 체크
     • status == 200
• 서버의 응답 데이터 읽기
  • TEXT 응답 – XMLHttpRequest객체.responseText
  • xml 형식 응답 – XMLHttpRequest객체.responseXML

[ readystate 값 – XMLHttpRequest객체의 상태 값 ]

값	상태
0	unInitialized	XMLHttpRequest 객체만 생성되고 초기화 되지 않음
1	Loading	open() 호출 후 아직 서버에 요청하지 않은 상태
2	Loaded	send() 실행 된 상태. 아직 응답은 받지 않은 상태
3	Interactive	응답 데이터를 받는 중인 상태
4	Completed	응답 데이터를 받은 상태

 

[ 주요 응답 status – Http 응답 상태 코드 ]

값	상태
200	OK : 성공
403	실행 거부
404	요청 페이지 없음
405	요청 방식 실행 불가
500	서버 CGI 실행 중 오류

 

> callback 함수 예제

<script>
    var xhr;
    
    function createXMLHttpRequest(){
        if(window.ActiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xhr = new XMLHttpRequest();
      }
    }

    function openRequest(){
      10
      createXMLHttpRequest();
      xhr.onreadystatechange = getdata;
      xhr.open("GET", "send_data.jsp?name=hong", true);
      xhr.send(null);
    }
    
    function getdata(){
      if(xhr.readystate==4){
        if(xhr.status==200){
        var txt = xhr.responseText;
        alert(txt);
    	}
      }
    }
</script>

 

! 동기적 통신방식과 비동식 통신방식 코드 구현 링크 !

[JSP/Ajax] 동기적 방식과 비동기적 방식(ajax)