[SIST] JSP_days13_Ajax

1. Ajax란?

- Asynchronous Javascript And Xml 약자로 데이터를 사용하는 비동기적인 자바스크립트 기술

 

- 페이지 로드된 후에도 웹 서버에서 데이터를 읽어와서 사용 가능

 

- 페이지가 전체 새로 고침되지 않고 웹 페이지의 일부분만 업데이트 하는 기능

 

- 페이지는 유지된 채로 백그라운드에서 웹 서버와 통신하는 기술

 

즉,  Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술

 

예시)

- 네이버에 메인 페이지 요청 후 검색창에 검색어를 입력시 연관검색어만 나오는 부분을 업데이트 하는 기능

   + 환율, 날씨정보, 상품의 다음페이지/이전페이지

 

- 회원가입할 때

이름, 생년월일, 주소, 아이디를 입력 받을 때

주소 우편번호검색시 / 아이디 중복체크검사시 ajax 사용

---

2. Ajax 장점과 단점

1) 장점

- 성능향상(why? 전체 페이지가 다시 요청, 응답되지 않고 수신 데이터 양이 줄어들기 때문에)

 

- 개발 속도 향상

 

- 각각의 기능을 하는 서버로 부터 분산 처리 가능(ex. 날씨는 기상청, 환율은 환율정보를 주는 곳에서 받아옴)

 

- 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능

 

- 서버에서 데이터만 전송하면 되므로 전체적인 코딩의 양이 줄어듦

 

2) 단점

- 클라이언트 기술(javascript 사용)이기 때문에 보안적인 측면이 취약하다.

 

- 필요하다면 가져다 쓸 수 있기 때문에 차별화가 없음(F12 누르면 확인 가능)

 

- 브라우저 호환성 체크 필요

 

- 히스토리 관리가 되지 않음

 

- 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음

---

3. javascript Ajax 처리 방법(과정)

출처 : http://www.tcpschool.com/ajax/ajax_intro_works

1) 웹 페이지에서 이벤트 발생시키기(로딩된 웹페이지에서 다음버튼을 클릭하거나 검색어창에 검색어 입력 등)

 

2) 현재 페이지는 유지한 채로 서버 요청 후 응답

서버 요청과 응답을 백그라운드 객체가 하며 그 객체는 XMLHttpRequest

 

3) XMLHttpRequest 객체를 사용해서 웹 서버에 요청

 

4) 서버에서 요청을 처리한 후 응답

 

5) 콜백함수 호출 + 응답 결과

javascript로 웹 페이지의 일정 부분을 DOM으로 추가, 수정, 삭제 등 작업 처리

---

1) XMLHttpRequest 객체를 js로 생성 + 설정(어떤 서버에 어떤 기능으로 다녀와라)

- XMLHttpRequest 객체명 = new XMLHttpRequest();

- XMLHttpRequest 객체명 = new ActiveXObject("Microsoft.XMLHTTP"); // IE6 이하 버전

 

2) XMLHttpRequest 객체를 사용해서 웹서버에 요청할 때는 2가지 방식을 설정할 수 있다.

 

2-1) 객체 생성 후 open() 메서드로 요청에 필요한 설정을 하고 send() 메서드로 실제 서버에 요청을 한다.

open("GET", 요청URI) 메서드 - 요청에 필요한 설정을 하는 함수
open("POST") 메서드 - 요청에 필요한 설정을 하는 함수
send() 메서드 - open 메서드에 설정한 것을 가지고 실제 서버에 요청을 하는 함수

 

ㄱ. GET 방식 요청
XMLHttpRequest 객체.open("GET", "/test.jsp?id=admin", true)
? 뒤로 파라미터 값을 가지고 감
true : 비동기적 처리 / false : 동기적처리 => ajax는 100% 비동기적 처리이기 때문에 무조건 true임
XMLHttpRequest 객체.send(null);
 
ㄴ. POST 방식 요청
XMLHttpRequest 객체.open("POST", "/test.jsp", true)
XMLHttpRequest 객체.send("id=admin"); 
파라미터 값이 send 메서드로 보내짐

 

3) XMLHttpRequest 객체를 생성 후 onreadystatechange 속성으로 콜백함수 등록

XMLHttpRequest 객체.onreadystatechange = function(){ => 상태가 바뀌었을 때 호출하는 함수 등록(콜백함수)
	if( 서버 요청이 완료되고 응답 준비가 되었다면 readyState 속성 == 4 && status 속성 == 200 요청받는 결과가 성공적으로 확인이 되었다면 ){
		// 응답 결과를 가지고 웹 페이지를 수정, 추가 등 처리하는 코딩
		// [응답 결과]
		1. responseText 속성 : 응답한 결과가 String
		2. responseXML 속성 : 응답한 결과가 XML
	}
}

---

4. 예제

1) ex02.jsp는 javascript로 ajax 사용하는 예제이고 ex02_02.jsp는 ex02.jsp를 jquery 코딩으로 바꾼 것

