Ajax 간단한 예제

1. 계산기 : 자바스크립트만 이용

○ 새로고침 없이 밑에 값만 바뀌도록 한다

○ 실행화면

① test1.jsp

[ body부분 ]

<body>

</select>

//결과값이 출력되는 부분

<div id="resultDIV" style="display: none"></div>

</body>

[ script부분 ]

▶sendIt() 함수

○ onreadystatechange : 서버가 작업을 마치고 클라이언트에게 정보를 돌려줄 때 자동으로 실행할 메소드를 지정한다

○ xmlHttp.open("GET",query,true);

- 보내기 위한 준비작업을 하는 부분

- true : 비동기방식 / false : 동기바이

- GET방식으로 querry를 비동기방식으로 보낸다

○ xmlHttp.send(null);

- 보내는 부분

- open에서 post방식으로 보내는경우에는 뒤에 값을 넣어준다

xmlHttp.send(querrt);

- get방식일 경우에는 뒤에 null값을 적는다

▶callback()함수

○ 여기서 실행해도 되지만, 코드가 길어질 수 있어 따로 함수를 만들어서 실행한다.

○ 데이터가 정상적으로 도착했는지만 검증

○ xmlHttp.readyState==4

- 모든 데이터를 다 받으면 resdyState의 값은 4이다.

- 0 : XMLHttpRequest 객체를 생성

- 1 : 요청할 페이지 정보를 설정

- 2 : send()메소드로 요청을 보냄

- 3 : 서버에서 응답이 오기 시장

- 4 : 서버 응답이 완료

○ xmlHttp.status==200

- 서버로부터 받은 응답 코드를 나타내는 숫자

- 200 : 정상적으로 응답을 받은 경우

- 404 : 페이지를 찾지 못한 경우

▶printData() 함수

○ 데이터를 xml형식으로 받는다

○ responseXML : 넘어온 데이터를 xml형식으로 받는다

○ responseHTML : 넘어온 데이터를 텍스트 문자열로 반환하여 받는다

function sendIt(){

//XMLHttpRequest 생성

xmlHttp = createXMLHttpRequest();

var query = "";

var su1 = document.getElementById("su1").value;

var su2 = document.getElementById("su2").value;

var oper = document.getElementById("oper").value;

query = "test1_ok.jsp?su1="+su1+"&su2="+su2+"&oper="+oper;

//onreadystatechange

// 작성위치는 상관 없다. 위에 적어도, 밑에 적어도 괜찮음

xmlHttp.onreadystatechange = callback;

xmlHttp.open("GET",query,true);

xmlHttp.send(null);

}

function callback() {

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

printData();

}

function printData() {

//넘어온 데이터중 root부분을 읽어서 result에 넣어둔다

var result = xmlHttp.responseXML.getElementsByTagName("root")[0];

//결과를 보여줄 위치의 객체를 생성

var out = document.getElementById("resultDIV");

out.innerHTML = "";

out.style.display = "";

//root에서 첫번째 값을 보여준다

out.innerHTML = result.firstChild.nodeValue;

}

</script>

② test1_ok.jsp

○ 결과만 돌려주기 때문에 HTML이 필요 없다

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

request.setCharacterEncoding("UTF-8");

String cp = request.getContextPath();

int su1 = Integer.parseInt(request.getParameter("su1"));

int su2 = Integer.parseInt(request.getParameter("su2"));

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

int sum = 0;

if(oper.equals("hap"))

sum = su1 + su2;

else if(oper.equals("sub"))

sum = su1 - su2;

else if(oper.equals("mul"))

sum = su1 * su2;

else if(oper.equals("div"))

sum = su1 / su2;

StringBuffer sb = new StringBuffer();

sb.append("<?xml version='1.0' encoding='UTF-8'?>\n");

sb.append("<root>" + sum + "</root>");

/* 값 돌려주기 */

//xml형식으로 값을 돌려줌

response.setContentType("text/xml;charset=utf-8");

response.getWriter().write(sb.toString());

③ createXMLHttpRequest 함수

○ ajaxUtlil.js 작성

○ IE별 작성 방법

- non IE : new XMLHttpRequest()

- IE 5.0 이후 : new ActiveXObject("Msxml2.XMLHTTP")

- IE 5.0 이전 : new ActiveXObject("Microsoft.XMLHTTP");

var xmlHttp;

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

} else if(window.ActiveXObject){

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

return xmlHttp;

}

2. jQuery를 이용해 Ajax사용하기

① body

<body>

제목:<input type="text" id="subject"><br/>

내용:<input type="text" id="content"><br/>

</body>

② script

▶ $.ajax({ });

○ ajax를 실행하는 부분

○ type : get방식인지 post방식인지 작성

○ url : 보낼 페이지

○ data : 보낼 데이터

○ dataType : 보낼 데이터의 타입 ( xml, json..)

○ success : 데이터가 정상적으로 돌아올 시 실행

○ beforeSend : 데이터를 넘어가기 전에 처리해줄 코드

- 사용자 정의 함수를 작성

- false값이 넘어오면 위에 있는 작업을 멈춘다.

- 항상 마지막에는 true값이 와야한다. true값이 오지 않으면 더 이상 실행되지 않는다

