ajax ( Asynchronos Javascript And Xml )를 사용해보자!

ajax는 언제 사용될까? 🤔

http프로토콜의 특성 중 하나로 원하는 웹 페이지를 요청하면 서버에서 응답을 해준 뒤 연결을 끊어버린다 !

이러한 특징 때문에 계속해서 데이터가 변경 되어 웹 페이지에 보여주어야 할 경우에 ( 채팅처럼 ) 

우리는 데이터를 변경하기 위해 웹 페이지를 새로고침 해야할 것이다. 😕

이런 문제점을 해결해주는 친구가 ajax다.

.

.

나는 우측 상단에 있는 변경 메뉴를 클릭시 해당 태그의 내용을 바꿔주는 작업을 할 때 ajax를 사용했다.

( 변경 메뉴 클릭 후 변경할 문자 입력 > 서버에 전송하여 데이터 베이스에 저장 > 서버에서 웹 페이지로 완료 신호 받고 변경 내용 적용 )

가게명 변경을 기준으로 설명하겠다.

우선 첨부한 부분은 메뉴 부분이고, 내용이 바뀔 태그에는 class="settingItem"을 주었다.

<header>
    <a href="#"> SNS </a>
    <a href="#"> <img src="../icon/setting3.png" id="setting"></a>
    <div id="setting_section">
        <ul id="setting_menu">
            <li> 가게명 변경 &nbsp; </li>
            <li> 메세지 변경 &nbsp; </li>
            <li> 위치 변경 &nbsp; </li>
            <li> 배경 변경 </li>
            <input id="upload" type="file" accept="image/*" name="boardPhoto[]" value="사진 불러오기" enctype="multipart/form-data" >
        </ul>
    </div>
</header>

나는 3개의 함수를 만들어 사용했다.

1 ) 변경 메뉴 클릭 이벤트 설정

2 ) 변경 데이터의 여부 확인 ( 아무 것도 적지 않고 확인 버튼을 누르면 취소 되도록 )

3 ) 서버에 데이터를 주고 완료 응답을 받는 함수 ( ajax )

클릭 이벤트 설정 함수다.

총 4개의 버튼이 있지만 가게명 변경 코드만 첨부하겠다. ( 다하면 너무 길어서... )

/********************************************************************/
/************************설정창 클릭 이벤트***************************/
/*******************************************************************/
// prompt에 문자열이 있을 경우 문자열과 인덱스 값을 서버로 전송
// 인덱스 값은 어떤 항목이 변경하는지 알려주는 역할
// 전송된 데이터는 데이터 베이스에 저장.
// 데이터 저장 후 웹 페이지로 따로 받는 데이터는 없음.
// 단지 sucess된 경우 prompt에서 받은 값을 바로 적용하는 방식
function settingEvent()
{
    var $setting_menu = $("#setting_menu > li");
    var $settingItem = $(".settingItem");
    var index;
    var result;
 
    $setting_menu.eq(0).click(function(){
        // 가게명 변경 
        index = $(this).index();
        result = bootbox.prompt("변경할 가게명을 입력해주세요 :)", function(result){ console.log(result);
            // 입력 확인 후 이벤트 
            updateSettingData( "storeNameChange.store", result, $settingItem.eq( index ) );    
        });
    });    
}

버튼목록과 내용바뀔 태그 목록, 현재 클릭한 메뉴의 index값과 입력 값 ( result ) 변수를 두었다.

가게명 변경을 클릭시 해당 메뉴의 index값을 저장 한다.

그다음 prompt창을 열어주어 값을 입력받은 후 이벤트를 실행한다. 

( 커스텀된 prompt창을 사용하고 싶어서 bootbox라는 플러그인을 사용했다. bootbox 부분은 무시해도된다. )

이제 updateSettingData를 살펴 보겠다.

url은 서버 어디로 보낼지 지정해주는 변수, result는 결과 값, $item은 내용이 변경될 노드이다.

checkEmpty가 prompt창에 입력된 데이터가 있는지 체크 하는 함수다. ( 밑에 첨부하겠다. )

사용자가 변경할 데이터값을 입력했다면 서버로 전송 해주어야한다.

post형식으로 url로 보내겠다고 지정해 놧고, data는 "result"이름으로 result ( 매개변수로 들어온 친구 )를 보내는 것이다.

이렇게 지정해주면 서버에서는 getParameter("result")로 찾을 수 잇을 것이다.

보낸 후 서버에서 성공적으로 처리가 되었다면 sucess함수가 제대로 처리가 되지 않았다면 error함수가 실행된다.

function updateSettingData( url, result, $item )
{
    if( checkEmpty(result) )
    {
        // 문자열이 있을 경우 서버로 전송
         $.ajax({
            type : "POST", 
            url : url, // url을 서버로 보내주면 지정 서블릿이 실행
            data : { "result": result }, // 서버에서 사용할 메소드를 type 에다가 넣어준다
            
            success : function( data )
            {
                $item.html(result);
            },
            
            error : function()
            {
                alert("변경 실패");
            }                
        });
    }
}    

// prompt창 데이터 여부 확인
// 데이터 있을 시 서버에 전송 후 변환
function checkEmpty(str)
{
    if( str )
    {
        // 입력 사항 있음    
        return true;
    }
    else
    {
        // 입력 사항 없음 
        return false;
    }
}

서버를 켰을 때 실행 완료한 사진을 첨부 했어야하는데 현재 내 노트북에 서버가 없..다...😑

쨌든 성공 했다는 것...!