AJAX(에이잭스,아작스)

자바스크립트

by e7e 2022. 5. 24. 19:49

AJAX 기본 틀

//서버에 심부름 갔다 올 아재 맹글기
var v_ajax = new XMLHttpRequest();

//아재에게 부탁할 일 지정, 비동기여부에는 특별한 상황이 아니면 true로 비동기 지정 
v_ajax.open("메소드","주소" ,비동기여부);

//아재의 상태변화 이벤트에 관심
v_ajax.onreadystatechange = function(){

   //아재가 심부름 끝났을 때만 관심 - 심부름(통신)이 완료된 상태에서 할 일 기술
   if(v_ajax.readyState == 4 && v_ajax.status == 200){
    //responseText속성에 서버에서 받아 온 값이 담겨 있음 
     console.log(v_ajax.responseText); 
   }
}

//아재 부탁 드린 일 시작 해 주세요
v_ajax.send();

GET 방식 값 넘기기

var v_ajax = new XMLHttpRequest();
v_ajax.open("get","url?memberid=272" ,true);
v_ajax.onreadystatechange = function(){
   if(v_ajax.readyState == 4 && v_ajax.status == 200){
     console.log(v_ajax.responseText); 
   }
}
v_ajax.send();

POST방식 값넘기기1

//서버에 심부름 갔다 올 아재 맹글기
var v_ajax = new XMLHttpRequest();
v_ajax.open("post","url" ,true);
v_ajax.onreadystatechange = function(){
  if(v_ajax.readyState == 4 && v_ajax.status == 200){
     console.log(v_ajax.responseText); 
   }
}
//send 전에 해 주어야 함
v_ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
v_ajax.send("memberid=272");

파일포함, 복잡한 VO값 넘기기

<html>
<head>
	<title>메롱</title>
</head>
<body>
<h1>
	E7E World!  
</h1>
<div id="disp"></div>
<input type="file" name="myfile" onchange="fChg(this)">
<P>  The time on the server is ${serverTime}. </P>
<script>
const myDisp = document.querySelector("#disp");
function fChg(pthis){
	let formData = new FormData();
	formData.append("myfile",pthis.files[0]);

	formData.append("newjeans","하니");
	formData.append("newjeans","혜인");
	formData.append("newjeans","다니엘");
	formData.append("newjeans","해린");
	formData.append("newjeans","민지");
	formData.append("teacher","sjh");
	formData.append("signature","oho");
	let test = {
		name:"e7e",
		age:27
	};
	// 가끔 VO가 depth가 깊어 복잡할 땡!, 파일과 별개로
	// BACKEND에서 @RequestPart("test")로 받아 버리장
	formData.append("test",new Blob([JSON.stringify(test)],{type:"application/json;charset=utf-8"}));

	// formData key/value 쌍 확인
	for(let keyValueSet of formData.entries()){
		console.log(keyValueSet);
	}


	let xhr = new XMLHttpRequest();
	xhr.open("post","/mFile",true);
	xhr.onreadystatechange = function(){
		if(xhr.readyState ==4 && xhr.status == 200){
			console.log(xhr.responseText);
			let img = document.createElement("img");
			img.src = xhr.responseText;
			myDisp.appendChild(img);
		}
	}
	xhr.send(formData);
}
</script>
</body>
</html>

servlet-context.xml multipart-config

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>

		<multipart-config>
			<location>D:\temp</location>
			<max-file-size>209715200</max-file-size>
			<max-request-size>209715200</max-request-size>
			<file-size-threshold>0</file-size-threshold>
		</multipart-config>
	</servlet>

외부파일 맵핑 설정

	<resources mapping="/myfiles/**" location="file:d:/upload/" />
    
    	<beans:bean id="multipartResolver"  class="org.springframework.web.multipart.support.StandardServletMultipartResolver" />

FileController.java

package com.e7e.db;

import java.io.File;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import lombok.extern.slf4j.Slf4j;

@Slf4j
@Controller	
public class FileController {
		
	@PostMapping(value="/mFile",produces = "application/json;charset=utf-8")
	@ResponseBody
	public String saveFile(MultipartHttpServletRequest mpr, MultipartFile myfile,
			@RequestPart("test") Map<String, String> myMap,
			HttpServletRequest request) throws Exception {
		
		log.debug("원파일명: " + myfile.getOriginalFilename());
		log.debug("파일사이즈: " + myfile.getSize());
		
		//그냥 참공
		//System.out.println(new String(mpr.getParameterValues("newjeans")[0].getBytes("ISO-8859-1"),"UTF-8"));
	
		for (String nName : mpr.getParameterValues("newjeans")) {
			log.debug("멤버: " + nName);
		}
				
		myfile.transferTo(new File("d:/upload/"+myfile.getOriginalFilename()));
		log.debug(myMap.get("name"));
		log.debug(myMap.get("age"));
		
		return  "/myfiles/"+myfile.getOriginalFilename();
	}
	
}

https://www.youtube.com/watch?v=hA9cjVjqxcs

'자바스크립트' 카테고리의 다른 글

JSTREE 간단 사용법 (10)	2022.12.05
iframe 사이즈 조절 (0)	2022.10.20
자바스크립트 기본 문제 (0)	2022.08.22
audio/video (2)	2022.08.10
SWAL(SweetAlert) (0)	2022.06.08