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

 

 




『 단순한 파일 업로드 』

​<소스코드>

​* 컨트롤러 작성

 @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 이다.

 

 

 

 

 

 

 

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>DOM을 이용한 XML의 응답결과 파싱</title>
<script language="JavaScript">
<!--
var xmlHttp;
var rquestType = "“;
// XMLHttpRequest 객체를 생성한다.
function createXMLHttpRequest(){
if (window.ActiveXObject) {
    try {    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e1) {
        xmlHttp = null;
    }
    }

} else if (window.XMLHttpRequest) {
    try{
        xmlHttp = new XMLHttpRequest()
    } catch(e1) {
        xmlHttp = null
    }
} else {
    xmlHttp = null;
}
  if (xmlHttp == null) alert("지원할 수 없는 브라우저!");
}

// 요청타입 변수를 설정하고, 콜백 함수를 붙이고 요청을 수행한다.
function startRequest(requestedList) {
    requestType = requestedList;
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "parseXML.xml", true);
    xmlHttp.send(null);
}

// 응답을 처리하는 콜백함수이다. 요청시 설정했던 요청 타입에 따라 응답을 처리한다.
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            if(requestType == "영업부") {
                listGeneralDepartment();
            } else if(requestType == "all") {
                listAllDepartment();
            }
        }
    }
}

// 요청타입이 "영업부" 일 경우 응답을 처리한다.
function listGeneralDepartment() {
    var xmlDoc = xmlHttp.responseXML;
    var generalNode = xmlDoc.getElementsByTagName("영업부")[0];
    var title = generalNode.getAttribute("title");
    var staff = generalNode.getElementsByTagName("사원");
    outputList(title, staff);
}

// 요청타입이 "all"일 경우 응답을 처리한다.
function listAllDepartment() {
    var xmlDoc = xmlHttp.responseXML;
    var allStaff = xmlDoc.getElementsByTagName("사원");
    outputList("모든 사원", allStaff);
}

// 공통 처리함수이다.
function outputList(title, staff) {
    var out = title;
    var currentState = null;
    for(var i = 0; i < staff.length; i++) {
        currentStaff = staff[i];
        out = out + "\n- " + currentStaff.childNodes[0].nodeValue;
    }
    alert(out);
}
//-->
</script>

</head>

<body>
<h3>DOM을 이용한 XML 응답 파싱</h3>
<br/>
<form action="#">
    <input type="button" value="모든 부서원보기" onclick="startRequest('all');"/>
    <br/><br/>
    <input type="button" value="영업부 사원보기" onclick="startRequest('영업부');"/>
</form>
<div id="results"></div>
</body>
</html>

[parseXML.xml]

<?xml version="1.0" encoding="utf-8"?>
<부서들>
  <총무부 title="총무부">
    <사원>김길동</사원>
    <사원>이길동</사원>
  </총무부>
  <영업부 title="영업부">
    <사원>박길동</사원>
    <사원>최길동</사원>
  </영업부>
</부서들>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

+ Recent posts