< DBConnection.java >

 

package test.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
 public static Connection getCon() throws SQLException{
  Connection con=null;
  try{
   Class.forName("oracle.jdbc.OracleDriver");
   String url="jdbc:oracle:thin:@localhost:1521:XE";
   con= DriverManager.getConnection(url,"SCOTT","TIGER");
   return con;
  }catch(ClassNotFoundException ce){
   System.out.println(ce.getMessage());
   return null;
  }
 }
}

 

1. 초기화면

 

2. 1을 등록하면 바로 옆에 검증 후 메시지 보여줌.

 3. 2을 등록하면 가능하다고 보여줌.

 

4. 관련 테이블 데이터

 

; 데이터로 ID 1이 들어가 있음.

 

 

< insert.html  >

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
 #idcheck{
  color:red;
  font-size:10pt;
 }
</style>
<script type="text/javascript">
 var xhr=null;
 
 function getXHR(){
  if(window.XMLHttpRequest){
   //IE 7.0이상,Chrome,Firefox,Safari,....
   return new XMLHttpRequest();
  }else{
   //IE 하위버젼(6.0이하)
   return new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 
 function idCheck(){
  xhr=getXHR();
  xhr.onreadystatechange=getResult;
  var id=document.getElementById("id").value;
  xhr.open("get","idcheck.jsp?id="+id,true);
  xhr.send(null);
 }
 
 function getResult(){
  if(xhr.readyState==4 && xhr.status==200){
   var xml=xhr.responseXML;
   var re=xml.getElementsByTagName("result")[0].firstChild.nodeValue;
   
   if(re=='true'){
    //span에 결과 출력하기
    document.getElementById("idcheck").innerHTML="이미 사용중인 아이디 입니다.";
   }else{
    document.getElementById("idcheck").innerHTML="사용가능한 아이디 입니다.";
   }
  }
 }
</script>
</head>
<body>
<h3>회원가입</h3>
<form method="post" action="insert.jsp">
 아이디 <input type="text" name="id" id="id" onkeyup="idCheck()"/>
 <!-- <input type="button" value="중복확인" onclick="idCheck()"/>  -->
 <span id="idcheck"></span>
 <br/>
 비밀번호 <input type="password" name="pwd"/><br/>
 이메일<input type="text" name="email"/><br/>
 <input type="submit" value="회원가입"/>
</form>
</body>
</html>

 

 

< idcheck.jsp >

 

<%@page import="java.io.PrintWriter"%>
<%@page import="java.sql.SQLException"%>
<%@page import="test.db.DBConnection"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
 //1.사용자가 입력한 아이디 얻어오기
 String id=request.getParameter("id");
 //2.해당아이디가 존재하는지 검사
 Connection con=null;
 PreparedStatement pstmt=null;
 ResultSet rs=null;
 boolean result=false;
 try{
  con=DBConnection.getCon();
  String sql="select * from members where id=?";
  pstmt=con.prepareStatement(sql);
  pstmt.setString(1, id);
  rs=pstmt.executeQuery();
  if(rs.next()){
   result=true;
  }
 }catch(SQLException se){
  System.out.println(se.getMessage());
  
 }finally{
  rs.close();
  pstmt.close();
  con.close();
 }
 
 ////////// 3.xml로 결과 응답하기 ///////////
 response.setContentType("text/xml;charset=euc-kr");
 PrintWriter pw=response.getWriter();
 pw.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
 pw.println("<data>");
 pw.println("<result>" + result + "</result>");
 pw.println("</data>");
 pw.close();
 
%>

 

 

 

 

 

 

 

 

 

 

 

'WEB > Ajax Json' 카테고리의 다른 글

AJAX #08 JSON  (0) 2013.05.04
AJAX #07 JSON  (0) 2013.05.04
AJAX #06 JSON 관련 jar, javascript파일  (0) 2013.05.04
AJAX #05 JSON  (0) 2013.05.04
AJAX #04 댓글 달기 예제  (1) 2013.05.04

- 서블릿에서 배열결과 던졌을때 받는예제

[[  test01.html ]]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<script type="text/javascript" src="../js/ajaxutil.js"></script>
<script type="text/javascript" src="../js/json.js"></script>
<script type="text/javascript">
    var xhr=null;
    function getData(){
        xhr=getXHR();
        xhr.onreadystatechange=callback;
        xhr.open("get","server1.jsp",true);
        xhr.send(null);
    }
    function callback(){
        if(xhr.readyState==4 && xhr.status==200){
            var str=xhr.responseText;
            //str을 json객체로 변환(json.js에 포함된 메소드)
            var data=str.parseJSON();
            var ss="";
            for(var i=0;i<data.list.length;i++){
                ss += data.list[i].num + "," +
                      data.list[i].id  + "," +
                      data.list[i].comments + "<br/>";
            }
            document.getElementById("result").innerHTML = ss;
        }
    }
</script>
</head>
<body>
<input type="button" value="서버에서 값받아오기" onclick="getData()"/>
<div id="result">
</div>
</body>
</html>
 



[[  server1.jsp  ]]
<%@page import="test.vo.CommentsVo"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%

///////json을 배열형태로 응답하기 //////
//db에서 데이터를 얻어왔다고 가정.
ArrayList<CommentsVo> list =new ArrayList<CommentsVo>();
list.add(new CommentsVo(1,"song","good!"));
list.add(new CommentsVo(2,"song","very good!"));
list.add(new CommentsVo(3,"song","very very good!"));

// json객체를 요소로 갖는 배열 객체 생성
JSONArray arr=new JSONArray();
//ArrayList안의 vo객체를 jsonobject타입으로 변환해서 arr에 추가하기
for(CommentsVo vo:list){
    JSONObject obj=new JSONObject();
    obj.put("num", vo.getNum());
    obj.put("id",vo.getId());
    obj.put("comments",vo.getComments());
    //json객체를 arr배열에 추가
    arr.add(obj);
}
//json배열을 값으로 갖는 json객체 생성(응답형 객체)
JSONObject json=new JSONObject();
json.put("list",arr);

//json으로 응답하기
response.setContentType("text/plain;charset=utf-8");
response.getWriter().write(json.toString());
%>

'WEB > Ajax Json' 카테고리의 다른 글

아이디 중복 체크하기 예제  (0) 2015.02.26
AJAX #07 JSON  (0) 2013.05.04
AJAX #06 JSON 관련 jar, javascript파일  (0) 2013.05.04
AJAX #05 JSON  (0) 2013.05.04
AJAX #04 댓글 달기 예제  (1) 2013.05.04

- 자바객체를 JSON객체로 변환하여 사용하는 예제

[[   test01.html   ]]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<script type="text/javascript" src="../js/ajaxutil.js"></script>
<script type="text/javascript" src="../js/json.js"></script>
<script type="text/javascript">
    var xhr=null;
    function getData(){
        xhr=getXHR();
        xhr.onreadystatechange=callback;
        xhr.open("get","server1.jsp",true);
        xhr.send(null);
    }
    function callback(){
        if(xhr.readyState==4 && xhr.status==200){
            var str=xhr.responseText;
            //str을 json객체로 변환(json.js에 포함된 메소드)
            var json=str.parseJSON();
            var tt=json.num + "," + json.id + "," + json.comments;
            document.getElementById("result").innerHTML = tt;
        }
    }
</script>
</head>
<body>
<input type="button" value="서버에서 값받아오기" onclick="getData()"/>
<div id="result">
</div>
</body>
</html>


[[  server1.jsp  ]]
<%@page import="java.io.PrintWriter"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="test.vo.CommentsVo"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
    CommentsVo vo = new CommentsVo(1,"song","very good!");
   //자바객체를 json객체타입으로 변화해 주는 객체
    //자바의 Map과 유사
    JSONObject jb = new JSONObject();
    if(vo!=null){
        jb.put("find","ok");
        jb.put("num",vo.getNum());
        jb.put("id",vo.getId());
        jb.put("comments", vo.getComments());
    }else{
        jb.put("find", "no");
    }
    //json으로 응답하기 위한 콘텐트타입 설정.
    response.setContentType("text/plain;charset=utf-8");
    PrintWriter pw = response.getWriter();
    pw.println(jb.toString());
    pw.close();
%>

'WEB > Ajax Json' 카테고리의 다른 글

아이디 중복 체크하기 예제  (0) 2015.02.26
AJAX #08 JSON  (0) 2013.05.04
AJAX #06 JSON 관련 jar, javascript파일  (0) 2013.05.04
AJAX #05 JSON  (0) 2013.05.04
AJAX #04 댓글 달기 예제  (1) 2013.05.04

- JSON 관련 jar파일다운 : 
       http://www.json.org/
            --> java 
                --> json-simple 
                     --> json-simple-1.1.1.jar 다운받아
                           web-inf/lib에 복사

- JSON관련 JavaScript :
     http://www.json.org/
           --> javascript
               -->json2.js
                      --> json.js 다운받아 사용한다.

json-simple-1.1.1.jar

json.zip

'WEB > Ajax Json' 카테고리의 다른 글

AJAX #08 JSON  (0) 2013.05.04
AJAX #07 JSON  (0) 2013.05.04
AJAX #05 JSON  (0) 2013.05.04
AJAX #04 댓글 달기 예제  (1) 2013.05.04
AJAX #03 XML 태그를 만들어 호출한 곳으로 전송하는 예제  (0) 2013.05.04


< JSON >


- 서로 다른 프로그래밍 언어간의 데이터 통신을 위한 표기법

 (읽고 쓰기 쉬운 표현법)


 - 경량의 데이터를 교환하는 방식으로 인터넷에서 데이터를 주고받을때 표현하는 방법


 - name/value 형태의 한쌍으로 표현된다.




예제1>

1) 호출 HTML

2) 데이터 JSP


