160518: 45회차

Programming 2016. 5. 18. 14:46

종료하기 전 티스토리 네이버 로그아웃 할 것

1. 툴

동일

추가시:

2. 폴더

동일

추가시:

3. 사용할 사이트

동일

추가시:

4. 공부하는 것

4. 드롭다운 리스트 상자에 아이템을 추가, 삭제, 변경

>>>>> WebContent/dom/dropdown.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 대분류

var addressList = new Array("서울","인천","경기도","강원도");

// 중분류

var gugunListSeoul = new Array("노원구", "강남구", "구로구", "마포구");

var gugunListIncheon = new Array("남동구", "부평구", "서구", "계양구");

var gugunListKy = new Array("부천시", "시흥시", "안양시", "수원시");

// 페이지 로딩시 자동 실행

window.onload = function(){

var v_sidoSelect = document.getElementById("sidoSelect"); // SELECT TAG

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

for (i =0 ; i<addressList.length; i++){// 0 ~ 3

// 새로운 <option value=''>값</option> 태그 생성

var optionEl = document.createElement("option");

// option태그에 value 속성 값으로 저장

optionEl.value = addressList[i];

// text 문자열을 새로 생성한 <option> 태그의 값으로 추가

optionEl.appendChild (document.createTextNode(addressList[i]));

// 만들어진 option 태그를 <select>태그에 추가

v_sidoSelect.appendChild(optionEl);

}

var v_gugunSelect = document.getElementById("gugunSelect"); // SELECT TAG

v_gugunSelect.style.display = "none"; // 태그 감추기

btnArea.style.display = "none"; // 태그 감추기

}

// 대분류 선택시

function changeSidoSelect(){

var v_sidoSelect = document.getElementById("sidoSelect"); // SELECT TAG

var idx = v_sidoSelect.options.selectedIndex; // 선택값 0 ~ 3

var area = document.getElementById("area"); // 태그 검색

// alert("select: " + selText);

if (idx < 1 && idx > 4){

return;

}

area.value = "";

gugunSelectFill(idx); // 중분류 생성

}

function gugunSelectFill(idx){

var v_gugunSelect = document.getElementById("gugunSelect"); // SELECT TAG

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

var data = null;

if (idx == 0) {

v_gugunSelect.style.display = "none"; // 중분류 태그 감추기

btnArea.style.display = "none";

return;

}

if (idx == 1){ data = gugunListSeoul }

if (idx == 2){ data = gugunListIncheon }

if (idx == 3){ data = gugunListKy }

if (idx == 4){

v_gugunSelect.style.display = "none";

alert("현재는 지원하지 않습니다.");

return;

}

v_gugunSelect.innerHTML = ""; // 태그 출력

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

// 새로운 <option value=''>값</option> 태그 생성

var optionEl = document.createElement("option");

// value 속성 태그에 저장

optionEl.value = data[i];

// text 문자열을 새로 생성한 <option> 태그에 추가

optionEl.appendChild (document.createTextNode(data[i]));

// 만들어진 option 태그를 <select>태그에 추가

v_gugunSelect.appendChild(optionEl);

}

v_gugunSelect.style.display = ""; // 중분류 태그 출력

btnArea.style.display = ""; // 선택 버튼 태그

}

// 선택한 지역을 가져옵니다.

function getArea(){

var area = document.getElementById("area"); // 태그 검색

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

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

alert(sidoSelect.value + " " + gugunSelect.value); // 선택값의 출력

area.value = sidoSelect.value + " " + gugunSelect.value;

}

</script>

</head>

<body>

<option value="">대분류를 선택하세요.</option>

</select>

<option value="">중분류 선택하세요.</option>

</select>

<label>

선택한 지역:

</label>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function changeName() {

// span Tag 검색

var tag = document.getElementById('name');

// span Tag 내용으로 지정

tag.innerHTML = '나길동';

}

function changePay() {

// div Tag 검색

var tag = document.getElementById('pay');

// alert(tag.innerHTML);

// eval: 문자열을 숫자화 하고 일반 문자를 태그로 인식되게 합니다.

var pay = eval(tag.innerHTML) + 100000;

tag.innerHTML = pay;

}

</script>

</head>

<body>

<h2>

<span id='name'>가길동</span> <input type='button' value='이름 변경'

onclick='changeName();'> <br> <br>

</h2>

</body>

</html>

[05] Ajax(Asynchronous JavaScript and XML)

1. Ajax(Asynchronous JavaScript and XML)의 이해

- 비동기 자바스크립트와 XML기반 스크립트를 말합니다.

- 기존의 요청에대한 전체페이지가 응답되었다면, Ajax를 쓰면 서버는 단지
페이지에서 필요한 데이터만 보내줍니다.

- Ajax는 2005년 Google이 제한하고 만들었습니다.

- Ajax 사용예 : Google Maps, Google Search, Gmail, YouTube, and Facebook
- Ajax 이름에 포함된 XML은 꼭 알아야 Ajax를 사용하는것은 아닙니다.
- Ajax는 동적이고 민첩한 Web page를 생성하기 위한 기술입니다.

