// Ajax.jsp // 웹프로그래밍 언어는 관계없다 난 jsp를 좋아라 해서..; 
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"  %>
<HTML>
<HEAD>
<SCRIPT language=javascript>
var xhr = null;

// XMLHttpRequest 객체 얻기
function getXMLHttpRequest() {
    if (window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");//IE 상위 버젼
        } catch (e1) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");//IE 하위 버젼
            } catch (e2) {
                return null;
            }
        }
    } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();//IE 이외의 브라우저(FireFox 등)
    } else {
        return null;
    }
}

// 서버에 요청 
function requestWorkPlan(URL, Str) {

//한글 처리( escape를 빼면 변환되지않음 이유는 나도 모름..ㅠ)
 var SearchVal = escape(encodeURIComponent(Str));

 URL += "?SearchVal="+SearchVal;

    xhr = getXMLHttpRequest();//XMLHttpRequest 객체 얻기
    xhr.onreadystatechange = responseWorkplan;//콜백 함수  등록
    xhr.open("GET", URL, true);//연결
    xhr.send(null);//전송
    // 모두실행되면 전송된 URL이 전부실행되고 아래펑션에서 응답을하게된다. 
    // 왜냐 위 콜백함수이름이 responseWorkplan이니까 

}

// 응답
function responseWorkplan() {
    if (xhr.readyState == 4) {//완료
        if (xhr.status == 200) {//오류없이 OK
             //서버실행된 모든 태그 및 스크립트를 str에 담는다.
             var str = xhr.responseText;            
             //DIV나 SPAN태그에 str을 담으면 페이지이동없이 실행된다.
             document.getElementById("WorkPlan").innerHTML = str; 
        } else {
            alert("Fail : " + xhr.status);
        }
    }
}
</SCRIPT>


<A onclick="javascript:requestWorkplan('Ajax_proc.jsp','한글이지렁~')">엘롱</A>
<SPAN id=WorkPlan>
멍청이
</SPAN>
// Ajax_proc.jsp // 역시 웹프로그래밍 언어는 관계없다 
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"  %>

<%="똑똑한데?ㅋ"%>
실행하고나면 위의 span 태그값 "멍청이" 가 "똑똑한데?ㅋ" 으로 변경되며 페이지 이동없이 실행된다. 응용하면 Ajax_proc.jsp 에서 DB 값을 가져와 맘대로 뿌려주면 된다...

+ Recent posts

티스토리툴바