Ajax

오늘 이거 때문에 고생을 하였다.

덕분에 Ajax가 뭔지에 대해서 좀더 잘 알게되었지만..

/* Ajax 테스트 함수 실행 */
testFunction("../test.php", function(data){    alert(data); });
 
/*
XMLHttpRequest 객체는 모든 Ajax호출의 핵심이다. 
1. XMLHttpRequest 의 인스턴스를 생성하는 것은 Ajax 호출의 첫 단계이다.
2. open() 메소드는 Ajax 호출을 시작할때 두번째 단계이다.
   open()은 필요한 정보를 수집함으로써 문장을 실행할 준비를 한다.
*/
 
function getHTTPObject(){
    // 변수 초기화
    var xhr;
    
    // 지원 여부 검사
    if ( window.XMLHttpRequest ) {
        xhr = new XMLHttpRequest();
        return xhr;
    }
}
 
function testFunction(dataUrl, callback){
    var request = getHTTPObject();
    
    /*    모든 정보를 전송 준비    */
    
    /* 
       send 메소드를 이용해 데이터를 보내서 요청하고, Ajax호출 데이터를 언제 사용할 준비가 되는지 
       알기위해 readState프로퍼티를 대기하는 작업을 시작할수 있으며 실제 호출을 실행한다.
       readstate는 readystatechange라는 이벤트와 연계되어 있으며,
       readystatechange이벤트는 모든 Ajax 호출의 진행상황을 지속적으로 모니터링 하고 데이터를 
       언제 파싱할 수 있는지 알려준다. 
    */ 
    
    /*
        readyState 는 호출을 처리하는 과정에서 체크포인트를 해당하는 상태를 알려주는 프로퍼티이다. 

        제공되는 값
        0 - open 메소드가 호출되지 않음 (초기화되지 않음)
        1 - open 메소드는 호출되었지만 send 메소드는 호출되지 않음 (로딩중)
        2 - send 메소드가 호출되었으며 요청이 전송되는 중 (로딩 완료)
        3 - 응답이 디돌아오기 시작함 (상호작용 중)
        4 - 요청이 완료됨(완료)
    
        readyState 값이 바뀔때마다 readystatechange이벤트가 발생한다. 
        새 이벤트에 이벤트 핸들러를 첨부하고 반환된 데이터를 대상으로 뭔가를 수행하기에 앞서 
        '4' 상태에 도달할때 까지 대기하면 된다.
    */
    
    // readyState값이 0 -> 4까지 변할때마다 자동으로 실행된다.
    request.onreadystatechange = function(){
        
        //요청이 준비되고 처리되었는지 검사
        if ( request.readyState === 4 && request.status === 200 ) {
            
            /*
                Ajax객체는 데이터를 프로퍼티로 반환한다.
                responseText : 데이터 응답이 문자열 형식
                responseXML : XML 데이터를 반환
            */
 
            /* 작업 수행, 반환된 데이터를 출력 */
            // console.log(request.responseText);
          
            /* Ajax 응답을 변수에 저장, Json 형식으로 변환 */
            var contacts = JSON.parse(request.responseText);
            //var contacts = request.responseText;  

            //콜백 함수를 실행하기 전에 콜백 함수가 실제로 함수인지 확인
            if ( typeof callback === "function" ) {
                callback(contacts);
                
            } // 함수 확인 끝
            
        } // Ajax 상태검사 끝
        
    }//onreadystatechange 끝
    
    /* 
        open( 메소드[GET, POST], 파일이나 URL, 비동기 스크립트에 대한 불린 플래그, 
              사용자명(optional), 비밀번호(optional))

        파일 주소는 js의 상대주소가 아닌 실행된 html문서의 상대위치이다.
        로그인 폼, 등록폼에서 Ajax호출을 구현할 때 사용한다. 데이터 암호화를 하는게 중요하다.
    */
    
    /* 모든 정보를 전송 준비 상태로 만듦 */ 
    request.open ( "POST", dataUrl , true);
    // var dataTest = document.service_inquiry.inquiry_id.value.trim();
    
    /* 실제 호출을 초기화 및 실행 */
    var username = "username="+document.id.value.trim();
    // request.setRequestHeader(null);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(username);
 
 
 
 
 
/*
책 예제는 json파일을 읽어오는 것이었다.
그것을 가지고 웹 페이지 상의 아이디 값을 가져와서
php파일에서 읽어온 DB값과 대조하는 것으로 조금 바꾸었다.
그래서 소스가 좀 섞여 있을 것이지만 내가 필요한 부분도 있어서
그냥 그대로 두었다.
*/
}
 

내가 봤던 '개발자와 디자이너가 함께보는 자바스크립트 프로그래밍' 에서는 request.send 즉 데이터를 이용한 실행이 다루어져 있지 않았다.

회사 책 '성공적인 웹 프로그래밍 mysql와 php' 에서 좀 다뤄져 있긴 했는데 그래도 설명이 아쉬운 부분이 있었다.

일단 request.send(value)를 보내는 것은 확실히 된다.

하지만 2가지 방식이 있다.

첫번째는 위와 같이 

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

이렇게 구문을 추가하고 send에 "보내는 값의 key = "+ 보낼 값; 이렇게 보내주는 것이다.

PHP로 예를 들자면 dataUrl로 지정된 php파일에서 

$_POST['username'] 또는 $_GET['username'] 이런식으로 받아줘야 하는 것이다.

두번째는 위의 request.setRequestHeader 를 쓰지 않고 그냥 request.send(username);  이거만 쓴다음에

받을 php 파일에서 $HTTP_RAW_POST_DATA를 쓰는 것이다. 

이렇게 하면 굳이 setRequestHeader을 쓰지 않아도 값을 받는다.

물론 이렇게 안하고 그냥 스크립트 파일안에서 <?php  code ?> 쓰는게 더 나을수도 있다.

참고 사이트 : https://developer.mozilla.org/ko/docs/AJAX/Getting_Started

참고 책 : 개발자와 디자이너가 함께보는 자바스크립트프로그래밍, 성공적인 웹 프로그래밍 mysql와 php