HTTP://JQUERY.COM

 

 

 

 

 

 

 

 

 

 

 

'자바 > JAVA...Spring' 카테고리의 다른 글

jQuery 사용  (0) 2016.01.08
JQUERY 특징  (0) 2016.01.08
JavaScript Library 종류  (0) 2016.01.07
JQuery 개요  (0) 2016.01.07
[dynamicContent.xml]  (0) 2016.01.06

 

 

 

 

 

 

 

 

 

'자바 > JAVA...Spring' 카테고리의 다른 글

JQUERY 특징  (0) 2016.01.08
JQuery 다운로드  (0) 2016.01.07
JQuery 개요  (0) 2016.01.07
[dynamicContent.xml]  (0) 2016.01.06
[dynamicContent.html]  (0) 2016.01.06

 

- 2006년 초, John Resig가 만든 JavaScript Library


- JavaScript™와 Asynchronous JavaScript + XML (Ajax) 프로그래밍을 단순화 함


- DOM 스크립팅과 Ajax의 반복성을 단순하게
코드를 단순하고 간결하게 유지한다.

 많은 반복 루프와 DOM 스크립팅 라이브러리 호출을 작성할 필요가 없다

 

 

 

 

 

'자바 > JAVA...Spring' 카테고리의 다른 글

JQuery 다운로드  (0) 2016.01.07
JavaScript Library 종류  (0) 2016.01.07
[dynamicContent.xml]  (0) 2016.01.06
[dynamicContent.html]  (0) 2016.01.06
Spring 3.2 & MyBatis] 단순한 파일 업로드  (0) 2016.01.05

 

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<부서들>
  <부서 code="insa" title="인사부">
    <사원 position="과장">김과정</사원>
    <사원 position="대리">김대리</사원>
    <사원 position="사원">김사원</사원>
  </부서>
  <부서 code="sale" title="영업부">
    <사원 position="부장">이부장</사원>
    <사원 position="과장">이과장</사원>
    <사원 position="대리">이대리</사원>
  </부서>
</부서들>

 

 

 

 

 

 

 

'자바 > JAVA...Spring' 카테고리의 다른 글

JavaScript Library 종류  (0) 2016.01.07
JQuery 개요  (0) 2016.01.07
[dynamicContent.html]  (0) 2016.01.06
Spring 3.2 & MyBatis] 단순한 파일 업로드  (0) 2016.01.05
Spring 3.2 & MyBatis] 단순한 파일 업로드  (0) 2016.01.05

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>페이지 내용을 동적으로 바꾸는 예제</title>
<script language="JavaScript">
<!--
var xmlHttp;
var requestType;

// XHR 객체를 생성한다.
function createXMLHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
// 조회를 한다.
function doSearch() {
    requestType = document.getElementById("부서").value;
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "dynamicContent.xml", true);
    xmlHttp.send(null);
}
// 요청 처리 콜백 함수
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            clearPreviousResults();
            parseResults();
        }
    }
}
// 이전 결과를 지운다.
function clearPreviousResults() {
    var header = document.getElementById("header");
    if(header.hasChildNodes()) {
        header.removeChild(header.childNodes[0]);
    }
    var tableBody = document.getElementById("resultsBody");
    while(tableBody.childNodes.length > 0) {
        tableBody.removeChild(tableBody.childNodes[0]);
    }
}

