개발하자

[JS] AJAX 호출 본문

TECH STACKS/JSP︲HTML ︲CSS ︲SCRIPT

[JS] AJAX 호출

개발리미 2023. 11. 7. 18:03
728x90

비동기 데이터 보내고 호출 하기

나는 프로젝트 특성상 모든 구현을 jsp에서 했다.

1번 jsp : ajax 호출 및 표출할 jsp
2번 jsp : ajax 호출을 위해 구현되어 있는 jsp (1번에서 작성하는 url)

3번 jsp : 쿼리 함수가 있는 jsp

 

동작하는 순서는 1번 -> 2번 -> 3번 -> 2번 -> 1번 순이 된다. 

구현할 때는 편한 순서로 하면 좋지만 나는 항상 쿼리를 먼저 만든다

 

[ 1번 jsp : script/HTML ]

<script>
    function selectStatusAjax() {

        // 호출한 데이터 표출할 id
        cateS = document.getElementById("categoryCodeData3View");

            $.ajax({
                type: "GET",
                url: '/data/url',	// ajax 호출 url
                contentType: "application/json",
                data: {
                    dataSid : dataSid	// ajax 호출을 위한 데이터 보내기
                 },
            // Cache-Control 헤더를 설정하여 캐싱 비활성화
            // 뒤로가기 시 문제 없도록 캐싱 남기지 않게 추가
            beforeSend: function(xhr) {
                xhr.setRequestHeader('Cache-Control', 'no-cache');
            },
            success: function(rVal) {
                var jObj=JSON.parse(rVal);
                if(jObj != null && jObj !== undefined){
                    if(jObj.length != 0&&jObj != null&&jObj != ''){
                        for(var i=0;i<jObj.length;i++){
                        // 원하는 형태로 표출
                        htmlCateS += '<p style="text-align: center;width: 20%;float: left;">'+jObj[i].CODE_STATUS+'<br/>'+jObj[i].REGISTER_DATE+'<br/></p>';
                        cateS.innerHTML=htmlCateS;
                        }
                    } 
                }
            },
            error:
                function(request,status,error){
                alert('errorStatus=' +request, status, error);
            } 
        });
    }
</script>
<body>
<p id="categoryCodeData3View" class="categoryCodeData3View" >
    <!--  진행상태 ajax 표출될 자리 -->
</p>
</body>

 

호출할 url 에 필요한 data 들을 넣어서 호출 후 원하는 html 자리에 호출한 데이터 표출해 준다.

 

 

[ 2번 jsp : ajax 구현 ]

	<%@include file="3번.jsp"%>
   
   <%
   		// 1번에서 가져온 데이터
        String dataSid 			= parseNull( request.getParameter("dataSid"));
        List<Map<String,Object>> sqlVal = null;

        try{
            // cropQuestionStatusSelect() 함수에 SELECT 쿼리 
            // 3번 jsp의 쿼리를 가져온다
            sqlVal = jdbcTemplate.query(cropQuestionStatusSelect(), new Db(), dataSid);
            JSONArray jsonArray = convertListToJson( sqlVal );
            out.print(jsonArray);	// json으로 내보낸다

        }catch(NullPointerException e){
            out.print("ERROR");
        }
    %>

 

1번에서 가져온 데이터를 필요에 따라 사용! 나는 3번 jsp에서 쿼리 조회할때 필요하기에  가져왔다  :)

2번에서 할일은 쿼리 조회를 해 html에 표출할 데이터를 가져와서 1번에 뿌려준다

 

 

[ 3번 jsp : 쿼리 ]

<%!
public String StatusSelect(){
	String StatusSelect = "";
		
	StatusSelect += "SELECT CODE_SID, CODE_BOARD_SID, CODE_STATUS, REGISTER_DATE 				";
	StatusSelect += "FROM table WHERE CODE_BOARD_SID = ? ORDER BY CODE_SID ASC  ";
	
	return StatusSelect;
}

%>

 

 

비동기는 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하게 되고

비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을때 마냥 기다릴 수 없을때 사용하게 된다

결론은 비동기로 호출한 데이터가 어떠한 것에 의해 변경되면 기다리지 않고 바로 눈앞에서 변경되는걸 볼 수 있다!

 

 

 

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)

728x90
반응형

'TECH STACKS > JSP︲HTML ︲CSS ︲SCRIPT' 카테고리의 다른 글

[JAVA] jsp에서 DB 쿼리 호출  (0) 2023.11.29
[JS] 스크립트 form submit (onclick)  (0) 2023.11.29
[HTML] a 태그로 알림창 생성  (0) 2023.11.07
[JS] 버튼으로 테이블 행 추가 하기  (0) 2023.09.12
[JS] checkbox 체크 시 Y, 체크 해제 시 N  (0) 2023.09.12
'TECH STACKS/JSP︲HTML ︲CSS ︲SCRIPT' Related Articles more