파라미터 인코딩

"http://www.happy.co.kr/Popup.jsp?retUrl="+encodeURIComponent(return_url)

xml처리

result=xmlhttp.responseXML.documentElement.getElementsByTagName("code");
if(result[0].firstChild.nodeValue=='success'){
     alert("삭제하였습니다.");
     document.getElementById("progressOwnArea").style.visibility="hidden";
     document.sForm.action = "/adm/memberMgr/memberList.jsp";
document.sForm.submit();
     return;
}else if(result[0].firstChild.nodeValue=='fail'){
     alert("오류가 발생하였습니다.");
     document.getElementById("progressOwnArea").style.visibility="hidden";
     document.sForm.action = "/adm/memberMgr/memberList.jsp";
document.sForm.submit();
return;
}else{
     alert("오류가 발생하였습니다.");
     document.getElementById("progressOwnArea").style.visibility="hidden";
     document.sForm.action = "/adm/memberMgr/memberList.jsp";
document.sForm.submit();
        return;
}

ajax 결과 처리

• xml=xhReq.responseXML;

         xml값을 받아와서 처리

• text=xhReq.responseTEXT;

         text(html텍스트)값을 받아와서 처리

jsp에서 xml생성

• jsp에서 xml생성 : 

         제일 윗줄을  <%@ page contentType="text/xml; charset=EUC-KR"%>로 변경해야 되는 경우도 있다.

           (이유는 모름)

<?xml version="1.0" encoding="euc-kr" ?>
<%@ page contentType="text/xml; charset=euc-kr" %>
<%@ page import = "java.sql.Connection" %>
<%@ page import = "java.sql.Statement" %>
<%@ page import = "java.sql.ResultSet" %>
<%@ page import = "java.sql.SQLException" %>
<%@ page import = "util.Util" %>
<%@ page import = "util.DB" %>
<%
 Connection conn = null;
 Statement stmt = null;
 ResultSet rs = null;
 try {
  conn = DB.getConnection();
  stmt = conn.createStatement();
  rs = stmt.executeQuery("select * from COMMENT order by ID");
%>
<result>
 <code>success</code>
 <data><![CDATA[
 [
<%
  if (rs.next()) {
   do {
    if (rs.getRow() > 1) { %>
  ,
<%
    }
%>
  {
   id: <%= rs.getInt("ID") %>,
   name: '<%= rs.getString("NAME") %>',
   content: '<%= rs.getString("CONTENT") %>',
   mclass: '<%= rs.getInt("mClass") %>'
  }
<%
   } while(rs.next());
  }
%>
 ]
 ]]></data>
</result>
<% } catch(Throwable e) {
  out.clearBuffer();
 %>
<result>
 <code>error</code>
 <message><![CDATA[<%= e.getMessage() %>]]></message>
</result>
<% } finally {
  if (rs != null) try { rs.close(); } catch(SQLException ex) {}
  if (stmt != null) try { stmt.close(); } catch(SQLException ex) {}
  if (conn != null) try { conn.close(); } catch(SQLException ex) {}
 }
%>

[출처] JSP + Ajax XML|작성자 시골사람

ajax jsp단

returnVal="ok";
out.print(returnVal);

주의 : jsp에서 서블릿으로 변환시 주석이나 엔터키가 모두  out.write("\r\n"); 등으로
변환되므로 결과 파일은 공백과 엔터키가 많이 생성됨.
다른 방식으로 return해야 할 것 같은데...

ajax 한글처리

• 요청 페이지

//쿼리스트링 생성
var queryString="";
var frm=document.forms[0];



var numberElements=frm.elements.length-1;
for(var i=0;i<numberElements;i++){
if(i<numberElements-1){
queryString+=frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&";
}else{
queryString+=frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
}
}


