[Jquery 제이쿼리] AJAX 비동기 통신 예제

제이쿼리의 ajax 비동기통신을 통해 부천시 약국위치 정보 데이터를 가져와 화면에  표출하려고 한다.

 

- ajax

Ajax란 (asynchronous Javascript and XML)의 줄임말로 자바스크립트를 이용하여 비동기 식으로 서버와 통신을한다.

비동기통신이기 때문에 서버에 요청이 가더라도 화면의 깜빡 거림이나 화면이 이동 된다는 느낌을 주지 않고 상당히 자연스럽고 빠르게 클라이언트의 화면을 변화 시켜준다.

 

 

[Controller]

    @RequestMapping(value = "/selectPharmacyInfoList.do",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> selectPharmacyInfoList(ParmacyInfoMapVO parmacyInfoMapVO)  {
        Map<String,Object> resultMap = new HashMap<String,Object>();
        String resultFlag="F";
        try{
            resultMap.put("resultList", parmacyInfoMapService.select(parmacyInfoMapVO));
            resultMap.put("resultListCnt", parmacyInfoMapService.selectCnt(parmacyInfoMapVO));
            resultFlag="S";
        }catch(Exception e) {
            resultMap.put("resultMsg", "알 수 없는 오류가 발생했습니다.");
        }

        resultMap.put("resultFlag",resultFlag);
        return resultMap;

    }

 

[ajax]

<script>
        $.ajax({
            type : "POST",
            url : "/selectPharmacyInfoList.do",
            dataType : 'json', //서버에서 받을 데이터 형식
            data : {"searchTxt" : $('#txt1').val()},
            error : function() {
                alert("서버에서 처리중 에러가 발생하였습니다.");
            },
            success : function(data) {
                totalData=data.resultListCnt;

                if(data.resultListCnt==0){
                    html='<tr>'+
                        '<td colspan="4" align="center">데이터없음</td>'+
                        '</tr>';
                    $('#table').append(html);
                }else{
                    $.each(data.resultList, function(i, v) {
                        html='<tr>'+
                            '<td>'+v.instNm+'</td>'+
                            '<td>'+v.reprsntTelno+'</td>'+
                            '<td>'+v.refineLotonoAddr+'</td>'+
                            '<td>월요일 : '+v.mon+', 화요일 : '+v.tues
                            +', 수요일 :'+v.wed+',목요일 :'+v.thur
                            +', 금요일 :'+v.fri+', 토요일 :'+v.sat+'<br/>일요일 :'+v.sun
                            +', 공휴일 :'+v.holiday+'</td>'+
                            '</tr>';
                        $('#table').append(html);

                    });
                }
            }
        });
</script>

 

[jsp]

<table class="table table-bordered">
  <thead>
    <tr>
      <th>약국명</th>
      <th>전화번호</th>
      <th>지번</th>
      <th>영업일</th>
    </tr>
  </thead>
  <tbody id="dataTableBody">
  </tbody>
</table>

 

[결과]

 

1. 데이터가 존재하는 경우

2. 데이터가 존재하지 않은 경우

 

 

 

※ 주의 : ajax 비동기식으로 서버와 통신을 하게되면 서버에서 처리가 완료될 때까지 기다리지 않고 다른 프로세스를 진행하기 때문에 처리가 완료된 후 다음 작업을 해야하는 경우에는  async:false를 넣어줘야한다.