[ex02_ajax_info.txt]

 

[ex02.jsp]

> 버튼을 누르면 시간은 바뀌지 않고 id가 demo인 p태그 영역에 이름을 출력

 

[결과]

 

 

[ex02_02.jsp]

> ex02.jsp를 jquery로 코딩한 것!

 

[결과]

 

+ jquery의 load() 메서드 살펴보기

> ex03_load.html 페이지에서 id가 projects인 태그의 자식 li 태그를 가져와서 ex03.jsp의 id가 new-projects 영역에 뿌리겠다.

 

[ex03.jsp]

 

[ex03_load.html]

 

[결과]

---

2) DB에서 emp 테이블을 가져와 실시간으로 바뀌는 데이터를 뿌려보기

[httpRequest.js]

httpRequest.js에 아래 과정을 등록

1) sendRequest(url, param, method, callback) 함수 => ajax 요청 -> 응답
위의 함수에서.. 아래 작업을 함
   1. XMLHttpRequest 생성
         xhr == XMLHttpRequest
   2. onreadyStateChange 속성 = callback
[GET 방식]
   3. open(method, url, true) 메서드 설정
   4. send() 
[POST 방식]
   3. open(method, url, true) 메서드 설정
   4. send() 
2) getXMLHttpRequest() 함수 => xhr 반환

(전체코딩)

/**
 * httpReqeust.js
 */

// XMLHttpRequest 객체를 담을 변수 선언
var httpRequest = null;

// 브라우저 종류 또는 버전에 따라 객체 생성하는 함수 선언
function getXMLHttpRequest(){
   if(window.ActiveXObject){
      try {
         return new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try {
            return new ActivXObject("Microsoft.XMLHTTP");
         } catch (e) {
            return null;
         }

      }
   }else if(window.XMLHttpRequest){
      return new XMLHttpRequest();       
   }else {
      return null;
   }
}

// 요청 방식에 따라 open() 메서드 설정과 send() 값 할당하는 함수
//  요청할 url, 파라미터, 콜백함수등록, get/post
function sendRequest(url,params,callback,method){ 
   // 1. xhr
   httpRequest = getXMLHttpRequest(); // 생성한 XMLHttpRequest 객체를 변수에 담고 

   // 2. 상태가 바뀌었을 때 호출하는 함수 등록(콜백함수)
   httpRequest.onreadystatechange = callback; // 상태를 가지고 콜백함수(상태가 바뀌었을 때 호출하는 함수) 

 
   var httpMethod = method ? method : 'GET'; // 파라미터로 넘어온 method가 false일 때 GET 설정(안넘어왔을때) 
   if(httpMethod!='GET' && httpMethod!='POST') httpMethod='GET'; // 파라미터로 넘어온 method가 GET과 POST가 아니라면 GET으로 설정
   // [GET 방식일 때]
   var httpParams = (params==null||params=="") ? null : params; // 파라미터 null이거나 빈문자열이면 null로 설정
   
   var httpUrl = url; // url 파라미터를 변수에 httpUrl 담고
   
   // GET 방식일 경우 + 파라미터가 null이 아닌 경우 쿼리스트링으로 url 만들겠다.
   if(httpMethod=='GET' && httpParams != null){
      httpUrl= httpUrl +"?"+httpParams;
   }     
   
   // XMLHttpRequest.open() 메서드 설정을 httpMethod, httpUrl, true로 설정하겠다.(요청에 필요한 설정)
   httpRequest.open(httpMethod,httpUrl,true); // true 비동기적..

   // [XMLHTTP를 사용해서 통신할 때 규약] 
   // httpRequest.setRequestHeader('Content-Type','application/x-www-form-unlencoded');    

   // [POST 방식일 때]
   // 콜백함수 안에서 readyState 속성(4)과 status 속성(200)으로 응답한 결과가 String인지 XML인지 판단하여 웹페이지 추가,수정,삭제 작업
   httpParams = (httpMethod=='POST' ? httpParams : null ); // POST 방식이면 파라미터 null로 설정하고
   // 해당 파라미터를 send() 메서드에 넣어져서 보내짐
   httpRequest.send(httpParams); // 요청처리... 
}

 

- 현재 emp 테이블의 sal 상위 5명 리스트

 

[ex04_top5.jsp]

- emp 테이블의 sal TOP5를 가져오고 있는 상태

 

[ex04.jsp]

 

[결과]

> ex04.jsp를 처음 실행한 후 DB에서 UPDATE DML문으로 KING의 sal을 변경할 것이다. 500 -> 4000 -> 5000 순으로!

 

> ex04_top5.jsp에서 바뀔 때 마다의 시간을 찍어주기 때문에 굵은 글씨의 시간은 바뀌게 되지만 처음 요청한 시간은 변경되지 않는다.

 

 

> KING의 sal을 500으로 변경

 

> KING의 sal을 4000으로 변경

 

> KING의 sal을 5000으로 변경