ajax기초예제.zip
helloApp.jsp 파일 설명
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>Hello Ajax</title>
말이 필요없는 기본 코드
var xhr = null;
function getXMLHttpRequest(){
if(window.ActiveXObject){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2){
return null;
}
}
}
else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else
{
return null;
}
}
XMLHttpRequest 객체를 구하는 방식은 IE와 나머지 브라우저가 서로 다르다. IE를 제외한 나머지 브라우저는 XMLHttpRequest객체를 기본 객체로 제공하고 있는 반면 IE는 ActiveX객체로 제공된다. 따라서 웹브라우저가 ActiveX객체를 지원하는지 검사한 뒤에, Msxml2.XML.HTTP객체를 생성하면 된다.
param=f.name.value;
URL = URL + "?name=" + encodeURIComponent(param);
xhr = getXMLHttpRequest();
xhr.onreadystatechange = responseHello;
xhr.open("GET", URL, true);
xhr.send(null);
}
웹서버에 전송하는 코드이다.
xhr = getXMLHttpRequest(); // 객체 할당
xhr.onreadystatechange = responseHello;// 콜백함수 설명은 아래에
xhr.open("GET", URL, true); // open() 함수 : (요청의 초기화. GET/POST선택, 접속할 URL ) 설정
xhr.send(null); // send() 함수 : 웹서버에 요청 전송
GET전송방식
xhr = getXMLHttpRequest();
httpRequest.open("GET","/test.jsp?id=exam&pw=1234",true);
httpRequest.send(null);
POST방식전달
httpRequest=getXMLHttpRequest();
httpRequest.open("POST","/test.jsp",true);
httpRequest.send("id=exam&pw=1234");
onreadystatechange 프로퍼티와 콜백 함수
xhr.onreadystatechange = responseHello;
위코드가 실행되면 "/test.jsp"에 접속하며, "/test.jsp"로 응답이 도착하면 responseHello() 함수를 실행한다.
onreadystatechange 프로퍼티에 지정한 함수를 콜백함수라고 부르며, 콜백 함수에서 화면을 변경하거나 경고창을 띄우는 등 응답 결과에 따라 알맞은 작업을 수행하면 된다.
function responseHello()
{
if(xhr.readyState==4)
{
if(xhr.status == 200)
{
var str = xhr.responseText;
document.getElementById("message").innerHTML = str;
alert("success");
}
else
{
alert("Fail : " + xhr.status);
}
}
}
</script>
XMLHttpRequest 객체의 상태
앞서 XMLHttpRequest 객체의 onreadystatechange프로퍼티에 콜백 함수를 지정하면 웹 서버러부터 응답이 도착했을 때 콜백 함수가 호출된다고 했었다. 그런데, 실제로는 onreadystatechange에서 명시한 콜백함수는 readyState라는 프로퍼티의 값이 변경 될 때마다 호출된다.
값이 0일때 (UNINITIALIZED)
객체만 생성되고 아직 초기화되지 않은 상태
값이 1일때(LOADING)
open 메서드가 호출되고 아직 send 메서드가 불리지 않는 상태
값이 2일때(LOADED)
send 메서드가 불렸지만 status와 헤더는 도착하지 않은 상태
값이 3일때(INTERACTIVE)
데이터의 일부를 받은 상태
값이 4일때(COMLETED)
데이터를 전부 받은 상태. 완전한 데이터의 이용 가능
서버로부터의 응답 상태:status/statusText
웹 서버러부터 응답이 도착하면 웹 서버에서 처리가올바르게 수행되었는지 확인한다. 웹 서버는 작업을 올바르게 실행 했는지 처리 도중에 에러가 발생했는지 등의 여부를 상태 코드를 통해서 알려준다.
값이 200 일때 (텍스트 OK)
요청 성공
값이 403 일때 (Forbidden)
접근 거부
값이 404 일때(Not Found)
페이지 없음
값이 500 일때(*Internal Server Error)
서버 오류 발생
응답 데이터 사용하기
var str = xhr.responseText;
</head>
<body>
<form name="f">
<input type="text" name="name">
<input type="button" value="입력" onclick="requestHello('test.jsp')">
</form>
<div id="message"></div>
</body>
</html>
요건 나머지
<%@ page contentType="text/plain; charset=euc-kr" %>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
%>
안녕하세요,<%=name%>회원님
응답을 받아서 처리하는 내용
결과
'웹프로그래밍 > jsp' 카테고리의 다른 글
| JSP (0) | 2011.11.26 |
|---|---|
| jsp,ajax-피라미터의 한글 처리 (0) | 2011.05.06 |
| JSTL-표현언어란? (0) | 2011.04.25 |
| jsp와 eclips 연동하기 (0) | 2011.04.19 |
| jsp - 커넥션 풀(conection pool) (0) | 2011.04.18 |