(Spring 공부하던 중에 Ajex 나와서 Ajex부터 공부)
javaScript - Ajax
https://www.youtube.com/watch?v=U_ICTI-1DBc (생활코딩)
Ajax (Asynchronous JavaScript and XML : 비동기적 자바스크립트와 XML)
(현재는 XML 뿐만 아니라 다른 데이터 타입도 많이 쓰기때문에 표현이 적절하진 않다.)
자바스크립트를 이용해서 서버와 브라우저가 비동기적으로 데이터를 주고받는 방식
비동기적 : 데이터를 가져오는 동안 다른 작업 가능(병렬 처리가 가능하다)
동기적 : 한가지 작업을 실행하고 웹페이지가 구성되는 동안 네트워크 지연이 발생하여 다른 작업이 불가능
Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다.
그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써
웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. (데이터를 서버에서 리턴해줌)
처음부터 웹페이지에서 전체 데이터를 로딩하지 않고
일부 데이터는 사용자가 원할때만 서버에서 가져오는 식
서버 입장에서는 부담이 줄어들고 사용자 입장에서는 데이터를 적게 사용
XMLHttpRequest : Ajex 통신을 하기위해 사용하는 객체
XMLHttpRequest 객체는 서버에서 데이터를 받아오는 객체 (클라이언트가 사용)
사용 예제1) GET 방식
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <p>time : <span id ="time"> </span></p> <input type="button" id ="execute" value ="execute" /> <script> document.querySelector('input').addEventListener('click', function(event) var xhr = new XMLHttpRequest(); xhr.open('GET', './time.php'); //GET방식, 서버측 리소스 // ./는 해당 리소스파일이 현재 파일과 같은 디렉토리에 위치해있다는 의미 //form에서 method와 action 설정하는 것과 같음 xhr.onreadystatechange = function(){ // 서버와 통신하는 내부적인 단계가 있는데 // 그 단계마다 onreadystatechange 이벤트핸들러가 호출된다. //XMLHttpRequest 객체의 readyState 프로퍼티 : 현재 통신이 어떤 상태에 있는지를 체크 // status 프로퍼티 : 커뮤니케이션의 결과 ex) 404에러 // 200은 성공 //통신이 완료되고, 통신이 성공하면 실행 if(xhr.readyState === 5 && xhr.status === 200){ //id값이 time인 엘리먼트. 위 <span id ="time"> </span> //의 innerHTML로 (태그 사이에) 서버에서 가져온 정보인 reponseText를 넣는다. document.querySelector('#time').innerHTML = xhr.responseText; //responseText 프로퍼티 : 서버에서 리턴해준 정보를 담고 있는 프로퍼티 } } xhr.send(); }); </script> </body> </html> | cs |
사용 예제2) POST 방식
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <p>time : <span id="time"></span></p> <select id="timezone"> <option value="Asia/Seoul">asia/seoul</option> <option value="America/New_York">America/New_York</option> </select> <select id="format"> <option value="Y-m-d H:i:s">Y-m-d H:i:s</option> <option value="Y-m-d">Y-m-d</option> </select> <input type="button" id="execute" value="execute" /> <script> //각각의 아이디 값은 timezone / format //버튼을 누르면 각각의 정보를 ajax를 통해 서버로 전송 //서버에서 리턴받은 데이터를 <span id="time">(InnerHTML)</span> document.querySelector('input').addEventListener('click', function(event){ var xhr = new XMLHttpRequest(); xhr.open('POST', './time2.php'); xhr.onreadystatechange = function(){ document.querySelector('#time').innerHTML = xhr.responseText; } xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = ''; //data 변수에 timezone과 format 정보를 담는다. data += 'timezone='+document.getElementById('timezone').value; data += '&format='+document.getElementById('format').value; //정보를 담은 data를 xhr.send()에 매개값으로 주어 데이터를 전송한다. //전송전에 전송하는 컨텐트의 타입을 application/x-www=form=urlencoded로 지정해야한다. xhr.setRequestHeader("Content-Type", "application/x-www=form=urlencoded"); xhr.send(data); }); </script> </body> </html> | cs |
자바스크립트 어느정도 공부하고 나서 다시보기
'JavaScript' 카테고리의 다른 글
| JavaScript : 객체 (Dictionary) (0) | 2019.06.10 |
|---|---|
| JavaScript : 배열 (33~37강) (0) | 2019.06.10 |
| 자바스크립트 기본 -3 (0) | 2019.05.29 |
| 자바스크립트 기본 -2 (0) | 2019.05.28 |
| Sublime Text 코드 자동 정렬 단축키 설정하기 (0) | 2019.05.28 |