2. Ajax의 주요 구성 요소

- XMLHttpRequest : 웹서버와 통신을 담당합니다.

사용자의 요청을 웹서버에 전송하고 웹서버로 부터 받은 결과를 웹 브라우저에
전달 합니다.

- DOM : 문서의 구조를 나타냅니다. 폼 등의 정보나 화면 구성을 조작할 때 사용
됩니다.

- CSS : 글자색, 배경색, 위치, 투명도 등 UI와 관련된 부분을 담당합니다.

- 자바스크립트 : 사용자가 마우스를 드래그하거나 버튼클릭을 하면, XMLHttpRequest객체를 사용해서 웹서버에 요청을 전송합니다.

또한 XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용해서 화면을 조작합니

//자바스크립트는 ajax의 구성 요소임... 'ㅅ'

3. Ajax 방식

- 웹 브러우져가 아닌 XMLHttpRequest객체가 웹 서버와 통신을 합니다.

- 페이지 이동 없이 특정 HTML 콘트롤이 웹 서버와 통신을 하여 결과를 화면에
출력합니다.

- 웹서버의 응답 결과가 HTML이 아니라 XML 또는 단순 TEXT입니다.

html이나 text, jason 형식으로 보냄 :>

데이터도 그냥 텍스트로 보냄

새로운 페이지를 만들어 주는 것이 아니라 데이터만 가지고 와서 수정해주는것

[06] XMLHttpRequest Object , XMLHttpRequest 생성

1. XMLHttpRequest 객체

- 대부분의 브러우저가 지원함으로 XMLHttpRequest를 실행하는데 문제가 없습니다.

- XMLHttpRequest 객체는 reload 없이 서버에서 보내는 데이터를 웹페이지의 한부분
을 수정합니다.

1) XMLHttpRequest객체의 함수

- open() - 요청의 초기화, GET/POST 선택, 접속할 URL입력합니다.

- send() - 웹서버에 요청을 전송합니다.

2) XMLHttpRequest객체의 속성

- onreadystatechange - 응답이 도착하면 특정 자바스크립트 함수를 호출해서
결과의 알맞은 작업을 합니다.

그때 사용할 자바스크립트 함수(callback 함수)를 지정합니다. - 모든 이벤트 핸들러는 callback함수! :D

- readyState - XMLHttpRequest 객체의 요청에 대한 상태를 숫자로 표시합니다.

이상태의 변화(로딩중, 처리중, 처리완료)가 있을때마다 XMLHttpRequest 객체의
onreadystatechange속성에 설정된 callback함수가 호출됩니다.

- status - XMLHttpRequest객체는 웹서버가 전달한 http 상태코드를 status 속성에
저장합니다.

- responseText/responseXml - 응답의 결과값(텍스트/ XML DOM)을 참조하기 위해
서 사용합니다.

2. XMLHttpRequest의 객체 생성

- Chrome, IE7+, Firefox, Safari, and Opera 브라우저는 XMLHttpRequest를 내장하고
있습니다.

[07] Ajax-Request,Response, Ajax-The onreadystatechange Event

1. Ajax- Request, Response

>>>> ajaxTest.html

------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<body>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp;

if (window.XMLHttpRequest) {

// code for modern browsers

xhttp = new XMLHttpRequest();

} else {

// code for IE6, IE5

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xhttp.onreadystatechange = function() { //응답에 대한 호출이 왔을 때 반응하는 메소드

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

alert(xhttp.responseText);

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.html", true);

xhttp.send(); //open과 send로 실질적인 처리를 하는 것

}

</script>

</body>

</html>

------------------------------------------------------------------------

>>> ajax_info.html

------------------------------------------------------------------------

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

<p>Ajax는 새로운 프로그래밍 언어는 아닙니다.</p>

<p>Ajax는 민첩하고 동적인 웹페이지를 생성하는 기술 입니다.</p>

</body>

</html>

------------------------------------------------------------------------

호출한다고 페이지를 다 가지고 오는 것이 아니라 text만 가져오는 것 - 비동기통신

1) 서버에 요청을 보냅니다.

- open()와 send()를 사용합니다.
- open(GET/POST, 요청URL, true/false);

2) open()에 GET/POST 사용

- GET Request

: GET 방식은 POST 방식보다 간단하고 빠른 방식입니다. 요청 URL뒤에 파라메터를 보냅니다.

xhttp.open("GET", "demo_get2.jsp?fname=Henry&lname=Ford", true);

xhttp.send();

- POST Request
: 서버의 내용을 변경하고자 할때 사용하며, 서버로 보내는 데이터가 많을때 사용하는 방식입니다.
POST방식으로 데이터를 서버로 보낼때는 setRequestHeader()에 Content-type를 명시합니다.

xhttp.open("POST", "demo_post2.jsp", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //form의 디폴트 타입이지만 명시를 해줘야 함

xhttp.send("fname=Henry&lname=Ford");

포스트 방식일 경우에는 send에다가 파라미터를 보냅니다.

그리고 setRequestHeader도 써줘야 함

3) open()에 동기/비동기 사용