xmlhttp.open("POST","/adm/memberMgr/member_modi_save.jsp",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xmlhttp.send(queryString);

• 처리페이지

 request.setCharacterEncoding("euc-kr");

• 설명

1. post로 전송한다고 가정하면  쿼리 스트링에서 encodeURIComponent()로 utf-8로 인코딩
2. setRequestHeader()에서 charset을 utf-8로 설정
3. 처리페이지에서 request.setCharacterEncoding("euc-kr")로 설정

     참고로, 제우스6, 제우스설정에 euc-kr로 된 상태로 테스트하였음

ajax post 요청

 document.getElementById("progressOwnArea").style.visibility="visible";


if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


xmlhttp.onreadystatechange=function()
{


  if (xmlhttp.readyState==4 && xmlhttp.status!=200)//오류
 {
   alert("오류가 발생하였습니다.");
   document.getElementById("progressOwnArea").style.visibility="hidden";
   return;
  }


 if (xmlhttp.readyState==4 && xmlhttp.status==200)//수정 성공
 {
   //alert("수정하였습니다.");
   document.getElementById("progressOwnArea").style.visibility="hidden";
    window.parent.location.reload();
    window.location.reload();
   return;
           }
}



//쿼리스트링 생성
var queryString="";
var frm=document.forms[0];



var numberElements=frm.elements.length-1;
for(var i=0;i<numberElements;i++){
if(i<numberElements-1){
queryString+=frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&";
}else{
queryString+=frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value);
}
}



xmlhttp.open("POST","/adm/memberMgr/member_modi_save.jsp",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xmlhttp.send(queryString);

ajax 참고 사이트

• 기본적인 ajax소스 및 테스트

http://www.w3schools.com/ajax/default.asp

파라미터를 서버로 보내기

요청 파라미터를 서버로 보내기

서버로 요청을 보내는 방법으로 GET, POST 방식에 대해 사용법을 보겠습니다.

먼저 GET 방식은  GetAndPostExample.jsp?name=홍길동
처럼 URL 을 만들어서 호출합니다. 한글처리를 위해서 encodeURI 함수를 사용해서
인코딩합니다.  AJAX 에서는 데이터 전송시 UTF-8 을 사용합니다.
그래서 한글 처리에 주의해야 합니다. 한글 처리부분은 서버에 따라 달라지는 것 같습니다.
TOMCAT 에서와 IIS + PHP 에서 처리방법이 달라지더군요. 공통적으로 처리하는 방법이
있는지 알아봐야 겠네요.^^

POST 방식은 
xmlHttp.open("POST", url, true);  // POST 방식을 사용한다고 초기화 합니다.
xmlHttp.onreadystatechange = handleStateChange;  // 콜백 함수를 붙입니다.
// 헤더를 지정합니다. POST 방식에서는 필요하다고 합니다.
// PHP에서는 이 라인이 없어야 제대로 수행되었던것 같습니다.
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// GET 과는 다르게 보낼 내용을 send 메소드에 넣습니다.
xmlHttp.send("name=홍길동");

파일 : GetAndPostExample.html

요청 파라미터를 서버로 보내기

이름을 입력하세요:

 
   
     
     
   
 

이름:

 
 

 

서버 응답:

뒤로

파일 : GetAndPostExample.jsp


안녕하세요. 님 환영합니다. [Method: ]

진행상태 표시기

http://ajaxify.com/run/time/

<img id="progress" class="notWaiting" src="progress.gif">
스크립트는 사용자가 대기 모드인지 아닌지의 여부에 따라 그 이미지에 대한 CSS 클래스를 토글시킨다.

.waiting{
   visibility:visible;
}

.notWaiting{
   visibility:hidden;
}


function submitSum() {


$("progress").style.visibility = "visible";

self.$("sum").innerHTML = "";

var definedFigures = {

figure1: $("figure1").value,

figure2: $("figure2").value,

figure3: $("figure3").value

}

ajaxCaller.get("sum.phtml", definedFigures, onSumResponse, false, null);

}



function onSumResponse(text, headers, callingContext) {

$("progress").style.visibility = "hidden";

self.$("sum").innerHTML = text;

}

• 진행상태 이미지 생성

        http://www.ajaxload.info/

ajax 기본

 function createXMLHttpRequest(){
 try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){}
 try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}
 try{return new XMLHttpRequest();}catch(e){}
 alert("XMLHttpRequest not supported");
 return null;
}

