본문 바로가기

웹/PHP

JS-PHP

<?php

//테스트 방법 : http://localhost/ex41.php



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- XMLHTTPRequest 객체 -->
</head>
<body>
    <!-- 순수 js -->
    <script>
        var request=new XMLHttpRequest();
       request.onreadystatechange = function(){
        if(request.readyState ==4){
            if(request.status==200){
                document.body.innerHTML +=request.responseText;
                //eval() 함수를 사용해서 json 객체를 만들 때, 가끔 오류가 생기는
                // 것을 방지하기위해 '(' ')'을 넣어준다 
                var json=eval('('+request.responseText+')');

                console.log(json);
                var output='';
                output +='<hr>';
                output+='result: '+ json.result.result;
                output+='<hr>';
                output+='message : '+ json.result.message;
                output+='<hr>';

                for(var i=0; i<json.result.data.length;i++){
                    for(var key in json.result.data[i]){
                        output += '<h1>' + i + ':' + json.result.data[i][key] +'</h1>';
                    }
                }
                document.body.innerHTML +=output;


            }
        }
    
       };
        request.open('GET','ex38.php',true); 
        request.send();

    </script>

</body>
</html>



<?php

//테스트 방법 : http://localhost/ex39.php



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- XMLHTTPRequest 객체 -->
</head>
<body>
    <!-- 순수 js -->
    <script>
        var request=new XMLHttpRequest();
       // true : 비동기 방식으로 전환 
       // 비동기 방식은 코드를 먼저 실행하고
       // 결과를 나중에 받는다. 이벤트 콜백 함수를 통해서 
       request.onreadystatechange = function(){
           //on_ready_state_change : 응답이 오면 호출하는 이벤트 콜백 함수 
        document.body.innerHTML +="<h3>onreadystatechange</h3>"request.readyState;
        //readyState
        // 0: request 객체를 만들었지만, open() 메쏘드 호출아함
        //1 : request 객체를 만드렁 open() 초기화 했으나. send()는 안함 
        // 2: send() 호출했지만, 아직 데이타는 받지 못함 
        // 3 : 데이타의 일부만 받음 
        //4 : 모든 데이타를 받음 
        if(request.readyState ==4){
            //HTTP 상태 코드
            // 100번대 100~199 : 처리중
            // 200번대 : 성공 OK
            // 300번대 : 리다이렉트(다른 주소로 이동)
            // 400번대 : 클라이언트 오류    400 Bad Request
            // 500번대 : 서버 오류          500 Internal Server Error
            if(request.status==200){
                document.body.innerHTML +=request.responseText;
            }
        }
    
       };
        request.open('GET','ex38.php',true); 
        request.send();

    </script>

</body>
</html>



<?php

//테스트 방법 : http://localhost/ex39.php



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- XMLHTTPRequest 객체 -->
</head>
<body>
    <!-- 순수 js -->
    <script>
        var request=new XMLHttpRequest();
        //              전송방식(GET,POST) URL 비동기여부(false: 동기, true: 비동기)
        //              동기방식 : sync 응답이 올때까지 기다림. 
        //              비동기방식 : async 일단 코드 진행하고 응답이 나중에 옴 
        request.open('GET','ex38.php',false); // 대기중 ! ! 
        //  ajax 실행 
        // Ajax : 서버로 부터 데이타를 통신하는 규격 
        //          페이지를 새로고침 안하고, 부분적인 업데이트를 위해 사용
        // 예) 다음의 실시간 검색어 리스트 
        request.send();

        //출력문 
        //alert(request.responseText);

        document.body.innerHTML +=request.responseText;

        var prevDate =new Date();
        request.send();
        var nowDate=new Date();

        document.body.innerHTML +="<br><br>"+ (nowDate-prevDate) +"ms 소요됨";

    </script>

</body>
</html>



' > PHP' 카테고리의 다른 글

JQUERY-PHP  (0) 2019.11.20
JS-PHP  (0) 2019.11.20
JSON  (0) 2019.11.18
POST-OBCJECT  (0) 2019.11.18
이미지 올리기  (0) 2019.11.18