- 동기방식
: 동기화 방식은 요청후 서버의 응답이 있을때까지 기다렸다가 응답이후에 다음작업을 실행합니다.
또한, 웹 서버의 접속자 폭주로 인한 지연, 통신 상태의 불안정한 상태등의 환경에서 데이터 처리에 많은 취약한 점을 가지고 있습니다.

>>>>> 동기예제

<!DOCTYPE html>

<html>

<body>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "ajax_info.txt", false);

xhttp.send();

document.getElementById("demo").innerHTML = xhttp.responseText;

}

</script>

</body>

</html>

// 이거 그냥 txt를 onclick에서 요청하는 거랑 똑같은 거라서 이렇게 안해도 됩니다.

- 비동기 방식
: 요청후 응답이 있을동안 다음작업을 바로 실행합니다.
요청이 거부될시에 서버의 상태에 따라 다시 처리 요청을 하여 결과를 받아오는 방식으로 Ajax는 비동기 방식을 특징으로 가지고 있으며 비동기 방식을 권장하고 있습니다.

>>>>> 비동기 예제

<!DOCTYPE html>

<html>

<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

//응답이 있을시 받는 이벤트 처리 함수

xhttp.onreadystatechange = function() { //비동기식일 때는 현재 보고 있는 페이지랑 무관하게 새롭게 그려주기 위해 onreadystatechange 함수가 필수적인것

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

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}

</script>

</body>

</html>

4) 서버에서 응답을 받습니다.
- XMLHttpRequest object 의 responseText, responseXML 속성을 사용합니다.

>>>>> responseText.html

<!DOCTYPE html>

<html>

<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

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

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------
>>>> ajax_info.html

----------------------------------------------------------------------------------------------------
>>>>> responseXML.html

<!DOCTYPE html>

<html>

<body>

<h2>My CD Collection:</h2>

<button type="button" onclick="loadDoc()">Get my CD collection</button>

function loadDoc() {

var xhttp, xmlDoc, txt, x, i;

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() { //open&send (요청&응답) 이 끝난 뒤에 실행

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

xmlDoc = xhttp.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("ARTIST");

for (i = 0; i < x.length; i++) {

txt = txt + x[i].childNodes[0].nodeValue + "<br>";//childNodes[0].nodeValue 랑 firstChild랑 같은 것

}

document.getElementById("demo").innerHTML = txt;

}

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.send();

}

</script>

</body>

</html>

----------------------------------------------------------------------------------------------------
>>>>> cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COMPANY>CBS Records</COMPANY>

</CD>

<CD>

<TITLE>Greatest Hits</TITLE>

<ARTIST>Dolly Parton</ARTIST>

</CD>

<CD>

<TITLE>Still got the blues</TITLE>

<ARTIST>Gary Moore</ARTIST>

<COMPANY>Virgin records</COMPANY>

</CD>

<CD>

<ARTIST>Eros Ramazzotti</ARTIST>

</CD>

<CD>

<TITLE>One night only</TITLE>

<COMPANY>Polydor</COMPANY>

</CD>

<CD>

<TITLE>Sylvias Mother</TITLE>

</CD>

<CD>

<TITLE>Maggie May</TITLE>

<ARTIST>Rod Stewart</ARTIST>

<COMPANY>Pickwick</COMPANY>

</CD>

<CD>

<TITLE>Romanza</TITLE>

<ARTIST>Andrea Bocelli</ARTIST>

<COMPANY>Polydor</COMPANY>

</CD>

<CD>

<TITLE>When a man loves a woman</TITLE>

<ARTIST>Percy Sledge</ARTIST>

<COMPANY>Atlantic</COMPANY>

</CD>

<CD>

<TITLE>Black angel</TITLE>

<ARTIST>Savage Rose</ARTIST>

</CD>

<CD>

<TITLE>1999 Grammy Nominees</TITLE>

<COMPANY>Grammy</COMPANY>

</CD>

<CD>

<TITLE>For the good times</TITLE>

<ARTIST>Kenny Rogers</ARTIST>

<COMPANY>Mucik Master</COMPANY>

</CD>

<CD>

<TITLE>Big Willie style</TITLE>

<ARTIST>Will Smith</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

<CD>

<TITLE>Tupelo Honey</TITLE>

<ARTIST>Van Morrison</ARTIST>

<COMPANY>Polydor</COMPANY>

</CD>

<CD>

<TITLE>Soulsville</TITLE>

<COUNTRY>Norway</COUNTRY>

</CD>

<CD>

<ARTIST>Cat Stevens</ARTIST>

<COMPANY>Island</COMPANY>

</CD>

<CD>

<ARTIST>Sam Brown</ARTIST>

</CD>

<CD>

<TITLE>Bridge of Spies</TITLE>

<COMPANY>Siren</COMPANY>

</CD>

<CD>

<TITLE>Private Dancer</TITLE>

