AJAX(Asynchronous JavaScript And XML)
-브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 그 응답을 받아 처리할 수 있는 기술이다.
-AJAX를 사용하면 사용자에게 더 나은 사용 경험을 제공해준다.
1. AJAX를 위한 객체 생성
-new XMLHttpRequest(); 메소드를 사용하여 HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령을 실행한다.
-new는 새로운 객체를 만드는 키워드로 이 구문을 사용하여
httpRequest를 보낼 수 있는 새로운 객체를 만들어 req 변수에 저장한다.<script> var req = new XMLHttpRequest(); </script>
2. 요청의 방식과 URL 설정
첫번째 http의 메소드를 인자로, 두번째는 얻어올 URL을 리소스값을 인자로 넣는다.
<script> req.open("GET", "./data.txt"); </script>
3. 요청 전송
-httpRequest가 전송되도록 Send메소드를 불러온다.
<script> req.send(); </script>
<html> <head> <meta charset="utf-8"> <script> var req = new XMLHttpRequest(); req.open("GET", "./data.txt"); req.send(); // httpRequest가 전송하도록 센드메소드를 불러온다. </script> </head> <body> AJAX </body> </html>
4. 응답 확인
-req.response에 저장이 된다.
-비동기 방식으로 요청하기 때문에 send 메소드 호출 후,
바로 코드에서 접근하면 데이터가 비어 있음을 확인할 수 있다.
-이럴경우 AJAX의 진행에 따라 호출되는 callback함수를 활용해야 한다.
자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.