function $(id){return document.getElementById(id);}





window.onload = function (){
  var xhr =createXMLHttpRequest();
  xhr.onreadystatechange= function(){
     if(xhr.readyState!=4){return;}//요청이 완료되지않았으면 return;

      if(xhr.status!=200){

        //에러처리, 예를 들어 에러 메시지를 화면에 보여준다.

        return; 

     }

     $("sandbox").innerHTML="Retrieved from server...";

     $("sandbox").innerHTML+=xhr.responseText;

  };
  xhr.open("GET", "message.html", true);
  xhr.send(null);
};




##설명
message.html의 내용을 가져와서 본문에 뿌려준다.
xhr.open("GET", "message.html", true)에서 true는 비동기적 호출이란 뜻이다.
xhr.send(null)에서 null은 요청시 본문이 없다는 뜻이다.
same-domain policy : XMLHttpRequest는 오로지 동일한 서버의 컨텐츠에만 접근할 수 있다.

ajax 타임아웃 발생기

xhr.open("GET", "message.html", true);

var requestTimer = setTimeout(function(){
  xhr.onreadystatechange= function(){
     if(xhr.readyState!=4){return;}//요청이 완료되지않았으면 return;

    clearTimeout(requestTimeout);  

    if(xhr.status!=200){

        //에러처리, 예를 들어 에러 메시지를 화면에 보여준다.

        return; 

     }

     $("sandbox").innerHTML="Retrieved from server...";

     $("sandbox").innerHTML+=xhr.responseText;

  };
};

xhr.send(null);

xml사용하기

var xhr =createXMLHttpRequest();

  xhr.onreadystatechange= function(){

     if(xhr.readyState!=4){return;}//요청이 완료되지않았으면 return;

      if(xhr.status!=200){

        //에러처리, 예를 들어 에러 메시지를 화면에 보여준다.

        return; 

     }

     xml=xhReq.responseXML;

     var figure1=xml.getElementsByTagName("figure")[0].firstChild.nodeValue;

  };

  xhr.open("GET", "message.html", true);

  xhr.send(null);

ajax xml업로드하기

서버로 XML을 업로드하기 위해서 XMLHttpRequest가 제공하는 특별한 XML기능은 없다. 다른 메시지들을 전송하는 것처럼 POST, PUT같은 적절한 요청 유형을 통해 XML을 전송하기만 하면 된다.
xhReq.setRequestHeader('Cotent-Type',"text/xml");

XMLHttpRequest 프로퍼티

onreadystatechange
: 상태값의 변화를 통지하는 콜백 함수
0=초기화되지 않음, 1=로딩됨, 2=작동중, 4=종료, 1,2,3의 상태는 매우 모호하며, 브라우저에 따라 그 값이 다르다.

readyState
: 요청 사이클 내의 상태

responseText
: 서버로부터의 응답이며, 문자열 형태이다.

responseXML
: 서버로부터의 응답이며, xml 형태이다.

status
: 서버로부터 받은 HTTP응답코드이다.

statusText
: 서버로부터 전달받은 HTTP응답코드에 대한 설명이다. 예를 들면, Not Found

abort()
:요청을 중단하며, readyState를 0의 값으로 초기화한다.

getAllResponseHeaders()
: 모든 응답헤더들의 원본 메시지를 줄 바꿈으로 구분해서 문자열로 반환한다.

getResponseHeader(headerField)
: 특정 헤더 필드의 값을 반환한다.

open(requestMethod, url, asyncchronousFlag, username, password)
: XMLHttpRequest를 준비한다.

send(bodyContent)
: 특정 본문 컨텐츠와 함께 메시지를 전송한다. 전달되는 본문 컨텐츠가 없으면(GET요청의 경우) null을 전송한다.

setRequestHeader(headerField, headerValue)
: 요청 헤더를 설정한다.