ajax 디비연동

it/ajax 2014. 9. 11. 11:10 Posted by 하얀나다

sql

create table ajax_temp (
 name  varchar(10)     not null,
  age  varchar(4)   not null,
   tel  varchar(14)  not null,
 addr  varchar(50)  not null
)

 

inputcustomer.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title> 고객관리 프로그램 </title>

<script language="javascript" >

 var httpReq = null;
 
 /*
 * 브라우저에 따른 XMLHttpRequest 객체 생성
 */
 function getInstance(){
  var httpReq = null;
 
  if( window.XMLHTTPObject ){
   // IE7 이상, Chrome, FireFox, Opera....
   httpReq = new XMLHttpRequest();
  }else { // IE6 이전 버전
   httpReq = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return httpReq; 
 }
 
 /*
 *  입력버튼이 눌렸을 때 
 */
 function insertCustomer(){
  // 1. XMLHttpRequest 객체 생성
  httpReq = getInstance();

  // 2. 요청에 대한 응답 처리 이벤트 리스터 등록 ( handleInsertCustomer )
  httpReq.onreadystatechange = handleInsertCustomer;
  

  // 3. 서버로 보낼 데이터 화면에서 얻어와 생성
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var tel = document.getElementById("tel").value;
  var addr = document.getElementById("addr").value;

  var url = "DataInput.jsp?name=" + name + "&age=" + age + "&tel=" + tel
    + "&addr=" + addr;

  // 4. 서버와 연결 요청 준비
  httpReq.open("GET", url, true);
  //alert(url);
  // 5. 실제 데이터 전송
  httpReq.send();

 }
 
 function handleInsertCustomer(){
  if (httpReq.readyState==4) {  
   // readyState==4 데이터 전송 완료인 경우
   document.inForm.name.value = "";
   document.inForm.age.value = "";
   document.inForm.tel.value = "";     
   document.inForm.addr.value = "";   
        
   alert("입력되었습니다.");   
  } 
 }
 
 /*
 * 가져오기 버튼이 눌렸을 때
 */
 function getData(){
  // 1. XMLHttpRequest 객체 생성
  httpReq = getInstance();
  // 2. 요청에 대한 응답 처리 이벤트 리스너 등록 ( handleStateChange )
  httpReq.onreadystatechange = handleStateChange;
  // 3. 서버와 연결 요청 준비
  httpReq.open("POST", "DataSelect.jsp", true);
  //4. 실제 데이터 전송
  httpReq.send();
 }
 
 function handleStateChange(){
  if (httpReq.readyState==4) {
   // readyState==4 데이터 전송 완료인 경우  
      
   //---------------------------------------------------------------
   // 서버로부터 받은 데이터 처리
      var xmlDocument = httpReq.responseXML;                 
                                 
   var customerList = xmlDocument.getElementsByTagName("customer")[0];
   var customer = customerList.childNodes[0]
   var writeStr = "";
   
   var customerTBL = document.getElementById("listTable");
   var tbody = customerTBL.getElementsByTagName("tbody")[0];
           
   var tbodyLength = tbody.childNodes.length;
   
   for(a = 1; a < tbodyLength; a++){
    var tmpElement=tbody.lastChild;
    tbody.removeChild(tmpElement);           
   }                            
                  
      
   for(i = 0; i < customerList.childNodes.length; i++){
                 
    customer  = customerList.childNodes[i];                 
    
    var trElement = document.createElement("tr");
    
    var tdElement1 = document.createElement("td");
    var tdElement2 = document.createElement("td");
    var tdElement3 = document.createElement("td");
    var tdElement4 = document.createElement("td");
    
    var txtElement1 = document.createTextNode(customer.getElementsByTagName("name")[0].childNodes[0].nodeValue);
    var txtElement2 = document.createTextNode(customer.getElementsByTagName("age")[0].childNodes[0].nodeValue);
    var txtElement3 = document.createTextNode(customer.getElementsByTagName("tel")[0].childNodes[0].nodeValue);
    var txtElement4 = document.createTextNode(customer.getElementsByTagName("addr")[0].childNodes[0].nodeValue);
        
    tdElement1.appendChild(txtElement1);    
    tdElement2.appendChild(txtElement2);    
    tdElement3.appendChild(txtElement3);    
    tdElement4.appendChild(txtElement4);    
    
    trElement.appendChild(tdElement1);
    trElement.appendChild(tdElement2);
    trElement.appendChild(tdElement3);
    trElement.appendChild(tdElement4);                      
    
    tbody.appendChild(trElement);
    customerTBL.appendChild(tbody);            
   } 
   setTimeout("getData()", 5000);           
  }
 }    

</script>

</head>


<!-- <body> -->
<body>

<h2> 고객정보 입력 </h2>

<form name="inForm" method="post">
<table border = 1>
 <tr>
  <td width="80" align="center">Name</td>
  <td width="50" align="center">Age</td>
  <td width="100" align="center">Tel</td> 
  <td width="250" align="center">Addr</td>
 </tr>
 <tr>
  <td align="center"><input type="text" size="8" name="name" id="name"></td>
  <td align="center"><input type="text" size="4" name="age" id="age"></td>
  <td align="center"><input type="text" size="12" name="tel" id="tel"></td>
  <td align="center"><input type="text" size="30" name="addr" id="addr"></td>
 </tr>
 <tr>
  <td colspan="4" align="center">
   <input type="button" value="입력" onClick="insertCustomer();">
  </td>
 </tr>
</table>

<br>
<hr>

<h2> 고객정보 목록보기  </h2>
<table border='0' width="510">
 <tr>
  <td align="right"><input type="button" value="가져오기" onClick="getData();"></td>
 </tr>
</table>
<table border = 1 id="listTable">
 <tr>
  <td width="80" align="center">Name</td>
  <td width="50" align="center">Age</td>
  <td width="100" align="center">Tel</td> 
  <td width="250" align="center">Addr</td>
 </tr>
</table>
<div id="myDiv"> </div>

</form>
</body>
</html>

 

input.jsp

 

<%@ page language="java" import="java.sql.*"%>
<%
String driver="oracle.jdbc.driver.OracleDriver";
String user="scott";
String pass="tiger";
String dbURL="jdbc:oracle:thin:@localhost:1521:orcl";


String sql;

Connection connection;
Statement stmt  = null;

String name;
String age;
String tel;
String addr;

name = request.getParameter("name");
age = request.getParameter("age");
tel = request.getParameter("tel");
addr = request.getParameter("addr");

try{
 Class.forName(driver);
 connection=DriverManager.getConnection(dbURL,user,pass);  
 
 sql = "insert into ajax_temp(name, age, tel, addr) values(";
 sql += "'" + name + "','" + age + "','" + tel + "','" + addr + "')";
 
 stmt = connection.createStatement();
 stmt.executeUpdate(sql);  

}
catch(ClassNotFoundException cne){
 
}catch(SQLException se){
}
%>

 

 

select.jsp

 

<%@page contentType="text/xml; charset=utf-8" %>
<%@ page language="java" import="java.sql.*"%>

<%
String driver="oracle.jdbc.driver.OracleDriver";
String user="scott";
String pass="tiger";
String dbURL="jdbc:oracle:thin:@localhost:1521:orcl";


String sql;
String rtn_xml;

Connection connection;
Statement stmt  = null;
ResultSet rs  = null;
rtn_xml = "";

try{
 Class.forName(driver);
 connection=DriverManager.getConnection(dbURL,user,pass);
 
 sql = "select * from ajax_temp";
 
 stmt = connection.createStatement();
 rs = stmt.executeQuery(sql);  
%>       
<customer>
<%
 while (rs.next()){  
  out.println("<person>");
  out.println("<name>" + rs.getString("name") + " </name>");
  out.println("<age>" + rs.getString("age") +  "</age>");
  out.println("<tel>" + rs.getString("tel") +  "</tel>");
  out.println("<addr>" + rs.getString("addr") +  "</addr>");
  out.println("</person>");  
 }  
%>
</customer>
<%
}
catch(ClassNotFoundException cne){
 
}catch(SQLException se){
}
%>

 

 

저작자표시

'it > ajax' 카테고리의 다른 글

loadjson  (0) 2014.09.11
jquery ajax 연동 post 방식  (0) 2014.09.11
jquery ajax 연동 get 방식  (0) 2014.09.11
아작스 ajax 서버 주고 받기  (0) 2014.09.11
 

티스토리툴바