Coding Note

[JSP] JQuery ajax 공부하기 본문

Web/Jsp

[JSP] JQuery ajax 공부하기

jinnkim 2022. 2. 11. 11:30

 

1. Ajax 정의

- Asynchronus Javascript(비동기 자바스크립트) + XML의 의미

- 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술

 

기존 웹페이지와 Ajax 웹페이지 동작 과정

 

요청 페이지 기존 웹 페이지 동작 Ajax 웹 페이지 동작
웹 서버
요청받음
요청 처리
HTML 생성
⬇		 웹 서버
요청 받음
요청 처리
XML or JSON 생성
⬇
결과 페이지 ⬆ XML HTTP Request

 

 

JQuery Ajax 사용 형식

 

 $.ajax({
            type : "post" or "get",
            async : "true" or "false"             <== 비동기식으로의 처리 여부(false => 동기식으로 처리)
            url : "요청할 URL",
            data : {서버로 전송할 데이터},          <== 서버에 요청할때 보낼 매개변수 설정함.
            dataType : "서버에서 전송받을 데이터 형식",          <== xml, json,html,text...
            success : {
                //정상 요청, 응답 시 처리
            };
            error : {
                //요청, 응답 실패시 (오류 발생 시 처리)
            }
            complete : {
                //작성 완료 후 처리
            }

        });

 

 

 

2. JSON(Javascript Object Notation) 정의

 

- name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용한 개방형 표준 데이터    형식 

- 비동기 브라우저/서버 통신(Ajax)을 위한 XML을 대체하는 데이터 전송 형식 중 하나

- 자바스크립트에서 파생된 것으로 자바스크립트 구분 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이라 쉽게      사용이 가능하다.

 

JSON의 자료형

1) 수(number)

   - 정수, 실수

2) 문자열

3) 배열

   - 대괄호[]로 나타냄

   - 배열의 각 요소 : 기본 자료형, 배열, 객체

      - ex) "name" : ["김가나", "김다라"]

4) 객체

   - 중괄호 {}로 표현함

   - ex) {

               "name" : "김가나",

                 "age"  : 30, 

                 ....

           }

JSON 정리하기

    - ex) 배열 이름이 members이고 json객체를 배열 요소로 가지는 json 배열

           "members" : [

                                 {"name" : "이순신", "age" : 40, "gender" : 남 등},
                                 {"name" : "이순신", "age" : 40, "gender" : 남 등},
                                 {"name" : "이순신", "age" : 40, "gender" : 남 등}

                 ]

    

 

3. 예제 풀이

예제 01

- 버튼 클릭 시 Hello Ajax 출력 처리 서버 구현하기

 

 

success 시

 

error시

 

코드

 

- ajax01.html

 

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax 예제01</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
        
    </script>
    <script type="text/javascript">
        function fn_process() {
            $.ajax({
                type: "get",            /* get 방식으로 전송 */
                dataType: "text",        /* 응답 데이터를 텍스트로 지정 */
                async: false,            /* false인 경우 동기식으로 처리 */
                url: "url ",    /* 전송할 서블릿 지정 */
                data: {param: "Hello, Ajax!!"},                        /* 서버로 매개변수와 값을 설정 */
                success: function(data, textStatus) {                /* 전송과 응답이 성공했을 경우 작업 설정 */
                    $('#message').append(data);
                },
                error:  function(data, textStatus) {
                    alert("에러가 발생했습니다");
                },
                complete:  function(data, textStatus) {
                    alert("작업을 완료했습니다.");
                }
                
            });    
        }
    </script>
</head>
<body>
    <input type="button" value="전송하기" onclick="fn_process()">
    <div id="message"></div>
 
</body>
</html>
cs

 

 

- ajaxServlet.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
package kr.co.ezenac.ajax01;
 
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;
 
/**
 * Servlet implementation class AjaxLab01
 */
@WebServlet("/ajax01")
public class AjaxLab01 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public AjaxLab01() {
        super();
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doHandle(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doHandle(request, response);
    }
    private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        String param = request.getParameter("param");        //ajax로 전송된 매개변수를 가져옴.
        System.out.println("param = "+param);
        
        PrintWriter out= response.getWriter();
        out.print("안녕하세요. Ajax처러 서버입니다.");                //브러우저에 응답 메시지를 보냄
    }
 
}
 
cs

 

 

'Web > Jsp' 카테고리의 다른 글

[JSON] 예제 - 회원정보 출력하기  (0) 2022.02.14
[Ajax] 도서 정보 출력하기  (0) 2022.02.11
[JSP, DB] DB 연동 - 회원가입_추가하기  (0) 2022.02.08
[JSP, DB] DB 연동 - 회원가입_유효성 검사 및 조회하기  (0) 2022.02.07
[JSP] JDBC 연동 - DB 로그인, 로그아웃하기_2  (0) 2022.02.06
'Web/Jsp' Related Articles more
Comments