XMLHttpRequest “AJAX” 사용하기

AJAX

XMLHttpRequest 비동기 처리

새로고침 없이 서버와 통신하여 페이지의 내용을 바꾸고 싶다면 “AJAX”를 사용하면 된다.

 

“AJAX”(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다. – wikipedia

위에서 볼 수 있듯이 에이잭스는 “비동기적”이다. 보통의 경우 클라이언트가 서버에 요청을 하면 요청을 받기까지 대기한다. 하지만 에이잭스는 요청 페이지를 자바스크립트에서 비동기적으로 처리한다.

AJAX 프로세스

위 사진은 에이잭스의 프로세스를 보여준다. 이번 포스팅에서는 Jquery가 아닌 Javascript로 에이잭스를 사용하는 방법을 소개한다.

 

XMLHttpRequest 를 사용하는 순서

  1. XMLHttpRequest.open() : XML Request 를 만들고 어떤 방식으로, 어디로 요청할 것인지 매개 변수로 넘겨준다.
  2. XMLHttpRequest.setRequestHeader() 메서드를 이용하여 Content-Type을 application/x-www-form-urlencoded 로 정해준다.
  3. XMLHttpRequest.onreadystatechange 를 이용해 콜백함수를 만들어준다.
  4. XMLHttpRequest.send() 메서드를 이용해 변수 값을 매개 변수로 넘겨준다. 이 때 POST 방식인 경우 해당하며 GET 방식일 때는 아무것도 넘겨주지 않아도 된다.

 

예제 – ID 중복확인

프로세스는 다음과 같다.

  1. index.html 에서 ID를 AJAX를 이용하여 CheckID 서블릿으로 보낸다.
  2. CheckID 서블릿은 ID를 받고 데이터베이스와 연동하여 ID의 중복 여부를 체크한다. 이 때 중복되면 valid를, 중복되지 않으면 invalid를 HTML 문서로 출력한다.
  3. 요청한 신호를 전송하고 처리한 후 응답 받았다면(readyState : 4, status : 200) 중복여부를 index.html에 출력한다.
<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
    window.onload = function () {
        var xhr = 새로운 XMLHttpRequest;

        document.indexform.id.onkeyup = function () {
            document.getElementById ( "id"). innerHTML = "입력 한 ID :"+ document.indexform.id.value;

            xhr.open ( "POST", "CheckID", true);
            xhr.setRequestHeader ( "Content-Type", "application / x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (xhr.responseText == "valid") {
                        document.getElementById ( "valid"). innerHTML = "ID가 중복되었습니다.";
                    } else if (xhr.responseText == "invalid") {
                        document.getElementById ( "valid"). innerHTML = "사용 ID입니다.";
                    }
                }
            }
            xhr.send ( "id ="+ document.indexform.id.value);
        }
    }
</ script>
<meta http-equiv = "Content-Type"content = "text / html; charset = UTF-8">
<title> 여기에 제목을 삽입하십시오. </ title>
</ head>
<body>
    <form name = "indexform">
        <input type = "text"name = "id"placeholder = "ID를 입력 해주세요"/>
    </ form>
    <p id = id> </ p>
    <p id = valid> </ p>
</ body>
</ html>

 

6 : XMLHttpRequest 객체 생성

11 : 서버로 보내기 위한 request 생성 후 GET|POST, PATH 를 정함

12 : POST로 보내기 위해 Content-Type를 application/x-www-form-urlencoded 로 정의

13 : 콜백함수를 정의함 일반적으로 서버로부터 정상적인 응답을 받는 경우는 readyState == 4 && status == 200

15 : 서버가 요청을 처리한 후 만든 HTML 문서의 내용을 분석 valid 이면 중복, invalid 이면 사용가능 ID

22 : 서버로 Parameter 값을 전송

 

아래의 코드는 CheckID 를 처리하는 서블릿의 내용이다.

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;

/**
 * Servlet implementation class CheckID
 */
@WebServlet("/CheckID")
public class CheckID extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CheckID() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        
        String id = request.getParameter("id");
        Connection con = null;
        
        try {
            Context ctx = new InitialContext();
            DataSource ds = (DataSource)ctx.lookup("java:/comp/env/jdbc/OracleDB");
            con = ds.getConnection();
        } catch (NamingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch ( SQLException e ) {
            e.printStackTrace();
        }
        
        PreparedStatement pstmt = null;
        String sql = "SELECT count(id) FROM member WHERE id=?";
        ResultSet rset = null;
        
        try {
            pstmt = con.prepareStatement(sql);
            pstmt.setString(1, id);
            
            rset = pstmt.executeQuery();
            rset.next();
            
            if ( rset.getString(1).equals("0") ) {
                out.write("invalid");
            } else {
                out.write("valid");
            }
            
            rset.close();
            pstmt.close();
            con.close();
        } catch ( SQLException e ) {
            e.printStackTrace();
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

위 내용은 AJAX와 별 상관 없으며 어떻게 처리했는지 참고만 하면 좋을 것 같다.

 

    

“Submit” 버튼 없이 “onkeyup”이벤트와 “XMLHttpRequest”만을 사용하여 서버와 통신한 후 결과를 새로고침 없이 출력한 모습이다.

 

참고자료

AJAX에 대한 내용 위키피디아 – https://ko.wikipedia.org/wiki/Ajax

XMLHttpRequest에 관한 자세한 내용 – https://www.w3schools.com/xml/ajax_xmlhttprequest_create.asp


게시됨

카테고리

작성자

%d 블로거가 이것을 좋아합니다: