본문 바로가기
Java/Source_book

2010.07.19 AJAX

DionysosJH™ 2010. 7. 19. 19:21

[ 2010.07.19 AJAX ]

AJAX(Asynchronous Javascript And XML)

(= Client와 Server 사이에 비동기적으로 JavaScript와 XML을 이용하여 Data를 교환하는 프로그래밍 기법.)

우측 그림과 같이 비동기적으로 통신을 하기 때문에, Client가 Server에게 보낸 요청에 대한 응답이 오지 않아도, Client는 계속 작업을 수행할 수 있다.

 

구현 Procedure

  • XMLHttpRequest 객체 설정

    Ajax에서 비동기 통신을 위한 핵심 JavaScript 객체로서, Web Browser에 따라 사용법이 다르다.

     

function createXMLHttpRequest(){

if(window.ActiveXObject){//IE 계열 Web Browser

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}else{//IE 계열 외의 Web Browser

xhr=new XMLHttpRequest();

}

}

 

  • Server에 Request 정보 전달

    XMLHttpRequest 객체의 함수 { open( ) & send( ) } 를 이용한다.

     

    open( "POST | GET" , "요청 정보를 보낼 URL", "true | false" );

     

    true는 동기식 전송방식, false는 비동기식 전송방식.

     

    send( )

    Argument로 POST 방식일 경우 Query String을, GET 방식일 경우 null 을 지정한다.

  • Server에서 넘어온 Response Data 처리하기.

    일반적으로 CallBack의 의미는 자동으로 호출되는 Method를 의미하며, 서버에서 넘어온 응답 정보를 기반으로 하여 개발자가 처리해야할 Logic을 구현한다.

    CallBack 메소드를 사용하기 위해서는

     

    XMLHttpRequest 객체.onreadystatechange= CallBack 함수;

     

    로 우선 등록하여야 한다.

     

    Server에서 넘어온 응답 Data는 크게 2종류로 나눌 수 있는데

    Text Type일 경우 XMLHttpRequest.responseText;

    Xml Type일 경우 XMLHttpRequest.responseXML;

    로 받아올 수 있다.

 

[ 실습 1 ]

프로젝트 名 : [Dynamic Web Project] ajax_basic_1

구조 : greeting.html & register.html & AjaxSErvlet.java로 이루어진다.

응답을 처리해줄 Servlet : controller.AjaxServlet (Mapping : /controller)

 

greeting.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>2010.07.19 Ajax 첫 시작</title>

<script>

var xhr;//XmlHttpRequest 객체를 할당할 전역변수.

//XmlHttpRequest 객체 생성 function

function createXMLHttpRequest(){

if(window.ActiveXObject){//IE 계열 Web Browser

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}else{//IE 계열 외의 Web Browser

xhr=new XMLHttpRequest();

}

}

 

//Click Event처리 ---> 서버(AjaxServlet)에 비동기적으로 인사말요청

function getGreeting(){

//비동기적 요청

/*

1. XMLHttpRequest 객체 생성

2. XMLHttpRequest 객체에 call back () 등록(=응답이 왔을 때 처리할 함수)

3. XMLHttpRequest의 open()를 호출하여 요청할 CGI 등록.

4. XMLHttpRequest의 send()를 호출하여 서버에 요청.

*/

 

 

createXMLHttpRequest();

xhr.onreadystatechange=callback;//readyStateChange 이벤트 핸들러

xhr.open("GET","controller?command=greeting",false);

xhr.send(null); //get방식에선 null로 넘긴다.

}

 

function getHello(){

 

createXMLHttpRequest();

//xhr.onreadystatechange=callback; //경고창 및 <body>부분에 정보출력 CallBack

xhr.onreadystatechange=getdata;//innerHTML 실습

 

var language=document.form1.lang.value;

xhr.open("get","controller?command=get_hello&lang="+language,false);

xhr.send(null);

 

}

//xhr의 readyState가 바뀔 때마다 호출되는 Method

function callback(){

//alert(xhr.readystate);

if(xhr.readyState==4){//서버의 응답이 완료되었다면

if(xhr.status==200){//정상적인 응답이라면

var responseData=xhr.responseText;//서버가 보낸 값을 문자열로 Return

//경고창에 출력

alert("응답 결과 : "+ responseData);

//화면에 출력

var res=document.createTextNode(responseData);

document.body.appendChild(res);

}

}

}

 

function getdata(){

if(xhr.readystate==4){

if(xhr.status==200){

//서버에서 보내온 값을 'resTxt'에 저장

var resTxt="<font color=red>"+ xhr.responseText +"</font>";

document.getElementById("res").innerHTML=resTxt;

}

}

}

</script>

</head>

<body>

<input type="button" value="인사말요청" onClick="getGreeting()"/>

<hr/>

Server에서 보내온 값 : <span id="res"></span><!-- innerHTML 실습 -->

<form name="form1" >

조회언어 : <input type="text" name="lang" /> 한국어 : kor, 영어 : eng<br/>