// 요청의 결과를 테이블 형태로 동적으로 출력한다.
function parseResults() {
    var results = xmlHttp.responseXML;
    var code = "";
    var departmentName = "";
    var position = "";
    var name = "";
// 모든 사원노드를 배열로 가져옵니다.
    var staffs = results.getElementsByTagName("사원");
    for(var i = 0; i < staffs.length; i++) {
        // 부모노드의 부서 코드를 가져옵니다.
        code = staffs[i].parentNode.getAttribute("code");
        // 부서를 선택했을 경우 코드가 다르면 건너뜁니다.
        if(requestType != "all" && code != requestType) continue;
        // 부서명, 직위, 이름 정보를 가져옵니다.
        departmentName = staffs[i].parentNode.getAttribute("title");
        position = staffs[i].getAttribute("position");
        name = staffs[i].childNodes[0].nodeValue;
        addTableRow(departmentName, position, name);
    }
    var header = document.createElement("h2");
    var headerText = document.createTextNode("조회결과:");
    header.appendChild(headerText);
    document.getElementById("header").appendChild(header);
    document.getElementById("resultsTable").setAttribute("border", "1");
}
// 테이블의 TR 엘리먼트를 주어진 내용으로 생성한다.
function addTableRow(departmentName, position, name) {
    // 테이블 행 엘리먼트를 생성합니다.
    var row = document.createElement("tr");
    // 테이블 데이터 엘리먼트를 생성해서 추가합니다.
    var cell = createCellWithText(departmentName);
    row.appendChild(cell);
    cell = createCellWithText(position);
    row.appendChild(cell);
    cell = createCellWithText(name);
    row.appendChild(cell);
    // 테이블에 행을 추가합니다.
    document.getElementById("resultsBody").appendChild(row);
}
// 테이블의 TD 엘리먼트를 주어진 text 를 내용으로 하여 생성한다.
function createCellWithText(text) {
   // 테이블 데이터 엘리먼트를 생성합니다.
    var cell = document.createElement("td");
    var textNode = document.createTextNode(text);
    cell.appendChild(textNode);
    return cell;
}
//-->
</script>
</head><body>
<h3>페이지 내용을 동적으로 바꾸는 예제</h3>
<h1>부서별 조회</h1>
<form action="#">
부서
<select id="부서">
  <option value="all">전체</option>
  <option value="sale">영업부</option>
  <option value="insa">인사부</option>
</select>
<input type="button" value="Search" onclick="doSearch();"/>
</form>
<span id="header"></span>
<table id="resultsTable" width="500" border="0">
  <tbody id="resultsBody">
  </tbody>
</table></body></html>

 

 

 

 

 

 

 

 




『 단순한 파일 업로드 』

​<소스코드>

​* 컨트롤러 작성

 @Controller
@RequestMapping("/test/fileupload")
public class FileuploadController {
   
    @RequestMapping(method=RequestMethod.GET)
public void setupForm(Model model) {        
    }
   
    // 하나의 파일을 업로드함
    @RequestMapping(value="single", method=RequestMethod.POST)
    public ModelAndView doAction(@RequestParam("file") MultipartFile file) throws IllegalStateException, IOException {

if(!file.getOriginalFilename().isEmpty() && !file.isEmpty()) {
            File uploadFile = new File("d:/upload/", file.getOriginalFilename());
            //서버내의 다른 장소에 업로드함
            file.transferTo(uploadFile);            
            ModelAndView mav = new ModelAndView("/test/complete");
            mav.addObject("filename", file.getOriginalFilename());
            mav.addObject("filesize", FileUtils.byteCountToDisplaySize(file.getSize()));
            return mav;
           
        } else {
            ModelAndView mav = new ModelAndView("/test/fail");
            return mav;
        }
    }
}


 

 

 

 

 

 




『 단순한 파일 업로드 』

​<소스코드>


* JSP 작성

​form속성에 enctype="multipart/form-data“ 추가

<h4>파일 업로드</h4>
<form action="${appUrl}/test/fileupload/single.html" method="post" enctype="multipart/form-data">
   
    <input type="file" name="file" />
   
    <input type="submit"/>
</form>


 

 

 

 

 

document.createElement(tagName) : tagName 으로된 엘리먼트를 생성한다. div 를 메소드 파라미터로 입력하면 div 엘리먼트가 생성된다.

 

document.createTextNode(text) : 정적 텍스트를 담고 있는 노드를 생성한다.

 

<element>.appendChild(childNode) : 특정 노드를 현재 엘리먼트의 자식 노드에 추가시킨다. (예를들어 select 엘리먼트에 option 엘리먼트 추가)

 

<element>.getAttribute(name) : 속성명이 name 인 속성값을 반환한다.

 

<element>.setAttribute(name, value) : 속성값 value 를 속성명이 name 인 곳에 저장한다.

 

<element>.insertBefore(newNode, tartgetNode) : newNode 를  tartgetNode 전에 삽입한다.

 

<element>.removeAttribute(name) : 엘리먼트에서 name 속성을 제거한다.

 

<element>.removeChild(childNode) : 자식 엘리먼트를 제거한다.

 

<element>.replaceChild(newNode, oldNode) : oldNode 를 newNode 로 치환한다.

 

<element>.hasChildNodes() : 자식 노드가 존재하는지 여부를 판단한다. 리턴형식은 Boolean 이다.

 

 

 

 

 

 

 

+ Recent posts