<ARTIST>Tina Turner</ARTIST>

<COMPANY>Capitol</COMPANY>

</CD>

<CD>

<TITLE>Midt om natten</TITLE>

<ARTIST>Kim Larsen</ARTIST>

<COMPANY>Medley</COMPANY>

</CD>

<CD>

<TITLE>Pavarotti Gala Concert</TITLE>

<ARTIST>Luciano Pavarotti</ARTIST>

<COMPANY>DECCA</COMPANY>

</CD>

<CD>

<ARTIST>Otis Redding</ARTIST>

<COMPANY>Atlantic</COMPANY>

</CD>

<CD>

<TITLE>Picture book</TITLE>

<ARTIST>Simply Red</ARTIST>

<COMPANY>Elektra</COMPANY>

</CD>

<CD>

<ARTIST>The Communards</ARTIST>

<COMPANY>London</COMPANY>

</CD>

<CD>

<TITLE>Unchain my heart</TITLE>

<ARTIST>Joe Cocker</ARTIST>

</CD>

</CATALOG>

----------------------------------------------------------------------------------------------------------------------

----------

2. Ajax-The onreadystatechange Event

- onreadystatechange Event는 비동기 상태의 요청에 대한 응답시점을 인식할 수 있도록 합니다.
- onreadystatechange Event는 readystate값이 변경될때 마다 호출하는 callback함수를 연결합니다.
- XMLHttpRequest object는 세개의 중요한 프로퍼티를 가집니다.

1) onreadystatechange
   : 이 속성에 설정된 함수는 readyState의 값이 변경 될때 마다 호출됩니다. 이 속성값을 통해 웹 서버와의 통신 상태를 체크할 수 있습니다.

2) readyState
: 5가지의 요청에 대한 상태를 전달받습니다. (0~4)
   - 0(UNINITIALIZED): 객체만 생성되고 초기화 되지 않은 상태

- 1(LOADING): 연결이 초기화 되었다는 의미

open()가 호출되고 아직 send()가 호출되지 않은 상태

- 2(LOADED): 요청의 시작

send()메소드가 불렸지만 status와 헤더는 도착하지 않은 상태

- 3(INTERACTIVE): 서버가 요청처리를 거의 끝냈을때,

데이터의 일부를 받은 상태

- 4(COMPLETED): 서버의 응답을 받아 사용할 준비가 되었을때,

데이터를 전부받은 상태

------------------------------------------------------------------------------------------------

open()호출 send()호출

-> 1 ---------- 요청 ----------- 2 ->

웹브라우저 서버

<- 4 ---------- 응답 ----------- 3 <-

응답완료 응답중...

-------------------------------------------------------------------------------------------------

3) status

: 서버로부터 도착한 응답의 상태가 어떤지 정보를 가지고 있습니다.

- 200(OK): 요청 정상 처리

- 403(Forbidden): 접근 거부

- 404(Not Found): 페이지 없음

- 500(Internal Server Error): 서버 오류 발생

[08] XMLHttpRequest Module, XMLHttpRequest Module 실습

1. XMLHttpRequest 모듈

- Parameter상에 한글이 들어가면 손상됨으로 문자열을 "UTF-8"로 인코딩해주는 encodeURIComponent()함수를 사용 합니다.

>>>>> WebContent/basic/httpRequest.js - 자바 스크립트를 묶어놓은 파일

//XMLHttpRequest 객체

var httpRequest = null;

// url: 요청 주소

// params: 서버로 보내는 값의 목록

// response_function_name: 응답 결과를 처리할 함수

// method: GET, POST인지 결정