$(function(){

$("#sendButton").click(function(){

var params = "subject=" + $("#subject").val() + "&content=" + $("#content").val();

//보내는 작업

$.ajax({

type:"post",

url:"test2_ok.jsp",

data:params,

dataType:"xml",

success:function(args){

//xml에서 데이터 읽기

//거의 대부분 xml이나 텍스트로 돌아온다.

//넘어온 데이터에서 status를 찾아서 읽음

//each : 반복문

$(args).find("status").each(function(){});

var str = "";

$(args).find("record").each(function(){

var id = $(this).attr("id"); //먼저 1, 다음에 2

var subject = $(this).find("subject").text();

var content = $(this).find("content").text();

str += "id:" + id +

", subject:" + subject +

", content:" + content + "<br/>";

});

$("#resultDIV").html(str);

//showRequest : 사용자 정의 함수

beforeSend:showRequest,

error:function(e){

alert(e.responseText);

}

});

function showRequest(){

var flag = true;

if(!$("#subject").val()){

alert("제목을 입력하세요");

$("#subject").focus();

return false;

}

if(!$("#content").val()){

alert("내용을 입력하세요");

$("#content").focus();

return false;

}

return flag;

}

</script>

3. 다른 방법으로 아이디와 패스워드 전송 및 지우기

○ 실행화면

○ 공통부분(body)

<body>

아이디:<input type="text" id="userId"/><br/>

패스워드:<input type="text" id="userPwd"/><br/>

<br/>

</body>

○ test3_ok.jsp /test4_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

request.setCharacterEncoding("UTF-8");

String cp = request.getContextPath();

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

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

아이디:<%=userId %><br/>

패스워드:<%=userPwd %><br/>

3-1. jQuery로만 작성

① test3.jsp

○ script

- GET과 POST동시에 사용불가

- 둘 중 하나만 사용해야 한다

$(document).ready(function(){

$("#saveButton").click(function(){

var value1 = $("#userId").val();

var value2 = $("#userPwd").val();

//GET

// userId에 value1값을, userPwd에 value2값을 넣는다

$.get("test3_ok.jsp",{userId:value1,userPwd:value2},function(args){

$("#resultDIV").html(args);

});

//POST

$.post("test3_ok.jsp",{userId:value1,userPwd:value2},function(args){

$("#resultDIV").html(args);

});

$("#clearButton").click(function(){

$("#resultDIV").empty();

});

</script>

3-2. jQuery와 ajax 사용

① test4.jsp

○ script

$(document).ready(function(){

$("#saveButton").click(function(){

var params = "userId=" + $("#userId").val() +

"&userPwd=" + $("#userPwd").val();

$.ajax({

type:"POST",

url:"test4_ok.jsp",

data:params,

success:function(args){

$("#resultDIV").html(args);

beforeSend:showRequest,

error:function(e){

alert(e.responseText);

}

});

$("#clearButton").click(function(){

$("#resultDIV").empty();

});

function showRequest(){

var flag = true;

if(!$("#userId").val()){

alert("아이디를 입력!!");

$("#userId").focus();

return false;

}

if(!$("#userPwd").val()){

alert("패스워드를 입력!!");

$("#userPwd").focus();

return false;

}

return flag;

}

});

</script>

4. json(Map-key:value)을 이용하여 ajax구현

① test5.jsp

$(function(){

$("#sendButton").click(function(){

var params = "userId=" + $("#userId").val() + "&userPwd=" + $("#userPwd").val();

$.ajax({

type:"POST",

url:"test5_ok.jsp",

data:params,

dataType:"json",

success:function(args){

var str = "";

//json방식으로 오는 데이터를 반복문으로 풀어서 보여준다

for(var i=0;i<args.length;i++){

str += "id=" + args[i].id;

str += ",userId=" + args[i].userId;

str += ",userPwd=" + args[i].userPwd + "<br/>";

}

//반복문에서 푼 데이터를 출력

$("#resultDIV").html(str);

error:function(e){

alert(e.responseText);

}

});

</script>

② test5_ok.jsp

○ json 방식 : { }로 묶어준다

- key : value 형태

- json방식은 {Key : Value} 형식으로 데이터가 저장된다.

- 각각의 값들은 큰따옴표로 묶여있어야 한다.

- {"id":"1","userId":"Lee","userPwd":"123"}

- 전체데이터는 [ ](대괄호)로 묶어줘야한다.

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

request.setCharacterEncoding("UTF-8");

String cp = request.getContextPath();

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

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

String result = "";

//임의의 데이터를 3번

//실제로 여기에 있는 데이터는 xml에서 데이터를 가지고 오거나(공용데이터)

//데이터베이스에서 데이터를 읽어온다

for(int i=1;i<=3;i++){

result += "{\"id\":\""+i ;

result += "\",\"userId\":\""+userId;

result += "\",\"userPwd\":\""+userPwd + "\"},";

}

result = result.substring(0,result.length()-1);

result = "["+result+"]";

out.println(result);

▶ 최종 result

[ {"id":"1","userId":"Lee","userPwd":"123"}, {"id":"1","userId":"Lee","userPwd":"123"}, {"id":"1","userId":"Lee","userPwd":"123"} ]

저작자표시

'STUDY > jQuery & Ajax' 카테고리의 다른 글

자바스크립트 객체 : JSON 표기법 (0)	2019.04.02
Document Object Model과 XML (0)	2019.04.02
자바스크립트로 Ajax 구현 (0)	2019.04.01
jQuery (0)	2019.03.29
Ajax (0)	2019.03.29

빨간머리앤

Ajax 간단한 예제

'STUDY > jQuery & Ajax' 카테고리의 다른 글

댓글

티스토리툴바

Ajax 간단한 예제

'STUDY > jQuery & Ajax' 카테고리의 다른 글

관련글

댓글

티스토리툴바