web site
web 1.0
웹 프로그램의 처리 결과 : html + css + js(디자인된 페이지)
web 2.0
ajax(google → v8)
웹 프로그램의 처리 결과 : 데이터 (csv, xml, json)
→ websocket ( 실시간 : 예매 )
requestJSON.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
document.getElementById( 'btn' ).onclick = function(e){
const request = new XMLHttpRequest();
// readystate : 상태값
request.onreadystatechange = function(){
// readyState 상태값이 4일때만 처리한다.
if( request.readyState == 4 ){
if( request.status == 200 ){
let data = request.responseText.trim();
console.log( data );
const json = JSON.parse( data );
// console.log( json );
// console.log( json[0] );
console.log( json[0].name );
} else {
alert( "Web Site Error" );
}
}
};
request.open( 'get', './data/json3.jsp', true );
request.send();
};
};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
zipcode.jsp - 입력한 데이터를 받아서 데이터베이스에서 select하고 받은 결과값을 보여줌
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
<%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
<%
request.setCharacterEncoding("utf-8");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String strDong = request.getParameter("dong");
JSONArray jsonArray = new JSONArray();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb2" );
conn = dataSource.getConnection();
String sql = "select * from zipcode where dong like ?";
pstmt = conn.prepareStatement( sql );
pstmt.setString(1, strDong + "%");
rs = pstmt.executeQuery();
while( rs.next() ) {
JSONObject obj = new JSONObject();
obj.put( "zipcode", rs.getString("zipcode") );
obj.put( "sido", rs.getString("sido") );
obj.put( "gugun", rs.getString("gugun") );
obj.put( "dong", rs.getString("dong") );
obj.put( "ri", rs.getString("ri") );
obj.put( "bunji", rs.getString("bunji") );
jsonArray.add( obj );
}
} catch( NamingException e ) {
System.out.println( "[에러] " + e.getMessage() );
} catch( SQLException e ) {
System.out.println( "[에러] " + e.getMessage() );
} finally {
if( rs != null ) rs.close();
if( pstmt != null ) pstmt.close();
if( conn != null ) conn.close();
}
%>
<%= jsonArray%>
'🎧️ 강의듣기' 카테고리의 다른 글
| jQuery 문법 (0) | 2021.07.13 |
|---|---|
| ajax(websocket) jQuery 사용법 (0) | 2021.07.12 |
| 리눅스 활용/web1.0/web2.0/csv/xml/json/ (0) | 2021.07.07 |
| [리눅스] tomcat, jdbc, maradb, vsftpd, WAR, filezilla (0) | 2021.07.06 |
| [리눅스] systemctl, crontab, 파일시스템 (0) | 2021.07.05 |