[[  test01.html ]]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript" src="../js/ajaxutil.js"></script>

<script type="text/javascript">

    var xhr=null;

    function getData(){

        xhr=getXHR();

        xhr.onreadystatechange=callback;

        xhr.open("get","server1.jsp",true);

        xhr.send(null);

    }

    function callback(){

        if(xhr.readyState==4 && xhr.status==200){

            //json으로 응답이 오면 responseText로 얻어온다.

            var txt = xhr.responseText;//xml형태가 아니므로

            //txt={"id":"song","pwd":"1234"}

            //전송받은 txt를 json타입으로 변환하기.

            var json=eval("(" + txt + ")");

            //결과를 출력할 div참조값 얻어오기.

            var result=document.getElementById("result");

            result.innerHTML = json.id + "," + json.pwd;

        }

    } 

</script>

</head>

<body>

<input type="button" value="서버에서 값받아오기" onclick="getData()"/>

<div id="result">

</div>

</body>

</html>



[[   server1.jsp  ]]

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

{"id":"song","pwd":"1234"}



실행하면 server1.jsp에 있는 id,pwd값을 가져와 보여준다.





예제2>

- JSON 배열 예제 


[[  server2.jsp  ]]

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

{"list":[{"id":"song","pwd":"1234"},

          {"id":"park","pwd":"5678"},

          {"id":"lee","pwd":"1111"}

        ]}


--> 배열 형식 {"":[{...}] }


[[  test02.html  ]]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript" src="../js/ajaxutil.js"></script>

<script type="text/javascript">

    var xhr=null;

    function getData(){

        xhr=getXHR();

        xhr.onreadystatechange=getList;

        xhr.open("get","server2.jsp",true);

        xhr.send(null);

    }

    function getList(){

        if(xhr.readyState==4 && xhr.status==200){

            var str=xhr.responseText;

            var data=eval('('+str+')');

            //alert(data);

            /-

            var data = {"list":[{"id":"song","pwd":"1234"},

                                  {"id":"park","pwd":"5678"},

                                  {"id":"lee","pwd":"1111"}]};

            data.list[0].id

            *-

            var str="";

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

                str = str + data.list[i].id + "," + data.list[i].pwd + "<br/>";

            }

            //전송받은 데이터를 div에 넣기

            document.getElementById("result").innerHTML=str;

        }

    }

</script>

</head>

<body>

    <input type="button" value="서버로 부터 데이터 받기" onclick="getData()">

    <div id="result">

    </div>

</body>

</html>




+ Recent posts