ajax 통신 방법 (QueryString)

대엽 2021. 3. 27. 18:29

2021. 3. 27. 18:29

ajax 문법이 어느역할을 하는지? 를 중점에 두고 보시면 좋을겁니다 !!

사용된 예제는

Spring이 아니고 DynamicWebProject 입니다. 통신방법 메소드 맵핑 하는 맥락은 비슷비슷하지만요~

ajax 공부를 하기위해 여러 블로그들을 돌아다니다 보면, $.get , $.post ? .success() 등등.. 다양한 문법이 있는데

문법은 다 다르지만 작동은 다 될거에요 !!!

ajax 문법 정의

$.ajax({

(요청 정보 작성)

(필수)type: get,post,delete ... , HTTP Method (기본값 GET 이지만 그래도 명시해주는게 좋음)

(필수)url: "http://localhost:8080/블라블라" , 요청을 보낼 주소

data: , 서버에 전송할 http의 body ( 보통 GET 요청은 data가 없다 )

contentType: , (기본값)" application / x - www - form - urlencoded "

dataType: "text, html, xml, json ... " 서버에서 반환되는 데이터 형식을 지정합니다.

(dataType 생략할 시 jQuery가 알아서 정함)

})

.done(function(result){

요청 성공시 동작하는 콜백함수입니다!!

})

이렇게 틀을 먼저 만들고 내용을 채워나가는 걸 추천드립니다 ~

$.ajax({}).done(res=>{}).fail(error=>{})

getajax.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="getajax()">
    <input type="text" id="username" name="username" placeholder="username"/>
    <input type="password" id="password" name="password" placeholder="password"/>
</form>
<button onclick="getajax()">클릭</button>
</body>
 
<script>
function getajax(){
    var username = $("#username").val();
    var password = $("#password").val();
    console.log(username);
    console.log(password);
 
    var params = "username="+username;
    params += "&password="+password;
    
    $.ajax({
        //GET으로 key=value로 데이터를 전달하고 text/plain으로 응답받을 예정
        type:"GET",
        url:"http://localhost:8000/ajax/ajax1?" + params,
        //data: , get은 전송할 http의 body가 없음, 그래서 data필드가 필요없음
        //contentType: ,전송한 data가 없으니까 그 data를 설명한 필드도 필요없음
        dataType: "text" 
    })
    .done(function(result){ //ajax통신 완료후에 정상이면 실행
        alert(result);
        })
    .fail(function(){
        alert("통신실패");
        });
}
    
</script>
</html>
Colored by Color Scripter

cs

get방식의 주소요청 (파라미터가 주소에 보인다)
31행 : url = http://localhost:8000/ajax/ajax1? + "username="+username + "&password="+password
 
 
Ajax1.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package com.cos.ajax;
 
import java.io.IOException;
import java.io.PrintWriter;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/ajax1")
public class Ajax1 extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    public Ajax1() {
        super();
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        
        System.out.println("username: "+username);
        System.out.println("password: "+password);
        
        // ajax의 done함수 result 에 들어갈 내용
        PrintWriter out = response.getWriter();
        response.setCharacterEncoding("utf-8");
        
        StringBuffer sb = new StringBuffer();
        sb.append("username="+username+"\n");
        sb.append("password="+password);
        
        out.println(sb);
        out.flush();
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
    }
 
}
 
Colored by Color Scripter

cs

12행 : @WebServlet("/ajax1") : /ajax1 으로 끝나는 주소요청을 담당하는 java파일임을 알린다.

20행 : doGet(request, response) : get 요청일때 동작하는 함수

21, 22행 : 요청된 주소( url = http://localhost:8000/ajax/ajax1? + "username="+username +"&password="+password )의 파라미터 이름이 username, password인 값을 자바 변수로 정의한다

28행 : requset (요청)은 모두 파악했으니, 이제 response (응답)할 차례.

32, 33행 : 응답을 HTML로 하기때문에 그에 맞는 문법을 사용한다. ( HTML 태그가 사용가능하다 )

결과

결과 해석