336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
Ajax 의 실행순서
1. XMLHttpRequest 객체를 생성한다.
2. 처리 결과를 받을 이벤트 리스너(onreadystatechange)를 등록한다.
3. 서버로 보낼 데이터를 생성한다.
4. 클라이언트와 서버 간의 연결 요청을 준비(open() 메서드를 이용한다)하고 데이터를 전송한다.
여기서 데이터 전송방식(GET, POST), 서버 응답 방식 설정(동기, 비동기)를 설정한다.
5. 응답을 처리한다.
6. 데이터를 처리한다.
아래 예제는 html에서 XMLHttpRequest를 생성하여 jsp로 데이터를 전송하여 응답을 받아 처리하는 것입니다. 위에서 작성한 6가지 단계에 대해 주석을 작성하였습니다.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <script type="text/javascript"> function createXMLHttpRequest(){ if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {} try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {} throw new Error( "This browser does not support XMLHttpRequest." ) }; return new XMLHttpRequest(); } //1. XMLHttpRequest 객체를 생성한다. var xmlHttp = createXMLHttpRequest(); //6. 응답을 처리한다. 등록된 이벤트 리스너에서 응답을 처리한다. function handler() { //7. 데이터를 처리한다. if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { console.log(xmlHttp.responseText); } else { console.log("Something went wrong..."); } } } function show() { //2. 응답 처리를 위한 이벤트 리스너 등록한다. xmlHttp.onreadystatechange = handler; //3. 서버로 보낼 데이터를 생성한다. var stringQuery = 'data=ktko'; //4. 클라이언트와 서버간의 연결을 요청하고 데이터를 전송한다. /////////////////////////////////////////////////////////////////////////// //get방식 //xmlHttp.open("GET", "service.jsp?" + stringQuery); //xmlHttp.send(); //POST방식 xmlHttp.open("POST", "service.jsp"); xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlHttp.send(stringQuery); /////////////////////////////////////////////////////////////////////////// }; </script> <body> <a href="#" onclick="show();"> Click here</a> </html>
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <% String param = request.getParameter("data"); String data = param + " Success"; out.print(data); out.flush(); %>
jSON 사용시 예제
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <script type="text/javascript"> function createXMLHttpRequest(){ if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {} try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {} throw new Error( "This browser does not support XMLHttpRequest." ) }; return new XMLHttpRequest(); } //1. XMLHttpRequest 객체를 생성한다. var xmlHttp = createXMLHttpRequest(); //6. 응답을 처리한다. 등록된 이벤트 리스너에서 응답을 처리한다. function handler() { //7. 데이터를 처리한다. if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { var json = eval('(' + xmlHttp.responseText +')'); alert("Success Result : id => " + json.id + ", Password => " + json.pwd); } else { console.log("Something went wrong..."); } } } function show() { //2. 응답 처리를 위한 이벤트 리스너 등록한다. xmlHttp.onreadystatechange = handler; //3. 서버로 보낼 데이터를 생성한다. var stringQuery = 'id=ktko&pwd=1234'; //4. 클라이언트와 서버간의 연결을 요청하고 데이터를 전송한다. /////////////////////////////////////////////////////////////////////////// //get방식 //xmlHttp.open("GET", "service.jsp?" + stringQuery); //xmlHttp.send(); //POST방식 xmlHttp.open("POST", "service.jsp"); xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xmlHttp.send(stringQuery); /////////////////////////////////////////////////////////////////////////// }; </script> <body> <a href="#" onclick="show();"> Click here</a> </html>
<%@page import="org.json.simple.JSONObject"%> <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <% String id = request.getParameter("id"); String pwd = request.getParameter("pwd"); JSONObject obj = new JSONObject(); obj.put("id",id); obj.put("pwd", pwd); out.println(obj); %>
Json을 사용한 샘플 jsp는 Json-simple-1.1.jar을 import 하여 코딩하였습니다.
위와 관련된 예제들을 프로젝트로 압축하여 올렸습니다. 이클립스에서 import하여 예제를 확인하면 될 것 같습니다.
ServerTest.zip'Ajax&JSON' 카테고리의 다른 글
| JAVA에서 JSON 파싱하기 (0) | 2018.06.27 |
|---|---|
| JAVA에서 JSON 데이터 만들기 (0) | 2018.06.27 |
| JSON 사용하기 (0) | 2017.08.28 |
| JSON 개념잡기 (0) | 2017.08.28 |
| Ajax 시작하기 (0) | 2017.08.01 |
