160519: 46회차
Programming
2016. 5. 19. 18:28
종료하기 전 티스토리 네이버 로그아웃 할 것
1. 툴
동일
추가시:
2. 폴더
동일
추가시:
3. 사용할 사이트
동일
추가시:
4. 공부하는 것
[10] [제시어] JDBC 설정, DB 설정, Servlet
1. DBOpen,DBClose,Constant
utility 패키지에 가져오기
WEB-INF/lib 폴더에 ojdbc6.jar 파일가져오기
2. Java Test
>>>>> JDBC_Test.java
package utility;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
/**
* JAVA Client Test
*/
public class JDBC_Test {
public static void main(String[] args) {
Connection con = DBOpen.getConnection();
PreparedStatement pstmt = null;
ResultSet rs = null;
// 테이블의 갯수 리턴
String sql="SELECT count(*) as cnt FROM tab";
try{
pstmt = con.prepareStatement(sql);
rs = pstmt.executeQuery();
if (rs.next() == true){
System.out.println("현재 생성된 테이블 갯수: " + rs.getInt("cnt"));
}
}catch(Exception e){
System.out.println(e);
}finally{
DBClose.close(con, pstmt, rs);
}
}
}
3. DB 설정, Servlet
1) 테이블 구조
CREATE TABLE suggest(
suggestno NUMBER(7) NOT NULL,
sqlpart VARCHAR(20) NOT NULL,
sqlquery VARCHAR(100) NOT NULL,
etc VARCHAR(100) NULL,
PRIMARY KEY(suggestno)
);
DROP SEQUENCE suggest_seq;
CREATE SEQUENCE suggest_seq
START WITH 10 --시작번호, 0~9는 테스트 일련 번호
INCREMENT BY 1 --증가값
MAXVALUE 9999999 --최대값
CACHE 2 --시쿼스 변경시 자주 update되는 것을 방지하기위한 캐시값
NOCYCLE;
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'INSERT',
'INSERT 테이블명 VALUES( ~ )', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'INSERT',
'INSERT 테이블명 ( ~ ) VALUES( ~ )', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'SELECT',
'SELECT * FROM ~', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'SELECT',
'SELECT * FROM ~ WHERE ~', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'UPDATE',
'UPDATE ~ SET ~', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'UPDATE',
'UPDATE ~ SET ~ WHERE ~', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'DELETE',
'DELETE FROM ~', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, 'DELETE',
'DELETE FROM ~ WHERE ~', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '자바코드',
'자바001', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '자바코드',
'자바002', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '자바코드',
'자바003', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 15inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 16inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 17inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 18inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 19inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 20inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 21inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 22inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 23inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 24inch', '');
INSERT INTO suggest(suggestno, sqlpart, sqlquery, etc)
VALUES(suggest_seq.nextval, '모니터',
'LCD 25inch', '');
SELECT * FROM suggest;
COMMIT;
SELECT COUNT(sqlquery) as cnt
FROM suggest
WHERE sqlquery LIKE 'INS%'
ORDER BY sqlquery;
SELECT COUNT(sqlquery) as cnt
FROM suggest
WHERE sqlquery LIKE '자%'
ORDER BY sqlquery;
SELECT sqlquery
FROM suggest
WHERE sqlquery LIKE 'INS%'
ORDER BY sqlquery;
SELECT sqlquery
FROM suggest
WHERE sqlquery LIKE '자%'
ORDER BY sqlquery;
2. web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>ojttest</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- *************** Suggest Servlet *************** -->
<servlet><!-- 서블릿 이름과 서블릿 클래스 선언 -->
<description></description>
<display-name>Suggest</display-name>
<servlet-name>Suggest</servlet-name>
<servlet-class>suggest.Suggest</servlet-class>
</servlet>
<servlet-mapping><!-- URL상으로 접근해야 하는 경로명 -->
<servlet-name>Suggest</servlet-name>
<url-pattern>/suggest</url-pattern>
</servlet-mapping>
</web-app>
3. Servlet
>>>>> Suggest.java
package suggest;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import utility.DBOpen ;
import utility.DBClose;
public class Suggest extends javax.servlet.http.HttpServlet {
// 서블릿 버전
static final long serialVersionUID = 1L;
public Suggest() {
super();
}
// Form - get 방식 처리
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//출력시 사용할 문자셋 지정
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("utf-8");
//출력시 사용할 객체 생성
PrintWriter out = response.getWriter();
// 문자셋 테스트
// Utility.charsetTest(request.getParameter("keyword"));
String keyword = request.getParameter("keyword");
System.out.println("servlet keyword: " + keyword);
int count = 0;
if (keyword == null){
keyword ="";
}
Connection con = DBOpen.getConnection();
PreparedStatement pstmt = null;
ResultSet rs = null;
StringBuffer sql = null;
try {
sql = new StringBuffer();
sql.append(" SELECT COUNT(sqlquery)");
sql.append(" FROM suggest");
sql.append(" WHERE sqlquery LIKE '" + keyword +"%'");
sql.append(" ORDER BY sqlquery ASC");
pstmt = con.prepareStatement(sql.toString());
rs = pstmt.executeQuery(); // 쿼리 실행
if (rs.next()){
count = rs.getInt(1); // 수량 산출
}
sql.delete(0, sql.toString().length()); // buffer clear
sql.append(" SELECT sqlquery");
sql.append(" FROM suggest");
sql.append(" WHERE sqlquery LIKE '" + keyword +"%'");
sql.append(" ORDER BY sqlquery ASC");
pstmt = con.prepareStatement(sql.toString());
rs = pstmt.executeQuery(); // 쿼리 실행
// Client로 지정
// 문자열 조합: 갯수|
out.print(count + "|");
while(rs.next()) {
count = count - 1;
String key = rs.getString("sqlquery");
out.print(key);
if (count > 0){ // 값의 중간만 콤마 출력
out.print(",");
}
}
}catch(Exception ex) {
System.out.println("Exception" + ex);
}finally{
DBClose.close(con,pstmt, rs);
}
}
// Form - post 방식 처리
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// GET 방식으로 전달
doGet(request, response);
}
}
// 출력시 사용할 문자셋 지정
response.setContentType("text/html;charset=UTF-8"); //브라우저
request.setCharacterEncoding("utf-8"); //post 방식 처리해 주는 용 -.-)
| |||||||||
------------------------------------------------------
홈페이지 top에다가
<ul>
<li>
<form name="search">
<input type='text' name='keyword'>
<input type='submit' value="search">
</form></li>
</ul>
-top에다가 suggest_client의 script 복붙
이거 리스트를 짜서 연결할 것 - 이뿌게 안함 (css 안함)
http://www.lectureblue.pe.kr/reqtiles/read.jsp?bbsno=225&nowPage=1&col=&word=&code=14
------------------------------------------------
일단 하긴 했음...
hidden이 관건이었습니다
------------------
[12] Ajax-XML DOM, XSL 로딩(responseXML)
1. XML문서의 로딩
>>>>> WebContent/xml/books.jsp
<?xml version="1.0" encoding="utf-8" ?>
<%@ page contentType="text/xml; charset=utf-8" %>
<books>
<book>
<title><![CDATA[ Head First HTML with CSS & XHTML]]></title>
<author>Eric Freeman , Elisabeth Freeman</author>
</book>
<book>
<title>Head First JavaScript</title>
<author>Michael Morrison </author>
</book>
<book>
<title>Head Rush Ajax</title>
<author>Brett McLaughlin</author>
</book>
</books>
>>>>> /xml/viewBooks.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>책정보 보기</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
function loadBooks() {
// 파리미터: 요청 URL, 파라미터 목록, 응답 처리 함수, GET/POST 메소드
sendRequest("books.jsp", null, loadedBooks, "GET");
}
function loadedBooks() {
if (httpRequest.readyState == 4) { // 서버로부터 모든 데이터 로딩
if (httpRequest.status == 200) { // 정상 처리
var xmlDoc = httpRequest.responseXML; // 응답 문자열이 XML
// <book>태그 목록을 배열로 추출
var bookList = xmlDoc.getElementsByTagName("book");
// length: 갯수
var message = "책 개수 : "+bookList.length+"권\n";
// 출력
for (var i = 0 ; i < bookList.length ; i++) {
// 첫번째 <book>태그 추출
var book = bookList.item(i);
// .getElementsByTagName("title"): <book>태그에서 <title>추출
// .item(0): <title>태그의 첫번째 자식 태그 추출
// .firstChild: 태그 문자열 태그, 'Core JAVA' 값 태그
// .nodeValue : 태그 문자열 태그의 값, 'Core JAVA' 문자열
var titleValue = book.getElementsByTagName("title").item(0)
.firstChild.nodeValue;
// author태그의 값
// getElementsByTagName("author").item(0).firstChild.nodeValue;
var authorValue = book.getElementsByTagName("author").item(0)
.firstChild.nodeValue;
// 모든 태그의 값 조합
message += titleValue + "(" + authorValue + ")\n";
}
alert(message);
}
}
}
// 페이지가 브러우저로 로딩되면 자동으로 loadBooks()함수를 실행
window.onload = function() {
loadBooks();
}
</script>
</head>
<body>
책 정보를 alert 으로 출력
</body>
</html>
-----------------------------------------
[12] Ajax-XML DOM, XSL 로딩(responseXML)
1. XML문서의 로딩
>>>>> WebContent/xml/books.jsp
<?xml version="1.0" encoding="utf-8" ?>
<%@ page contentType="text/xml; charset=utf-8" %>
<books>
<book>
<title><![CDATA[ Head First HTML with CSS & XHTML]]></title>
<author>Eric Freeman , Elisabeth Freeman</author>
</book>
<book>
<title>Head First JavaScript</title>
<author>Michael Morrison </author>
</book>
<book>
<title>Head Rush Ajax</title>
<author>Brett McLaughlin</author>
</book>
</books>
>>>>> /xml/viewBooks.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>책정보 보기</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
function loadBooks() {
// 파리미터: 요청 URL, 파라미터 목록, 응답 처리 함수, GET/POST 메소드
sendRequest("books.jsp", null, loadedBooks, "GET");
}
function loadedBooks() {
if (httpRequest.readyState == 4) { // 서버로부터 모든 데이터 로딩
if (httpRequest.status == 200) { // 정상 처리
var xmlDoc = httpRequest.responseXML; // 응답 문자열이 XML
// <book>태그 목록을 배열로 추출
var bookList = xmlDoc.getElementsByTagName("book");
// length: 갯수
var message = "책 개수 : "+bookList.length+"권\n";
// 출력
for (var i = 0 ; i < bookList.length ; i++) {
// 첫번째 <book>태그 추출
var book = bookList.item(i);
// .getElementsByTagName("title"): <book>태그에서 <title>추출
// .item(0): <title>태그의 첫번째 자식 태그 추출
// .firstChild: 태그 문자열 태그, 'Core JAVA' 값 태그
// .nodeValue : 태그 문자열 태그의 값, 'Core JAVA' 문자열
var titleValue = book.getElementsByTagName("title").item(0)
.firstChild.nodeValue;
// author태그의 값
// getElementsByTagName("author").item(0).firstChild.nodeValue;
var authorValue = book.getElementsByTagName("author").item(0)
.firstChild.nodeValue;
// 모든 태그의 값 조합
message += titleValue + "(" + authorValue + ")\n";
}
alert(message);
}
}
}
// 페이지가 브러우저로 로딩되면 자동으로 loadBooks()함수를 실행
window.onload = function() {
loadBooks();
}
</script>
</head>
<body>
책 정보를 alert 으로 출력
</body>
</html>
실습1)
>>> teaminfo.jsp
<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<teaminfo>
<team>
<name>홍길동</name>
<phone>010-2345-2345</phone>
<address>서울시 종로구</address>
</team>
<team>
<name>김길동</name>
<phone>010-1234-1234</phone>
<address>서울시 관악구</address>
</team>
<team>
<name>박길동</name>
<phone>010-9023-9023</phone>
<address>서울시 강남구</address>
</team>
<team>
<name>이길동</name>
<phone>010-0987-7890</phone>
<address>인천시 남동구</address>
</team>
<team>
<name>이길동</name>
<phone>010-0987-7890</phone>
<address>인천시 남동구</address>
</team>
</teaminfo>
>>> teaminfo.html
--> teaminfo.jsp를 요청후 응답받은후
결과를 table로 뿌려줍니다.
-------------------------
내가 한 것:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../ajax/httpRequest.js"></script>
<script type="text/javascript">
window.onload = function(){
loadTable();
}
function loadTable(){
sendRequest("teaminfo.jsp", null, loadedTable, "GET");
}
function loadedTable(){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
var xmlDoc = httpRequest.responseXML;
var teaminfo = xmlDoc.getElementsByTagName("team");
var message = "팀 개수: " + teaminfo.length + "\n";
for(var i = 0; i<teaminfo.length; i++){
var team = teaminfo.item(i);
var nameValue = team.getElementsByTagName("name").item(0).firstChild.nodeValue;
var phoneValue = team.getElementsByTagName("phone").item(0).firstChild.nodeValue;
var addressValue = team.getElementsByTagName("address").item(0).firstChild.nodeValue;
message += nameValue + "\n" + phoneValue + "\n" + addressValue + "\n";
document.write('<table border="10px" style= "border-collapse: collapse;">');
if(i==0){
document.write('<tr >');
document.write('<th>');
document.write('이름  ');
document.write('</th>');
document.write('<th>');
document.write('전화  ');
document.write('</th>');
document.write('<th>');
document.write('주소  ');
document.write('</th>');
document.write('</tr>');
}
document.write('<tr>');
document.write('<td >');
document.write(nameValue);
document.write('</td>');
document.write('<td>');
document.write(phoneValue);
document.write('</td>');
document.write('<td>');
document.write(addressValue);
document.write('</td>');
document.write('</tr>');
document.write('</table>');
}
}
}
}
</script>
</head>
<body>
<!-- teaminfo.jsp를 요청후 응답받은후
결과를 table로 뿌려줍니다. -->
</body>
</html>
-------------------------
남이 한 것
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Insert title here</title> | |
| <script type="text/javascript" src="../Ajax/httpRequest.js"></script> | |
| <script> | |
| function loadBooks() { | |
| sendRequest("teaminfo.jsp", null, loadedBooks, "GET"); | |
| } | |
| function loadedBooks() { | |
| if (httpRequest.readyState == 4) { | |
| if (httpRequest.status == 200) { | |
| var xmlDoc = httpRequest.responseXML; | |
| var teamInfo = xmlDoc.getElementsByTagName("team"); | |
| document.write("<table border=1 style='border-collapse:collapse;'>"); | |
| document.write("<tr>"); | |
| document.write("<td>성명</td>"); | |
| document.write("<td>전화번호</td>"); | |
| document.write("<td>주소</td>"); | |
| document.write("</tr>"); | |
| for (var i = 0 ; i < teamInfo.length ; i++) { | |
| var team = teamInfo.item(i); | |
| document.write("<tr>"); | |
| document.write("<td>"); | |
| var name = team.getElementsByTagName("name").item(0).firstChild.nodeValue; | |
| document.write(name + "</td>"); | |
| document.write("<td>"); | |
| var phone = team.getElementsByTagName("phone").item(0).firstChild.nodeValue; | |
| document.write(phone +"</td>"); | |
| document.write("<td>"); | |
| var address = team.getElementsByTagName("address").item(0).firstChild.nodeValue; | |
| document.write(address + "</td>"); | |
| document.write("</tr>"); | |
| } | |
| document.write("</table>"); | |
| } | |
| } | |
| } | |
| window.onload = function() { | |
| loadBooks(); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> ---------------------------------------------------- 2. XML, XSL 문서의 로딩 >>>>> WebContent/xml/books.xsl <?xml version="1.0" encoding="UTF-8" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method = "html" indent="yes" encoding="UTF-8" /> <xsl:template match="books"> <ul> <xsl:for-each select="book"> <li><b><xsl:value-of select="title" /></b> (<i><xsl:value-of select="author" /></i>) </li> </xsl:for-each> </ul> </xsl:template> </xsl:stylesheet> XSL- xml 같은건데 넘나 이븐것 내가 원하는 형식으로 xml값을 표현하려고 쓰는 것 -.- 그래서 테이블이나 리스트 형식으로도 변환할 수 있습니다. css도 적용할 수 있고 ^^ 넘나조은것 [13] JSON(JavaScript Object Notation), eval() 함수 [01] JSON(JavaScript Object Notation) - 자바 스크립트 객체 표기법 - JSON은 데이터 저장과 교환에서 사용합니다. - XML에 비해서 매우 적은 네트워크 트래픽을 동반하며, XML을 대체할 수 있는 데이터 표현 기술입니다. |
>>>> JSON Example
------------------------------------------------------------------------------
------------------------------------------------------------------------------
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
>>>> XML Example
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
1. JSON 구문
- JSON DATA는 name/value 한쌍으로 표현합니다.
"firstName":"John"
- JSON DATA는 ,로 구분해서 표현합니다.
- JSON Object 는 {,} 를 사용합니다.
{"firstName":"John", "lastName":"Doe"}
- JSON Array는 [, ]를 사용합니다.
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName":"Jones"}
]
>>>> WebContent/json/json1.html
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(text); //문자열을ㅇ 배열로 바꿈
document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>
</body>
</html>
1. JSON 응답을 객체로 변환
>>>>> WebContent/json/member_json.jsp
<%@ page contentType="text/plain; charset=UTF-8" %>
{
code: 'success'
,
data: {
member:
[
{
name: '박재성',
id: 'spring',
sno: '한빛미디어_01'
}
,
{
name: '박재성2',
id: 'spring2',
sno: '한빛미디어_02'
}
]
}
}
>>>>> WebContent/json/loadMemberFromJSON.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSON으로부터 객체 생성</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
window.onload = function() {
// 요청 URL, 파라미터, 콜백 처리 함수, 전송 메소드 방식
sendRequest("member_json.jsp", "", viewInfo, "GET");
}
// 응답 처리 메소드, req = Request 클래스에서 만든 XMLHttpRequest의 객체
function viewInfo() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
// JSON 표기법 문자열로 인식
var result = eval("(" + httpRequest.responseText + ")");
// code에 해당
if (result.code == 'success') {
//data.member에 해당
var m = result.data.member;
for(i=0; i< m.length; i++){
alert(m[i].id + " [" + m[i].name + "] " + m[i].sno);
}
} else {
alert("실패");
}
} else {
alert("에러 발생:"+httpRequest.status);
}
}
}
</script>
</head>
<body>
</body>
</html>
2. XML, JSON 응답을 객체로 변환
- XML태그를 찾는 방법: docXML.getElementsByTagName("data")
- XML태그의 값을 가져오는 방법: .item(0).firstChild.nodeValue;
>>>>> WebContent/ajax/json/member_xmljson.jsp
- XML 태그안에 데이터는 JSON 표기법을 적용한 경우입니다.
- CDATA는 분석하여 Parsing하지말고 단순 문자열 처리를 합니다.
<?xml version="1.0" encoding="utf-8" ?>
<%@ page contentType="text/xml; charset=utf-8" %>
<result>
<code>success</code>
<data><![CDATA[
{
name: '최범균',
id: 'MVC Model 2',
sno: 'GM-0001'
}
]]>
</data>
</result>
>>>>> WebContent/json/loadMemberFromXMLJSON.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>XML JSON으로부터 객체 생성</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
window.onload = function() {
sendRequest("member_xmljson.jsp", "", viewInfo, "GET");
}
function viewInfo() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
// 응답을 XML로 받음
var docXML = httpRequest.responseXML;
// code 태그 추출
var code = docXML.getElementsByTagName("code")
.item(0).firstChild.nodeValue;
if (code == 'success') {
// data 태그 추출
var dataJSON = docXML.getElementsByTagName("data")
.item(0).firstChild.nodeValue;
// JSON으로 인식 처리
var data = eval("("+dataJSON+")");
alert(data.name + "[" + data.id +"]");
} else {
alert("실패");
}
} else {
alert("에러 발생:"+httpRequest.status);
}
}
}
</script>
</head>
<body>
</body>
</html>
3. eval()함수와 JSON과의 사용
eval() 함수의 사용 목적은 객체를 만들기 위함이고, json응답 또한 객체로 전송됩니다.
json응답을 객체로 만들 때 eval함수에서 발생하는 invalid label error 때문에 괄호가 필요합니다.
이유는 eval이 처음 만나는 ':' ☜ 이거 전까지를 label로 해석하기 때문입니다.
label : statement 이런 구조로 해석하기 때문에 문제가 발생합니다.
그러므로 ( )를 넣어주어 label로 해석되는 문제를 해결할 수 있습니다.
var a = eval("( )") // object일 경우
var a = eval("") // 배열일 경우
---------------------------------------------------
[14] JSON Framework
1. JSON Framework
2) JSON Array
>>>> array.jsp
>>>> array.html
3) JSON Object 및 Array의 Value
>>>> json.SungjukDTO.java
>>>> arrayObject.jsp
>>>> arrayObject.html
- 요청결과를 JSON 표기로 자동변환해서 응답합니다.
- Download : http://json.org 아래부분 -> java -> json-simple
https://github.com/fangyidong/json-simple
https://code.google.com/archive/p/json-simple/
1) JSON Object
>>>> object.jsp
1) JSON Object
>>>> object.jsp
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@page import="org.json.simple.JSONObject" %>
<%
JSONObject obj = new JSONObject();
obj.put("name","Flex 강사");
obj.put("height",new Integer(175));
obj.put("weight",new Double(60.5));
obj.put("married",new Boolean(false));
obj.put("property", null);
out.print(obj); - 반드시 출력해야 함★★ - 출력 안해주면 무쓸모니까 이게 포인트임!!
%>
>>>> object.html
>>>> object.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
window.onload=function(){
sendRequest("object.jsp", "", response, "POST");
}
function response(){
if(httpRequest.readyState == 4){
if(httpRequest.status ==200){
var obj = eval("("+httpRequest.responseText+")"); //이발함수로 감싸야함!
var html = "<table border='1'><caption>정보내용</caption>";
html += "<tr><td>"+obj.name+"</td><td>"+obj.height+"</td>";
html += "<td>"+obj.weight+"</td><td>"+obj.married+"</td>";
html += "<td>"+obj.property+"</td></tr></table>";
var ojson = document.getElementById("objJson");
ojson.innerHTML = html;
}
}
}
</script>
</head>
<body>
<div id="objJson"></div>
</body>
</html>
2) JSON Array
>>>> array.jsp
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="org.json.simple.*" %>
<%
JSONArray list = new JSONArray();
list.add("가길동");
list.add("나길동");
list.add("다길동");
list.add("라길동");
list.add("마길동");
out.print(list.toString());
%>
>>>> array.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
window.onload=function(){
sendRequest("array.jsp","",response,"POST");
}
function response(){
if(httpRequest.readyState == 4){
if(httpRequest.status ==200){
var data = eval(httpRequest.responseText); //배열이라서 ()없음
//alert(data.length);
var html = "<table border='1'>";
html += "<tr><th>이름</th></tr>";
// alert(html);
for(var i=0; i<data.length; i++){
html += "<tr><td>"+data[i]+"</td></tr>";
}
html += "</table>";
var arrayjson = document.getElementById("arrayjson");
arrayjson.innerHTML = html;
}
}
}
</script>
</head>
<body>
<div id="arrayjson"></div>
</body>
</html>
3) JSON Object 및 Array의 Value
>>>> json.SungjukDTO.java
package json;
import org.json.simple.JSONObject;
public class SungjukDTO {
private String name;
private int kuk;
private int eng;
public SungjukDTO() {
}
public SungjukDTO(String name, int kuk, int eng) {
super();
this.name = name;
this.kuk = kuk;
this.eng = eng;
}
public Object toJSONObject(){
JSONObject json = new JSONObject();
json.put("name", name);
json.put("kuk", kuk);
json.put("eng", eng);
return json;
} //DTO 값을 json오브젝트값으로 저장해줌
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getKuk() {
return kuk;
}
public void setKuk(int kuk) {
this.kuk = kuk;
}
public int getEng() {
return eng;
}
public void setEng(int eng) {
this.eng = eng;
}
}
>>>> arrayObject.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="org.json.simple.*" %>
<%@ page import="java.util.*,json.*" %>
<%
List list = new ArrayList();
SungjukDTO dto = null;
//JSONObject obj = new JSONObject();
dto = new SungjukDTO("가길동", 100, 100);
list.add(dto);
dto = new SungjukDTO("나길동", 90, 900);
list.add(dto);
dto = new SungjukDTO("다길동", 80, 80);
list.add(dto);
dto = new SungjukDTO("라길동", 70, 70);
list.add(dto);
dto = new SungjukDTO("마길동", 60, 60);
list.add(dto);
//최종 응답형태를 JSONObject
JSONObject json = new JSONObject();
//list를 -> JSONArray로 변환
JSONArray jarray = new JSONArray();
dto = new SungjukDTO();
for (int i=0;i<list.size();i++) {
dto = (SungjukDTO)list.get(i);
//SungjukDTO -> JSONObject로 변환
jarray.add(dto.toJSONObject());
}
json.put("list",jarray);
out.print(json);
%>
>>>> arrayObject.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>JSON으로부터 객체 생성</title>
<script type="text/javascript" src="../basic/httpRequest.js"></script>
<script type="text/javascript">
window.onload = function() {
sendRequest("arrayObject.jsp", "", viewInfo, "post");
}
function viewInfo() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
// JSON으로 인식 처리
result = eval("("+httpRequest.responseText+")");
var str = '';
var list = result.list;
var cnt = list.length;
// alert("cnt:"+cnt);
str = "<table border='1' bgcolor='skyblue'>"
for(i=0;i<cnt;i++){
str +='<tr>';
str +='<td>' + list[i].name+ '</td>';
str +='<td>' + list[i].kuk+ '</td>';
str +='<td>' + list[i].eng+ '</td>';
str +='</tr>';
}
str += "</table>" ;
document.getElementById('displayPanel').innerHTML = str;
} else {
alert("에러 발생:"+httpRequest.status);
}
}
}
</script>
</head>
<body>
<!-- 테이블로 출력 -->
<div id="displayPanel" ></div>
</body>
</html>
put - 안어레이
add - 어레이
5. 수업
진도:
hw:
6. 할것
홈페이지 짠 거 가져다 놓을 것
홈페이지 top에다가
<ul>
<li>
<form name="search">
<input type='text' name='keyword'>
<input type='submit' value="search">
</form></li>
</ul>
-top에다가 suggest_client의 script 복붙
이거 리스트를 짜서 연결할 것 - 이뿌게 안함 (css 안함)
'Programming' 카테고리의 다른 글
| 160523: 48회차 (0) | 2016.05.23 |
|---|---|
| 160520: 47회차 (0) | 2016.05.20 |
| 160518: 45회차 (0) | 2016.05.18 |
| 160517: 44회차 (0) | 2016.05.17 |
| 160516: 43회차 (0) | 2016.05.16 |