리눅스 활용(정리)
- 기본 명령어
- 서버 구축법
- 순서대로 정리 ...
- 버전(최신 자료)
* 가상화 기반으로 서비스
=> 아마존 웹 서비스 (aws)
=> 네이버 클라우드
* web hosting
web site
web 1.0 - 새로고침이 빈번하게 발생
client → server
← html/css/js ← 웹 프로그램 언어
web 2.0 (한 페이지에서 동적으로 바뀜)
client → server
← data(csv, xml, json)
이클립스에서 프로젝트 생성
webapp 폴더 안에 data 폴더 생성 후 data.csv를 만든다.
data.csv
HTML5 + CSS3 입문,삼국미디어,유비,30000원
Javascript + JQuery 입문,삼국미디어,관우,32000원
Node.js 프로그래밍,삼국미디어,장비,22000원
HTML5 프로그래밍,삼국미디어,조자룡,30000원
data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<books>
<book>
<name>HTML5 + CSS3 입문</name>
<publisher>삼국미디어</publisher>
<author>유비</author>
<price>30000원</price>
</book>
<book>
<name>Javascript + JQuery 입문</name>
<publisher>삼국미디어</publisher>
<author>관우</author>
<price>32000원</price>
</book>
<book>
<name>Node.js 프로그래밍</name>
<publisher>삼국미디어</publisher>
<author>장비</author>
<price>22000원</price>
</book>
<book>
<name>HTML5 프로그래밍</name>
<publisher>삼국미디어</publisher>
<author>조자룡</author>
<price>30000원</price>
</book>
</books>
data.json
[
{
"name": "HTML5 + CSS3 입문",
"publisher": "삼국미디어",
"author": "유비",
"price": "30000원"
},
{
"name": "Javascript + JQuery 입문",
"publisher": "삼국미디어",
"author": "관우",
"price": "32000원"
},
{
"name": "Node.js 프로그래밍",
"publisher": "삼국미디어",
"author": "장비",
"price": "22000원"
},
{
"name": "HTML5 프로그래밍",
"publisher": "삼국미디어",
"author": "조자룡",
"price": "30000원"
}
]
JSON 검증은 아래에 사이트에서 검증가능
JSON Online Validator and Formatter - JSON Lint
jsp로 출력하기
csvEx01.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
out.println( "HTML5 + CSS3 입문,삼국미디어,유비,30000원" );
out.println( "Javascript + JQuery 입문,삼국미디어,관우,32000원" );
out.println( "Node.js 프로그래밍,삼국미디어,장비,22000원" );
out.println( "HTML5 프로그래밍,삼국미디어,조자룡,30000원" );
%>
* contentType="text/plain; 중요
xmlEx01.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
<%
out.println( "<books>" );
out.println( "<book>" );
out.println( "<name>HTML5 + CSS3 입문</name>" );
out.println( "<publisher>삼국미디어</publisher>" );
out.println( "<author>유비</author>" );
out.println( "<price>30000원</price>" );
out.println( "</book>" );
out.println( "<book>" );
out.println( "<name>Javascript + JQuery 입문</name>" );
out.println( "<publisher>삼국미디어</publisher>" );
out.println( "<author>관우</author>" );
out.println( "<price>32000원</price>" );
out.println( "</book>" );
out.println( "<book>" );
out.println( "<name>Node.js 프로그래밍</name>" );
out.println( "<publisher>삼국미디어</publisher>" );
out.println( "<author>장비</author>" );
out.println( "<price>22000원</price>" );
out.println( "</book>" );
out.println( "<book>" );
out.println( "<name>HTML5 프로그래밍</name>" );
out.println( "<publisher>삼국미디어</publisher>" );
out.println( "<author>조자룡</author>" );
out.println( "<price>30000원</price>" );
out.println( "</book>" );
out.println( "</books>" );
%>
* contentType="text/xml; 중요
* trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거
jsonEx01.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
[
{
"name": "HTML5 + CSS3 입문",
"publisher": "삼국미디어",
"author": "유비",
"price": "30000원"
},
{
"name": "Javascript + JQuery 입문",
"publisher": "삼국미디어",
"author": "관우",
"price": "32000원"
},
{
"name": "Node.js 프로그래밍",
"publisher": "삼국미디어",
"author": "장비",
"price": "22000원"
},
{
"name": "HTML5 프로그래밍",
"publisher": "삼국미디어",
"author": "조자룡",
"price": "30000원"
}
]
* contentType="text/plain;
* trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거
jsonEx02.jsp simple-json 라이브러리 사용
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
<%
JSONArray jsonArray = new JSONArray();
JSONObject obj1 = new JSONObject();
obj1.put( "name", "HTML5 + CSS3 입문" );
obj1.put( "publisher", "삼국미디어" );
obj1.put( "author", "유비" );
obj1.put( "price", "30000원" );
JSONObject obj2 = new JSONObject();
obj2.put( "name", "Javascript + JQuery 입문" );
obj2.put( "publisher", "삼국미디어" );
obj2.put( "author", "관우" );
obj2.put( "price", "32000원" );
JSONObject obj3 = new JSONObject();
obj3.put( "name", "Node.js 프로그래밍" );
obj3.put( "publisher", "삼국미디어" );
obj3.put( "author", "장비" );
obj3.put( "price", "22000원" );
JSONObject obj4 = new JSONObject();
obj4.put( "name", "HTML5 프로그래밍" );
obj4.put( "publisher", "삼국미디어" );
obj4.put( "author", "조자룡" );
obj4.put( "price", "30000원" );
jsonArray.add( obj1 );
jsonArray.add( obj2 );
jsonArray.add( obj3 );
jsonArray.add( obj4 );
out.println( jsonArray );
%>
데이터베이스에 데이터를 넣고 데이터를 가져오는 jsp파일
-- create table books
create table books(
seq int not null primary key auto_increment,
name varchar(100),
publisher varchar(20),
author varchar(10),
price int
);
insert into books values(1, 'HTML5 + CSS3 입문', '삼국미디어', '유비', 30000);
insert into books values(2, 'JavaScript + JQuery 입문', '삼국미디어', '관우', 32000);
insert into books values(3, 'Node.js 프로그래밍', '삼국미디어', '장비', 22000);
insert into books values(4, 'HTML5 프로그래밍', '삼국미디어', '조자룡', 30000);
xmlEx02.jsp
<%@ 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" %>
<%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
StringBuilder result = new StringBuilder();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb" );
conn = dataSource.getConnection();
String sql = "select * from books";
pstmt = conn.prepareStatement( sql );
rs = pstmt.executeQuery();
result.append( "<books>" );
while( rs.next() ) {
result.append( "<book>" );
result.append( "<name>" + rs.getString( "name" ) + "</name>" );
result.append( "<publisher>" + rs.getString( "publisher" ) + "</publisher>" );
result.append( "<author>" + rs.getString( "author" ) + "</author>" );
result.append( "<price>" + rs.getString("price") + "</price>" );
result.append( "</book>" );
}
result.append( "</books>" );
} 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();
}
%>
<%= result%>
webapp/WEB-INF/mariadb-java-client-2.7.3.jar
webapp/META-INF/context.xml
위에 두 파일 확인하고 위에 코드 실행하면 결과나옴
jsonEx03.jsp 데이터를 가져와서 json형식으로 출력해줌
<%@ page language="java" contentType="text/plain; 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" 태그라이브러리에 의한 공백라인을 제거 --%>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
JSONArray jsonArray = new JSONArray();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb" );
conn = dataSource.getConnection();
String sql = "select * from books";
pstmt = conn.prepareStatement( sql );
rs = pstmt.executeQuery();
while( rs.next() ) {
JSONObject obj = new JSONObject();
obj.put( "name", rs.getString("name") );
obj.put( "publisher", rs.getString("publisher") );
obj.put( "author", rs.getString("author") );
obj.put( "price", rs.getString("price") );
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();
}
out.println( jsonArray );
%>
javascript
ajax (asynchronous javascript and xml) - event로 응답 유무를 판단
XMLHttpRequest
URLOpenConnection
requestEx01.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( 'btn1' ).onclick = function(){
// alert( 'test' );
const request = new XMLHttpRequest();
/*
옵션 설정
'get' / 'post' 요청방식
url
false: 동기방식 / true: 비동기 방식
*/
request.open( 'get', './data/data.csv', false );
request.send();
// console.log( request.responseText );
document.body.innerHTML += request.responseText;
}
}
</script>
</head>
<body>
<button id="btn1">요청하기</button>
</body>
</html>
<%@ 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( 'btn1' ).onclick = function(){
// alert( 'test' );
const request = new XMLHttpRequest();
/*
옵션 설정
'get' / 'post' 요청방식
url
false: 동기방식 / true: 비동기 방식
*/
request.open( 'get', 'http://192.168.0.84:8080/AjaxEx01/csvEx01.jsp', false );
request.send();
// console.log( request.responseText );
// document.body.innerHTML += request.responseText;
document.getElementById( 'result' ).innerHTML += request.responseText;
}
}
</script>
</head>
<body>
<button id="btn1">요청하기</button>
<div id="result"></div>
</body>
</html>
다른 ip에 데이터를 요청하면 cross domain 문제가 발생할 수 있다.(CORS ERROR)
비동기식 흐름확인
requestEx02.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( 'btn1' ).onclick = function(){
const request = new XMLHttpRequest();
console.log( "1" );
request.open( 'get', './csvEx01.jsp', false );
console.log( "2" );
request.send();
console.log( "3" );
document.getElementById( 'result' ).innerHTML += request.responseText;
console.log( "4" );
};
document.getElementById( 'btn2' ).onclick = function(e){
const request = new XMLHttpRequest();
console.log( "1" );
request.open( 'get', './csvEx01.jsp', true );
console.log( "2" );
request.send();
console.log( "3" );
document.getElementById( 'result' ).innerHTML += request.responseText;
console.log( "4" );
};
document.getElementById( 'btn3' ).onclick = function(e){
const request = new XMLHttpRequest();
console.log( "1" );
// readystate : 상태값
request.onreadystatechange = function(){
// console.log( "5 : ", request.responseText );
// console.log( "5 : ", request.readyState );
/*
request.readyState
0: request가 초기화 안됨
1: 서버와 연결이 설정
2: 서버가 request 받음
3: request 처리중
4: 완료
*/
// readyState 상태값이 4일때만 처리한다.
if( request.readyState == 4 ){
// console.log( request.responseText );
console.log( request.status ); // 상태코드 페이지가 없으면 404
if( request.status == 200 ){
document.getElementById( 'result' ).innerHTML += request.responseText;
} else {
document.getElementById( 'result' ).innerHTML += "Web Site Error";
}
}
};
request.open( 'get', './csvEx01.jsp', true );
console.log( "2" );
request.send();
console.log( "3" );
};
};
</script>
</head>
<body>
<button id="btn1">동기식 요청</button>
<button id="btn2">비동기식 요청</button>
<button id="btn3">비동기식 확인</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
* readyState값이 4번일때만 처리한다
* request.status : 오류코드 404
requestEx03.jsp
ajax요청 코드
<%@ 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 ){
// 정상일때 디자인처리
} else {
alert( "Web Site Error" );
}
}
};
request.open( 'get', './csvEx01.jsp', true );
request.send();
};
};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
------------------------------------------------------------------------
<%@ 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 ){
// 정상일때 디자인처리
const data = request.responseText.trim();
const rowDatas = data.split( '\n' );
console.log( rowDatas.length );
console.log( rowDatas[0] );
let result = '<table border="1">';
for( let i = 0; i < rowDatas.length; i++){
let colDatas = rowDatas[i].split( ',' );
result += '<tr>';
result += ' <td>'+ colDatas[0] +'</td>';
result += ' <td>'+ colDatas[1] +'</td>';
result += ' <td>'+ colDatas[2] +'</td>';
result += ' <td>'+ colDatas[3] +'</td>';
result += '</tr>';
}
result += "</table>";
document.getElementById( 'result' ).innerHTML += result;
} else {
alert( "Web Site Error" );
}
}
};
request.open( 'get', './csvEx01.jsp', true );
request.send();
};
};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
requestXML1.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();
data = data.replace(/<books>/g, '');
data = data.replace(/<\/books>/g, '');
data = data.replace(/<book>/g, '');
data = data.replace(/<\/book>/g, '');
data = data.replace(/<name>/g, '');
data = data.replace(/<publisher>/g, '');
data = data.replace(/<author>/g, '');
data = data.replace(/<price>/g, '');
data = data.replace(/<\/name>/g, ',');
data = data.replace(/<\/publisher>/g, ',');
data = data.replace(/<\/author>/g, ',');
data = data.replace(/<\/price>/g, '\n');
const rowDatas = data.split( '\n' );
let result = '<table border="1">';
for( let i = 0; i < rowDatas.length-1; i++ ){
let colDatas = rowDatas[i].split( ',' );
result += '<tr>';
result += ' <td>'+ colDatas[0] +'</td>';
result += ' <td>'+ colDatas[1] +'</td>';
result += ' <td>'+ colDatas[2] +'</td>';
result += ' <td>'+ colDatas[3] +'</td>';
result += '</tr>';
}
result += '</table>';
document.getElementById( 'result' ).innerHTML += result;
} else {
alert( "Web Site Error" );
}
}
};
request.open( 'get', './xmlEx02.jsp', true );
request.send();
};
};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
requestXML2.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 data1 = request.responseText.trim();
// console.log( data1 );
let data2 = request.responseXML;
console.log( data2 );
const names = data2.getElementsByTagName( 'name' );
const publishers = data2.getElementsByTagName( 'publisher' );
const authors = data2.getElementsByTagName( 'author' );
const prices = data2.getElementsByTagName( 'price' );
// console.log( names );
// console.log( names.length );
// console.log( names[0] );
// 정식으로 접근하는 방법
// console.log( names[0].childNodes[0].nodeValue );
// console.log( names[0].innerHTML );
let result = '<table border="1">';
for(let i = 0; i < names.length; i++){
result += '<tr>';
result += '<td>' + names[i].innerHTML + '</td>';
result += '<td>' + publishers[i].innerHTML + '</td>';
result += '<td>' + authors[i].innerHTML + '</td>';
result += '<td>' + prices[i].innerHTML + '</td>';
result += '</tr>';
}
result += '</table>';
document.getElementById( 'result' ).innerHTML += result;
} else {
alert( "Web Site Error" );
}
}
};
request.open( 'get', './xmlEx02.jsp', true );
request.send();
};
};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
데이터베이스에 있는 zipcode데이터를 활용하여 웹페이지에 테이블로 보여주기
./data/zipcodeXML.jsp
<%@ 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" %>
<%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
<%
request.setCharacterEncoding("utf-8");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String strDong = request.getParameter("dong");
StringBuilder result = new StringBuilder();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb" );
conn = dataSource.getConnection();
String sql = "select * from zipcode where dong like ?";
pstmt = conn.prepareStatement( sql );
pstmt.setString(1, strDong + "%");
rs = pstmt.executeQuery();
result.append( "<addresses>" );
while( rs.next() ) {
result.append( "<address>" );
result.append( " <zipcode>" + rs.getString( "zipcode" ) + "</zipcode>" );
result.append( " <sido>" + rs.getString( "sido" ) + "</sido>" );
result.append( " <gugun>" + rs.getString( "gugun" ) + "</gugun>" );
result.append( " <dong>" + rs.getString( "dong" ) + "</dong>" );
result.append( " <ri>" + rs.getString( "ri" ) + "</ri>" );
result.append( " <bunji>" + rs.getString( "bunji" ) + "</bunji>" );
result.append( "</address>" );
}
result.append( "</addresses>" );
} 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();
}
%>
<%= result%>
./requestXml3.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>
<style>
table, td{
border: 1px solid #000;
border-collapse: collapse;
}
td{
padding: 5px 5px;
}
</style>
<script>
window.onload = function() {
document.getElementById( 'btn' ).onclick = function(e){
document.getElementById( 'result' ).innerHTML = "";
const request = new XMLHttpRequest();
// readystate : 상태값
request.onreadystatechange = function(){
// readyState 상태값이 4일때만 처리한다.
if( request.readyState == 4 ){
if( request.status == 200 ){
// let data1 = request.responseText.trim();
// console.log( data1 );
let data2 = request.responseXML;
console.log( data2 );
const zipcodes = data2.getElementsByTagName( 'zipcode' );
const sidos = data2.getElementsByTagName( 'sido' );
const guguns = data2.getElementsByTagName( 'gugun' );
const dongs = data2.getElementsByTagName( 'dong' );
const ris = data2.getElementsByTagName( 'ri' );
const bunjis = data2.getElementsByTagName( 'bunji' );
// console.log( names );
// console.log( names.length );
// console.log( names[0] );
// 정식으로 접근하는 방법
// console.log( names[0].childNodes[0].nodeValue );
// console.log( names[0].innerHTML );
let result = '<table width="800">';
for(let i = 0; i < zipcodes.length; i++){
result += '<tr>';
result += '<td>' + zipcodes[i].innerHTML + '</td>';
result += '<td>' + sidos[i].innerHTML + '</td>';
result += '<td>' + guguns[i].innerHTML + '</td>';
result += '<td>' + dongs[i].innerHTML + '</td>';
result += '<td>' + ris[i].innerHTML + '</td>';
result += '<td>' + bunjis[i].innerHTML + '</td>';
result += '</tr>';
}
result += '</table>';
document.getElementById( 'result' ).innerHTML += result;
} else {
alert( "Web Site Error" );
}
}
};
request.open( 'get', './data/zipcodeXML.jsp?dong='+ document.getElementById('dong').value, true );
request.send();
};
};
</script>
</head>
<body>
<input type="text" id="dong" />
<button id="btn">검색</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>
'🎧️ 강의듣기' 카테고리의 다른 글
ajax(websocket) jQuery 사용법 (0) | 2021.07.12 |
---|---|
web/xml/json/jsonparse (0) | 2021.07.08 |
[리눅스] tomcat, jdbc, maradb, vsftpd, WAR, filezilla (0) | 2021.07.06 |
[리눅스] systemctl, crontab, 파일시스템 (0) | 2021.07.05 |
리눅스(Linux) 사용자 계정 및 패키지 관리 (0) | 2021.07.02 |