PHP - JS에서 AJAX로 전달한 JSON 데이터 이용하기

 최근 동아리 프론트엔드 개발을 담당하면서 시간을 많이 잡아먹다가 막바지 작업에 이르러서 이제 AJAX를 이용하려고 JS를 손대고 있는데 몇시간 전부터 역경이 찾아왔다.

 

 일단 get으로 ajax가 제대로 동작하는지 확인해봤다.

 참고 : ajax는 보안문제로 같은 도메인에 존재하는 곳으로만 request를 보낼 수 있다.

        function v(){

            let xhr = new XMLHttpRequest();

            xhr.open("get", `./phpTest/test.php`, true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                }
            }
            xhr.send(null);

        }

<?php
	echo '잘 받아졌습니다.';

?>

 일단은 제대로 동작하는 것만 보면 되기 때문에 아무 값을 전달하지 않고 php의 값을 돌려받을 수 있도록 했다.

 확인 결과 잘 받아졌다. 이제 데이터를 전달할 수 있도록 구조는 json으로 작성해서 값을 넘겼으나 제대로 동작하지 않았다. 다만, 로컬로 확인하니 php가 작동 안해서 다른 것들도 포함되었다. 실제 테스트를 할 땐 php가 작동하는 환경을 구축하거나 귀찮으면 무료 호스팅 업체를 찾아보자. 일단 귀찮아서 이미 뚫어놓은 호스팅이 있어서 거기로 작성함.

 

 이제 post로 놓고 데이터를 전송하려고 임의의 값을 넘겼다.

        function v(){

            let xhr = new XMLHttpRequest();
            let preData = {t1:"abcdefg"};

            xhr.open("post", `./phpTest/test.php`, true);
            xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                }
            }
            xhr.send(JSON.stringify(preData));
        }
    

 문제는 여기부터. php에서 어떻게 ajax로 받은 json데이터를 얻느냐는것인데 분명 POST로 보내니, $_POST로 받을 수 있지 않을까해서 $_POST로 받아보기도, 혹시라도 몰라서 $_GET으로도. $_REQUEST로도 데이터를 받아봤는데 어떤 네임으로 들어오는지를 몰라 뭘 넣어도 안되었다. preData를 받아보기도 했는데 허사.

 

그러다 아래 문서를 찾았다.

https://stackoverflow.com/questions/8893574/php-php-input-vs-post#answer-8893770

PHP "php://input" vs $_POST

 요건은 문서중의 $_POST의 작동인데, $_POST는 값이 이상하게 전달되면 동작을 안한다고 하는 듯하다. 결국, json은 데이터 타입이므로 POST로 전달되려면 name이 있어야하는데 name이 없으니 발생하는 문제인 듯.

 그에 반해 php://input의 경우에는 전달받은 RAW 데이터를 품고 있으므로 json 데이터도 값을 받을 수 있다고.

<?php

$req = file_get_contents("php://input");
$param = json_decode($req);

echo $req."\n";
echo $param->t1;

?>

 코드 구성은 위와 같이 작성했다. 실제 RAW데이터를 담고 있는 $req 변수와 RAW 데이터를 decode를 진행한 $param을 출력하도록 작성한 것.

 결과는 잘 도착했다.

 

 참고로, setRequestHeade로 Content-length 값을 주는 경우도 있는데 XMLHttpRequest의 경우, 이 값은 잘못 작성되면 해킹 위협이 될 수 있어 브라우저상에서 막고 브라우저가 자동으로 넣어주는듯 하다. 확인은 Chrome에서만 했음.

https://stackoverflow.com/questions/7210507/ajax-post-error-refused-to-set-unsafe-header-connection#answer-7210840

AJAX post error : Refused to set unsafe header "Connection"