본문 바로가기
Javascript/배경 & 실무 지식

[Javascript] Ajax 참고자료

by BeomBe 2023. 11. 22.
반응형

* JavaScript Ajax
https://www.w3schools.com/js/js_ajax_intro.asp

* Ajax Request 
https://www.w3schools.com/js/js_ajax_http_send.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_get
- XMLHttpRequest: 서버와 데이터 교환할 때 사용됨.
- 서버에 요청을 보낼 때, XMLHttpRequest 객체(Object)의 open()와 send() 메소드를 사용함.
    xhttp.open("GET", "ajax_info.txt", true); // open(method, url, async);
    xhttp.send();   // send() : GET 방식, send(string) : POST 방식
    
GET: POST방식보다 빠름
POST: 캐시파일이 옵션이 아닐  때
           대용량 데이터를 서버에 보낼 때
           user input을 보낼 때
http://nittaku.tistory.com/154?category=728079 (웹브라우저가 서버로 요청 GET, POST 방식 차이)

* XMLHttpRequest
- 백그라운드에서 웹 서버(server)와 데이터를 교환하는데 사용할 수 있음.
  즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있음.
- XMLHttpRequest 객체를 만들기 위한 구문 :
       var 변수 = new XMLHttpRequest();
(https://blog.naver.com/agensoft/221157835779)

* 백그라운드
- 메인 프로그램 이외에 부수적인 프로그램들.
http://kin.naver.com/qna/detail.nhn?d1id=13&dirId=1302&docId=36722637&qb=67Cx6re465287Jq065OcIOucuw==&enc=utf8&section=kin&rank=4&search_sort=0&spq=0&pid=TrTiwlpVuEKsstnx360ssssstB4-280408&sid=oxAVFH8J7OGQ6qdVTNd3/A%3D%3D

* XMLHttpRequest 활용
- input(입력)폼을 사용한 로그인 폼 생성 등등에 활용. (ajax가 그런 용도) 
http://egloos.zum.com/codecrue/v/2217566

* onreadystatechange
- XMLHttpRequest의 상태가 변경될 때마다 이벤트 호출
- 서버에 요청이 전송되면 -> 그 응답을 기반으로 몇 가지 작업 수행 가능.
- readyState가 변경 될 때마다 -> 그에 따른 대응을 함.
- 생성/저장한 함수마다 자동으로 호출 할 수 있는 readyState 속성이 변경됨.
https://blog.naver.com/lionlyloveil/220391834935
https://pjh445.blog.me/220108101241

* .readyState == 4
- 데이터를 전부 받은 상태

* .status == 200
- 요청 성공
https://blog.naver.com/shdlsdo/220590134013 (readyState 값에 따른 상태)

반응형