[PHP] Ajax개요, 특징, XHR 알아보기

1) Ajax란?

- 웹 페이지 전체를 다시 로딩하지 않고 백그라운드 영역에서 서버와 통신하여 그 결과를 리턴받고 웹 페이지 일부를 갱신할 수 있게 하는 기술을 뜻한다.

 

 

2) Ajax의 장점

- 웹 페이지의 전체를 다시 로드하지 않아도 일부분만을 갱신할 수 있다.

- 웹 페이지가 완전히 로드된 후에도 서버로 데이터 요청을 보낼 수 있다.

- 백그라운드 영역에서 서버로 데이터를 전송한다.

 

 

3) Ajax의 단점

- 바이너리 데이터를 전달할 수 없다.

- 서버 푸싱 방식의 실시간 서비스를 만들 수 없다.

 

 

4) XMLHttpRequest(XHR) 객체

 

1. 객체 생성하기

 

서버에 접속할 수 있는 객체 const XHR객체명 = new XMLHttpRequest( ); 을 생성하면
readyState라는 상태property가 생성되고 상태가 바뀔 때마다

xhr.onreadystatechange = function( ){

} 메소드가 호출된다.

    <script>
        function sendRequest(){
            const xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
                    document.getElementById('text').innerHTML = xhr.responseText;
                }
            }

            xhr.open("GET","1-AjaxP.php?userid=apple&userpw=1111",true);
            xhr.send();
        }
    </script>

 

readyState

0 : XMLHttpRequest 객체 생성이라는 뜻
1 : open( ) 메소드를 실행했다라는 뜻
2 : send( ) 메소드를 호출하여 모든 요청을 하게 되면 값이 2로 바뀐다.
3 : 요청한 데이터를 처리중이란 뜻
4 : 요청한 데이터의 처리가 완료됐다는 뜻

 

- open( )

open("전송방식", "URL주소", 동기여부);

전달방식 : get, post 방식
URL주소 : 요청을 처리할 서버의 파일 주소
동기여부 : 동기식, 비동기식으로 전달할 지 결정(true:비동기)

 

- send( )

send( ) : get방식
send("문자열") : post방식