<input type="button" onClick="getHello()" value="요청"/>

</form>

</body>

</html>

 

AjaxServlet.java

package controller;

 

//import 정보 생략

 

public class AjaxServlet extends HttpServlet {

 

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doPost(request,response);

}

 

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

 

request.setCharacterEncoding("euc-kr");

String command=request.getParameter("command");

if(command.equals("greeting")){

getGreeting(request,response);

}else if(command.equals("get_hello")){

getHello(request,response);

}else if(command.equals("id_dup_check")){

idDupCheck(request,response);

}

}

/*

* Client가 command=greeting으로 요청한 것을 처리하는 controller 메소드.

* '안녕하세요'를 응답한다.

*/

public void getGreeting(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException{

response.setContentType("text/html;charset=euc-kr");

 

//Header의 cache설정

//Cache 비활성화, Ajax 실습을 위해선, Web Brwoser에 따라서 실습이 안될 수 있으므로 캐쉬설정을 비활성화시킨다.

response.setHeader("Cache-Control", "no-cache");

PrintWriter out=response.getWriter();

out.println("안녕하세요");

out.close();

}

public void getHello(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException{

 

String lang=request.getParameter("lang");

 

//kor이면 한글로, eng이면 영어로 인사말 return

String greeting=null;

if(lang.equalsIgnoreCase("kor")){

greeting="안녕하세요?!";

}else if(lang.equalsIgnoreCase("eng")){

greeting="Hello, How r u?!";

}

response.setContentType("text/html;charset=euc-kr");

response.setHeader("Cache-Control", "no-cache");

PrintWriter out=response.getWriter();

out.println(greeting);

out.close();

}

public void idDupCheck(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException{

 

//ID Duplication Check

ArrayList<String> idList=new ArrayList<String>();

idList.add("1111");

idList.add("2222");

idList.add("3333"); //DB에 등록된 ID목록

 

//Client에서 넘어온 ID값 받기

String id=request.getParameter("id");

String message=id+"는 사용할 수 있는 아이디 입니다.";

for(String obj: idList){

if(id.equals(obj)){

message=id+"는 이미 등록된 아이디 입니다.";

}

}

 

//Response

response.setContentType("text/html;charset=euc-kr");

response.setHeader("Cache-Control", "no-cache");

PrintWriter out=response.getWriter();

out.println(message);

out.close();

}

}

 

register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>2010.07.19 AJAX</title>

</head>

<script>

var xhr;

function idDupCheck(){

//xhr생성

if(window.ActiveObject){

xhr=new ActiveXObject("Microsoft.XMLHTTP");

}else{

xhr=new XMLHttpRequest();

}

 

//입력한 ID 읽기 및 기본검사

var id=document.register_form.id.value;

var msg=document.getElementById("message");

if(id.length<3){

//alert("ID는 최소 3글자 이상 입력해주세요");

msg.innerHTML="ID는 6글자 이상 입력하세요";

return;

}

 

//CallBack 함수 등록 및 open(),send()

xhr.onreadystatechange=getData;

xhr.open("GET","controller?command=id_dup_check&id="+id,false);

xhr.send(null);

}

function getData(){//CallBack 함수

if(xhr.readyState==4){

if(xhr.status==200){

var resTxt=xhr.responseText;

//alert(resTxt);

var msg=document.getElementById("message");

msg.innerHTML=resTxt;

 

}

}

}

</script>

<body>

<b>Register_Form</b><hr/>

<form name="register_form">

<!-- 등록 버튼을 누를 때 이벤트 실행 -->

<!-- ID:<input type="text" name="id"/><font size"2" color="red"><span id="message"></span></font><br/> -->

 

//위는 버튼을 눌렀을 때 server와, 밑은 Keyboard가 눌릴 때 마다 Server와 통신

 

<!-- Keyboard에서 사용자의 입력값들이 입력될 때 마다! -->

ID:<input type="text" name="id" onKeyUp="idDupCheck()"/><font size"2" color="red"><span id="message"></span></font><br/>

기타입력폼

<input type="button" value="등록" onClick="idDupCheck()"/>

 

</form>

</body>

</html>

 

실습결과 확인 –greeting.html

< 기본 화면 >

 

 

실습결과 확인 –register.html

<기본 화면>

 

 

'Java > Source_book' 카테고리의 다른 글

[javascript] 초간단 객체지향 JavaScript  (0) 2013.05.13
2010.07.23 DWR(Direct Web Remoting)  (0) 2010.07.26
2010.07.25 AJAX 최종 실습 예제  (0) 2010.07.26
2010.07.21 Ajax DOM 을 이용한 동적으로 Table 생성 및 JSON  (0) 2010.07.21
[ 2010.07.19 - 20 AJAX 실습 및 정리 ] – Word 버전  (0) 2010.07.20
[2010.07.19 ~20]JavaScript & Ajax - Image 버전  (0) 2010.07.20

'Java/Source_book' Related Articles

티스토리툴바