function sendRequest(url, params, response_function_name, method) { //얘가 제일ㅇ 중요함

if (window.XMLHttpRequest) {

// code for modern browsers

httpRequest = new XMLHttpRequest();

} else {

// code for IE6, IE5

httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

// document.write("httpRequest:"+httpRequest);

// 소문자로 변경

httpMethod = method.toLowerCase();

// 전송 값이 있는지 검사

var httpParams = (params == null || params == '') ? null : params;

var httpUrl = url;

// GET방식이면 GET 방식으로 조합

if (httpMethod == 'get' && httpParams != null) {

httpUrl = httpUrl + "?" + httpParams;

}

// 서버로 연결

httpRequest.open(httpMethod, httpUrl, true);

// 내용 타입 지정

httpRequest.setRequestHeader(

'Content-Type', 'application/x-www-form-urlencoded');

// 응답을 처리할 함수 지정

httpRequest.onreadystatechange = response_function_name;

// 전송 방식이 POST이면 파라미터 전송

// GET 방식이면 null 지정

httpRequest.send(httpMethod == 'post' ? httpParams : null);

}

// 실행 결과를 출력, Debugging

function log(msg) {

var console = document.getElementById("debugConsole");//div tag

if (console != null) {

console.innerHTML += msg +"<br/>";

}

// 태그를 보여줌

function show(elementId) {

var element = document.getElementById(elementId);

if (element) {

element.style.display = '';

}

// 태그를 숨김

function hide(elementId) {

var element = document.getElementById(elementId);

if (element) {

element.style.display = 'none';

}

[08] XMLHttpRequest Module, XMLHttpRequest Module 실습

1. XMLHttpRequest 모듈

- Parameter상에 한글이 들어가면 손상됨으로 문자열을 "UTF-8"로 인코딩해주는 encodeURIComponent()함수를 사용 합니다.

>>>>> WebContent/basic/httpRequest.js

//XMLHttpRequest 객체

var httpRequest = null;

// url: 요청 주소

// params: 서버로 보내는 값의 목록

// response_function_name: 응답 결과를 처리할 함수

// method: GET, POST인지 결정

function sendRequest(url, params, response_function_name, method) {

if (window.XMLHttpRequest) {

// code for modern browsers

httpRequest = new XMLHttpRequest();

} else {

// code for IE6, IE5

httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

// document.write("httpRequest:"+httpRequest);

// 소문자로 변경

httpMethod = method.toLowerCase();

// 전송 값이 있는지 검사

var httpParams = (params == null || params == '') ? null : params;

var httpUrl = url;

// GET방식이면 GET 방식으로 조합

if (httpMethod == 'get' && httpParams != null) {

httpUrl = httpUrl + "?" + httpParams;

}

// 서버로 연결

httpRequest.open(httpMethod, httpUrl, true);

// 내용 타입 지정

httpRequest.setRequestHeader(

'Content-Type', 'application/x-www-form-urlencoded');

// 응답을 처리할 함수 지정

httpRequest.onreadystatechange = response_function_name;

// 전송 방식이 POST이면 파라미터 전송

// GET 방식이면 null 지정

httpRequest.send(httpMethod == 'post' ? httpParams : null);

}

// 실행 결과를 출력, Debugging

function log(msg) {

var console = document.getElementById("debugConsole");//div tag

if (console != null) {

console.innerHTML += msg +"<br/>";

}

// 태그를 보여줌

function show(elementId) {

var element = document.getElementById(elementId);

if (element) {

element.style.display = '';

}

// 태그를 숨김

function hide(elementId) {

var element = document.getElementById(elementId);

if (element) {

element.style.display = 'none';

}

2. XMLHttpRequest 모듈 실습

1) JSP Server Page

- 요청 페이지 입니다.

>>>>> WebContent/basic/pay.jsp

- Test: http://localhost:8000/ajax_test/basic/pay.jsp?id=test&passwd=1234

<%@ page contentType = "text/plain; charset=UTF-8" %>

String[] titles = {

" 급 여 명 세 서 ",

"기 본 급: 1,500,000 원",

"야근수당: 100,000 원",

"주말수당: 200,000 원",

"세금합계: 100,000 원",

"실수령액: 1,700,000 원",

"입금 예정일: 2008-01-01일 수고하셨습니다.",

};

<ul>

String id = request.getParameter("id");

String passwd = request.getParameter("passwd");

if (id.equals("test") && passwd.equals("1234")){

for (int i = 0 ; i < titles.length ; i++) {

out.println("<li>" + titles[i] + "<br/><br/>");

}

}else{

out.println("<li>인증 실패입니다.<br/><br/>");

out.println("<li>다시 시도해 주세요.<br/><br/>");

}

</u></font>

</ul>

2). HTML(ajax사용페이지)

>>>>> WebContent/basic/pay.html

<!DOCTYPE html>

<html>

<head>

// 서버로 요청 전송

function send(id, passwd) {

log("send() 함수 호출"); // 처리 단계 기록

log("ID: " + id + " PASSWD: " + passwd);

var params = "id="+encodeURIComponent(id);

log("params: " + params);

params = params + "&passwd="+encodeURIComponent(passwd);

// 태그중에 "payList"을 찾아 옵니다.

var newsList = document.getElementById("payList");

newsList.innerHTML=""; // 태그의 내용 삭제

// sendRequest()

// 인수1: 서버로 요청하는 파일명, jsp, servlet

// 인수2: 파라미터 목록

// 인수3: 응답 처리 메소드, 함수 이름

// 인수4: 전송방식(post, get)

// response = response(){ }

sendRequest("pay.jsp", params, response, "post");

}

function response() {

if (httpRequest.readyState == 4) { // 전송을 전부 받았다면

if (httpRequest.status == 200) { // 요청한 서버 파일이 실행 됐다면

// 태그중에 "newsList"을 찾아 옵니다.

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

// 서버로부터 전송된 문자열

// div 태그의 값으로 responseText값을 할당합니다.

payList.innerHTML = httpRequest.responseText;

}

// 문서가 브러우저로 로딩되면 자동으로 호출되는 메소드

// window.onload = function() {

// send();

// }

</script>

<!--

.style9 {font-size: 16}

-->

</style>

</head>

<body>

<div id="debugConsole"

style="border: 1px solid #000000; color:#00ff00; background:#000000 ">

</div>

<tr>

</tr>

<tr>

<br>

급여확인 로그인: <br><br>

사원 ID: 

패스워드:

<input type="button" name="cmdRefresh"

value="급여 확인" onclick="send(this.form.id.value, this.form.passwd.value)" />

</form>

</td>

</tr>

</table>

</body>

</html>

---------------------------------------------------------------

<!DOCTYPE HTML>

<HTML>

<HEAD>

function ecd(field){

return encodeURIComponent(field.value);

}

// 서버로 요청 전송

function send(f) {

//alert(ecd(f.stuname));

var params = "stuname="+ecd(f.stuname);

params = params + "&address="+ecd(f.address);

params = params + "&subject="+ecd(f.subject);

params = params + "&score=" + f.score.value;

params = params + "&subject2="+ecd(f.subject2);

params = params + "&score2=" + f.score2.value;

// 태그중에 "displayPanel"을 찾아 옵니다.

var panel = document.getElementById("displayPanel");

panel.innerHTML = "";

// 인수1: 서버로 요청하는 파일명, jsp, servlet

// 인수2: 파라미터 목록

// 인수3: 응답 처리 메소드, 함수 이름

// 인수4: 전송방식(post, get)

// response = response(){ }

sendRequest("./proc.jsp", params, response, "post");

}

function response() {

// alert('httpRequest.readyState: ' + httpRequest.readyState + '\n\n httpRequest.status: ' + httpRequest.status);

if (httpRequest.readyState == 4) { // 전송을 전부 받았다면 - 응답이 완료된 것

if (httpRequest.status == 200) { // 요청한 서버 파일이 실행 됐다면 -

// 태그중에 "displayPanel"을 찾아 옵니다.

var panel = document.getElementById("displayPanel");

// 서버로부터 전송된 문자열

// div 태그의 값으로 responseText값을 할당합니다.

panel.innerHTML = httpRequest.responseText;

}

</script>

</HEAD>

<BODY>

<tr>

<td>

성명: <INPUT TYPE="text" NAME="stuname" value="가길동"><br>

주소: <INPUT TYPE="text" NAME="address" SIZE="30" value="인천시 남동구"><br>

과목: <INPUT TYPE="text" NAME="subject" SIZE="30" value="JAVA"><br>

점수: <INPUT TYPE="text" NAME="score" SIZE="20" value="95"><br>

과목2: <INPUT TYPE="text" NAME="subject2" SIZE="30" value="JSP"><br>

점수2: <INPUT TYPE="text" NAME="score2" SIZE="20" value="80"><br>

<input type="button" value="성적 계산"

onclick="send(this.form)">

</div>

</FORM> </td>

</tr>

<tr>

<td>

<br>

</td>

</tr>

</table>

</BODY>

</HTML>

>>>>> WebContent/basic/proc.jsp, 데이터 처리

<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> sungjuk_proc.jsp </TITLE>

</HEAD>

<BODY>

// utf-8은 모든 브러우저를 지원합니다.

request.setCharacterEncoding("utf-8");

String stuname = request.getParameter("stuname");

System.out.println("stuname: " + stuname);

String address = request.getParameter("address");

String subject = request.getParameter("subject");

int score = Integer.parseInt(request.getParameter("score"));

String subject2 = request.getParameter("subject2");

int score2 = Integer.parseInt(request.getParameter("score2"));

out.println("성명: " + stuname + "<br/>"); // 웹 브러우저로 출력

out.println("주소: " + address + "<br/>"); // 주소

out.println("과목: " + subject + "<br/>"); // 주소

out.println("점수: " + score + "<br/>"); // 주소

out.println("과목: " + subject2 + "<br/>"); // 주소

out.println("점수: " + score2 +"<br/>"); // 주소

out.println("총점: " + (score+score2) +"<br/>"); // 주소

out.println("평균: " + ((score+score2)/2) + "<br/>"); // 주소

</BODY>

</HTML>

-----------------------------------------------------------------------------------------------------

================================================================

vacation.html

<!--

------------------------

[실습] 계절명을 입력받아 처리하는 프로그램

계절명을 입력하면 추천휴가 지역명을 서버로부터 전달받아

체크 상자로 변환하여 출력하는 프로그램을 작성하세요.

입력: 봄 - 석모도, 무의도, 영종도

여름 - 서해, 동해, 남해

가을 - 강화도, 대부도, 소래, 오이도

겨울 - 제부도, 영흥도, 선제도, 월미도

vacation.html

vacation_proc.jsp

체크 박스를 체크한후 전송하면 지역에 대한 상세 설명이 출력되도록하세요.

조건 페이지 이동이 있으면 안됩니다.

vacation.html

vacation_detail.jsp

-->

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function send(f) {

var params = "season="+encodeURIComponent(f);

// 태그중에 "childform"을 찾아 옵니다.

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

childform.innerHTML = "";

// 인수1: 서버로 요청하는 파일명, jsp, servlet

// 인수2: 파라미터 목록

// 인수3: 응답 처리 메소드, 함수 이름

// 인수4: 전송방식(post, get)

// response = response(){ }

sendRequest("./vacationproc.jsp", params, response, "post");

}

function response() {

// alert('httpRequest.readyState: ' + httpRequest.readyState + '\n\n httpRequest.status: ' + httpRequest.status);

if (httpRequest.readyState == 4) { // 전송을 전부 받았다면

if (httpRequest.status == 200) { // 요청한 서버 파일이 실행 됐다면

// 태그중에 "childform"을 찾아 옵니다.

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

// 서버로부터 전송된 문자열

// div 태그의 값으로 responseText값을 할당합니다.

childform.innerHTML = httpRequest.responseText;

}

function response2() {

// alert('httpRequest.readyState: ' + httpRequest.readyState + '\n\n httpRequest.status: ' + httpRequest.status);

if (httpRequest.readyState == 4) { // 전송을 전부 받았다면

if (httpRequest.status == 200) { // 요청한 서버 파일이 실행 됐다면

// 태그중에 "grandchildform"을 찾아 옵니다.

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

// 서버로부터 전송된 문자열

// div 태그의 값으로 responseText값을 할당합니다.

grandchildform.innerHTML = httpRequest.responseText;

}

function check_only(chk){

var obj = document.getElementsByName("chkbox");

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

if(obj[i] != chk){

obj[i].checked = false;

}

var params = "location="+encodeURIComponent(chk.value);

// 태그중에 "grandchildform"을 찾아 옵니다.

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

grandchildform.innerHTML = "";

// 인수1: 서버로 요청하는 파일명, jsp, servlet

// 인수2: 파라미터 목록

// 인수3: 응답 처리 메소드, 함수 이름

// 인수4: 전송방식(post, get)

// response = response(){ }

sendRequest("./vacationdetail.jsp", params, response2, "post");

}

</script>

</head>

<BODY>

<div align="center">계절명을 입력하세요.</div>

이름: <INPUT TYPE="text" NAME="season"><br>

</FORM>

</html>

============================================================

vacationproc.jsp

<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE HTML>

<HTML>

<HEAD>

</HEAD>

<BODY>

function check_only(chk){

var obj = document.getElementsByName("chkbox");

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

if(obj[i] != chk){

obj[i].checked = false;

}

</script>

// utf-8은 모든 브러우저를 지원합니다.

request.setCharacterEncoding("utf-8");

String season = request.getParameter("season");

System.out.println("season: " + season);

if(season.equals("봄")){

// out.print("석모도, 무의도, 영종도");

<br><label><input type="checkbox" name="chkbox" value="spring1"

onchange="check_only(this)">석모도</label>

<br><label><input type="checkbox" name="chkbox" value="spring2"

onchange="check_only(this)">무의도</label>

<br><label><input type="checkbox" name="chkbox" value="spring3"

onchange="check_only(this)">영종도</label>

</FORM>

}

else if(season.equals("여름")){

// out.print("서해, 동해, 남해");

<br><label><input type="checkbox" name="chkbox" value="summer1"

onchange="check_only(this)">서해</label>

<br><label><input type="checkbox" name="chkbox" value="summer2"

onchange="check_only(this)">동해</label>

<br><label><input type="checkbox" name="chkbox" value="summer3"

onchange="check_only(this)">남해</label>

</FORM>

}

else if(season.equals("가을")){

// out.print("강화도, 대부도, 소래, 오이도");

<br><label><input type="checkbox" name="chkbox" value="fall1"

onchange="check_only(this)">강화도</label>

<br><label><input type="checkbox" name="chkbox" value="fall2"

onchange="check_only(this)">대부도</label>

<br><label><input type="checkbox" name="chkbox" value="fall3"

onchange="check_only(this)">소래</label>

<br><label><input type="checkbox" name="chkbox" value="fall4"

onchange="check_only(this)">오이도</label>

</FORM>

}

else if(season.equals("겨울")){

// out.print("제부도, 영흥도, 선제도, 월미도");

<br><label><input type="checkbox" name="chkbox" value="winter1"

onchange="check_only(this)">제부도</label>

<br><label><input type="checkbox" name="chkbox" value="winter2"

onchange="check_only(this)">영흥도</label>

<br><label><input type="checkbox" name="chkbox" value="winter3"

onchange="check_only(this)">선제도</label>

<br><label><input type="checkbox" name="chkbox" value="winter4"

onchange="check_only(this)">월미도</label>

</FORM>

}else{

<br><label><input type="checkbox" name="chkbox" value="service1"

onchange="check_only(this)">하와이</label>

</FORM>

}

</BODY>

</HTML>

==================================================================

vacationdetail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

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

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<br>

request.setCharacterEncoding("utf-8");

String location = request.getParameter("location");

switch(location){

case "spring1": out.print("석모도에 갑시다.");

break;

case "spring2": out.print("무의도에 갑시다.");

break;

case "spring3": out.print("영종도에 갑시다.");

break;

case "summer1": out.print("서해에 갑시다.");

break;

case "summer2": out.print("동해에 갑시다.");

break;

case "summer3": out.print("남해에 갑시다.");

break;

case "fall1": out.print("강화도에 갑시다.");

break;

case "fall2": out.print("대부도에 갑시다.");

break;

case "fall3": out.print("소래에 갑시다.");

break;

case "fall4": out.print("오이도에 갑시다.");

break;

case "winter1": out.print("제부도에 갑시다.");

break;

case "winter2": out.print("영흥도에 갑시다.");

break;

case "winter3": out.print("선제도에 갑시다.");

break;

case "winter4": out.print("월미도에 갑시다.");

break;

default: out.print("여행을 가고 싶다.");

break;

}

</body>

</html>

=============================================================

수정본

<!--

------------------------

[실습] 계절명을 입력받아 처리하는 프로그램

계절명을 입력하면 추천휴가 지역명을 서버로부터 전달받아

체크 상자로 변환하여 출력하는 프로그램을 작성하세요.

입력: 봄 - 석모도, 무의도, 영종도

여름 - 서해, 동해, 남해

가을 - 강화도, 대부도, 소래, 오이도

겨울 - 제부도, 영흥도, 선제도, 월미도

vacation.html

vacation_proc.jsp

체크 박스를 체크한후 전송하면 지역에 대한 상세 설명이 출력되도록하세요.

조건 페이지 이동이 있으면 안됩니다.

vacation.html

vacation_detail.jsp

-->

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function send(f) {

var params = "season="+encodeURIComponent(f.season.value);

// 태그중에 "childform"을 찾아 옵니다.

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

childform.innerHTML = "";

// 인수1: 서버로 요청하는 파일명, jsp, servlet

// 인수2: 파라미터 목록

// 인수3: 응답 처리 메소드, 함수 이름

// 인수4: 전송방식(post, get)

// response = response(){ }

sendRequest("./vacationproc.jsp", params, response, "post");

}

function response() {

// alert('httpRequest.readyState: ' + httpRequest.readyState + '\n\n httpRequest.status: ' + httpRequest.status);

if (httpRequest.readyState == 4) { // 전송을 전부 받았다면

if (httpRequest.status == 200) { // 요청한 서버 파일이 실행 됐다면

// 태그중에 "childform"을 찾아 옵니다.

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

// 서버로부터 전송된 문자열

// div 태그의 값으로 responseText값을 할당합니다.

childform.innerHTML = httpRequest.responseText;

}

function response2() {

// alert('httpRequest.readyState: ' + httpRequest.readyState + '\n\n httpRequest.status: ' + httpRequest.status);

if (httpRequest.readyState == 4) { // 전송을 전부 받았다면

if (httpRequest.status == 200) { // 요청한 서버 파일이 실행 됐다면

// 태그중에 "grandchildform"을 찾아 옵니다.

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

// 서버로부터 전송된 문자열

// div 태그의 값으로 responseText값을 할당합니다.

grandchildform.innerHTML = httpRequest.responseText;

}

function check_only(chk){

var obj = document.getElementsByName("chkbox");

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

if(obj[i] != chk){

obj[i].checked = false;

}

var params = "location="+encodeURIComponent(chk.value);

// 태그중에 "grandchildform"을 찾아 옵니다.

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

grandchildform.innerHTML = "";

// 인수1: 서버로 요청하는 파일명, jsp, servlet

// 인수2: 파라미터 목록

// 인수3: 응답 처리 메소드, 함수 이름

// 인수4: 전송방식(post, get)

// response = response(){ }

sendRequest("./vacationdetail.jsp", params, response2, "post");

}

</script>

</head>

<BODY>

<div align="center">계절명을 입력하세요.</div>

이름: <INPUT TYPE="text" NAME="season" autofocus="autofocus"><br>

</FORM>

</html>

==================================================================

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

var i = 1;

function addf() {

var parentdiv = document.getElementById("file");

var divel = document.createElement("DIV");

var file = document.createElement('input');

divel.appendChild(document.createTextNode("파일 선택 " + i));

file.type = "file";

parentdiv.appendChild(divel);

parentdiv.appendChild(file);

i++;

}

function del() {

var parentdiv = document.getElementById("file");

var lastChild = parentdiv.lastChild;

i--;

if(i <= 1) {

i = 1;

}

parentdiv.removeChild(lastChild);

parentdiv = document.getElementById("file");

lastChild = parentdiv.lastChild;

parentdiv.removeChild(lastChild);

}

</script>

</head>

<body>

<br/>

</div>

</body>

</html>

5. 수업

진도:

hw:

6. 할것

파일 그거 안했음 - 조금 더 읽어 보고 올릴 것

'Programming' 카테고리의 다른 글

160520: 47회차 (0)	2016.05.20
160519: 46회차 (0)	2016.05.19
160517: 44회차 (0)	2016.05.17
160516: 43회차 (0)	2016.05.16
160513: 42회차 (0)	2016.05.13

Posted by ＤＡＶＩＤ

PC

160518: 45회차

'Programming' 카테고리의 다른 글

티스토리툴바