ajax_post.html
Javascript를 사용한 Ajax POST 전송
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax POST 전송방식 (Javascript)</title>
</head>
<body>
아이디 : <input type="text" id="mid"><br>
이메일 : <input type="text" id="memail"><br>
<input type="button" value="전송" onclick="ajaxs()">
</body>
<script src="./ajax_post.js?v=1">
</script>
</html>- form 태그를 사용하지 않음
- name을 사용하지 않음 => id 사용하여 js로 넘김
ajax_post.js
Javascript를 사용한 Ajax POST 전송
function ajaxs(){ //전송 버튼 클릭시 이벤트 함수
var mid = document.getElementById("mid");
var memail = document.getElementById("memail");
if(mid.value == ""){
alert("아이디를 입력하세요!");
}else if(memail.value == ""){
alert("이메일을 입력하세요!");
}else {
this.ajax_post(mid.value, memail.value); //ajax post 통신을 위한 함수
}
}
//Ajax POST 전송하는 함수 (실무용! 짧은코드! 조음!)
function ajax_post(mid, memail){
var http, result; //http : Back-end 통신용 , result : Back-end 제공한 데이터
http = new XMLHttpRequest();
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){ //4 == DONE (url유효) || 200 == 정상통신
console.log(this.response);
}else if(http.status == 404){
console.log("경로 오류 발생");
}else if(http.status == 405){
console.log("통신 규격 오류 발생");
}
}
//post 통신
http.open("post","./ajax_postok.do",true);
//⭐️ajax post 전송시 content-type 적용하여 urlencoded 적용해야만 정상적으로 Back-end에게 값을 전송함
http.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //form enctype 쓰고 컨스페하면 나오는거
//post는 값 여러개 보낼때 &를 이용해서 함께 보냄
http.send("userid="+mid+"&usermail="+memail);
//값 하나 보낼때
//http.send("userid="+mid);
/*
//get 방식에서는 주소 뒤에 붙였었음
http.open("get","./ajax_postok.do?userid="+mid,true);
http.send();
*/
}ajax_post2.html
jQuery를 사용한 Ajax POST 전송
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax POST 전송방식 (jQuery)</title>
<script src="../jquery/jquery.js"> </script>
<script>
//실무 고수 코드
$(()=>{
$("#btn").click(()=>{
if($("#mid").val()==""){
alert("아이디를 입력하세요!");
}else if($("#memail").val()==""){
alert("이메일을 입력하세요!");
}else{
//ajax post 통신문법
$.ajax({
url : "./ajax_postok.do", //백엔드 경로
type: "post", //전송방식
contentType : "application/x-www-form-urlencoded", //전송시 암호화 //이거 굳이 안넣어도됨 jQuery는 기본적으로 탑재되어있음
cache : false, //브라우저 캐시메모리 초기화 //매우중요 이거안쓰면 캐시에 저장됨
//post전송시 해당 방식으로 전송
/*
//데이터 하나 전송
data : {
"userid" : $("#mid").val()
},
*/
//데이터 여러개 전송 (콤마로 연결)
data : {
"userid" : $("#mid").val(),
"usermail" : $("#memail").val()
},
success:function(response){ //xhr : 200 통신 발생시 작동되는 함수
console.log(response);
},
error:function(error){ //xhr 200외의 숫자 적용된 경우
console.log("오류발생 : ", error);
}
});
}
});
});
</script>
</head>
<body>
아이디 : <input type="text" id="mid"><br>
이메일 : <input type="text" id="memail"><br>
<input type="button" value="전송" id="btn">
</body>
</html>ajax_postok.java (servlet)
POST 전송된 값 처리하여 Front-end로 보내는 Controller
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ajax_postok extends HttpServlet {
private static final long serialVersionUID = 1L;
PrintWriter pw = null;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//CORS를 해결하기 위해서 사용하는 방식의 코드
//해당 Origin, Credentials 을 사용하여 도메인이 다르게 접근을 하더라도 ajax통신이 되도록 허락을 하는 명령어
//실무에서는 "*"를 안쓰고 서버아이피나 특정 도메인을 걸어서 사용함
//ajax통신시 웬만하면 써두는것이 좋음!!!
//아래 두 줄은 상대방의 주소로 전송시 CORS를 방지하는 코드
response.addHeader("Access-Control-Allow-Origin", "*"); // 모든 아이피 허용 //*대신 아이피넣으면 해당 아이피만 허용
response.addHeader("Access-Control-Allow-Credentials", "true");
String userid = request.getParameter("userid");
String usermail = request.getParameter("usermail");
String msg = ""; //ok : 정상 아이디, no : 아이디 오류 발생, error : 백엔드 오류
this.pw = response.getWriter();
if(userid.equals("hong") && usermail.equals("hong@nate.com")) {
msg = "no";
}else {
msg = "ok";
}
this.pw.print(msg); //Front-end에게 보내는 값
}
}- CORS : 도메인 규칙이 조금이라도 다를 경우 Ajax 통신 에러
- 프론트엔드에서는 처리가 안됨 => 백엔드가 처리해야함
- 아래 두줄의 코드로 해결
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Credentials", "true");
ajax_file.html
Javascript를 사용한 Ajax POST 파일 전송
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax Javascipt - File 전송</title>
</head>
<body>
이미지 첨부파일 : <input type="file" id="mfile"><br>
<input type="button" value="전송" onclick="ajax_file()">
</body>
<script src="./ajax_file.js?v=2"></script>
</html>ajax_file.js
Javascript를 사용한 Ajax POST 파일 전송
function ajax_file(){ //전송 버튼 클릭시 이벤트 함수
var mfile = document.getElementById("mfile");
if(mfile.value == ""){
alert("파일을 첨부해주세요");
}else {
this.ajax_post(mfile); //ajax post 통신을 위한 함수
}
}
//ajax I/O로 파일 전송하는 방식
function ajax_post(mfile){
var http,result;
var formdata = new FormData(); //form태그를 이용하는 방식과 동일
formdata.append("mfile",mfile.files[0]); //배열 기준으로 파일을 처리 //0넣은 이유는 파일 하나만 써서
http = new XMLHttpRequest();
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200){
console.log(this.response);
}
}
//파일 전송하니까 POST로 전송
http.open("post","./ajax_fileok.do", true);
//http.setRequestHeader("content-type","multipart/form-data"); //formdata사용시 필요없음
http.send(formdata); //FormData 함수의 값을 send 함수에 인자값으로 적용하여 전송
}ajax_file2.html
jQuery를 사용한 Ajax POST 파일 전송
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax - File 전송 (Jquery)</title>
<script src="../jquery/jquery.js"></script>
<script>
$(function() {
$("#btn").click(function() {
if($("#mfile").val==""){
alert("파일을 첨부해야 합니다.");
}else{
/*
[jQuery Ajax I/O 형태 두가지 방식]
1. <form>태그 선언 후 new FormData()를 이용하여 Back-end로 전달 //실무에서 안씀
2. <form>태그가 없는 경우 : 아이디로 []배열기호 + files 배열기호[] 모두 적용해야함
*/
/*
id가 frm인 폼태그가 있을때
var $formdata = new FormData($("#frm")[0]);
*/
//폼태그가 없을때 => FormData 사용
/*
//정통핸들링
var $fileup = $("#mfile")[0];
var $file = $fileup.files[0];
console.log($file);
var $formdata = new FormData();
console.log($formdata);
$formdata.append("mfile",$file);
console.log($formdata.get("mfile"));
*/
//위 코드 축약형 ! 고수코드
var $formdata = new FormData();
$formdata.append("mfile",$("#mfile")[0].files[0]);
console.log($formdata.get("mfile"));
$.ajax({
url : "./ajax_fileok.do",
cache : false,
type : "post",
dataType : "HTML",
data : $formdata,
contentType : false, //multipart/form-data를 위해 false로 설정
processData : false, //data를 문자화하지 않도록 설정
success : function(result){
console.log(result);
if(result=="ok"){
alert("올바르게 파일이 전송되었습니다");
}
},
error : function(error){
console.log(error);
}
});
//보이는것처럼 제이쿼리가 자스보다 더 복잡함 그래서 실무에서는 웬만하면 사람들이 핸들링이 쉬운 자스를 쓰려고 함
}
});
});
</script>
</head>
<body>
이미지 첨부파일 : <input type="file" id="mfile"><br>
<input type="button" value="전송" id="btn">
</body>
</html>
ajax_fileok.java (servlet)
POST 전송된 값 처리하여 Front-end로 보내는 Controller
package ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
@MultipartConfig(
fileSizeThreshold = 1024 * 1024 * 5,
maxFileSize = 1024 * 1024 * 50,
maxRequestSize = 1024 * 1024 * 100
)
public class ajax_fileok extends HttpServlet {
private static final long serialVersionUID = 1L;
PrintWriter pw = null;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//ajax통신시 CORS 방지
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Credentials", "true");
request.setCharacterEncoding("utf-8"); //한글파일명이 올수도 있으니까
this.pw = response.getWriter();
//경로확인
//String url = request.getServletContext().getRealPath("");
//System.out.println(url);
/*
/Users/nayeong/Documents/web_servlet/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/web/
*/
//파일 저장
Part mfile = request.getPart("mfile"); //전송된 파일 데이터를 받는 역할
String url = request.getServletContext().getRealPath("/upload/"); //전송될 파일 디렉토리
String filenm = mfile.getSubmittedFileName(); //파일명
mfile.write(url + filenm);
this.pw.print("ok");
}
}