[ajax][국비교육] Day 70

Ga02·2023년 4월 10일

국비교육

목록 보기

64/82

🔍 AJAX, Asynchronous JAscript with Xml

(XML을 이용한) 비동기식 자바스크립트 통신 기술

자바스크립트 객체 코드(API)를 이용하여 HTTP 통신을 비동기식으로 수행하는 기술
자바스크립트 객체를 이용하여 HTTP요청을 보내고 XML파일 형식으로 응답을 받음
👉🏻 이때, 응답이 비동기적으로 이루어짐
보고있는 웹페이지의 화면의 전환없이 서버에 HTTP요청을 보내고 응답을 받기 위해 사용됨
화면은 그대로 두고 서버를 통해서 DB정보가 필요할 때 사용
요즘에는 응답데이터의 형식으로 JSON을 많이 사용

👀 Example
회원가입에서 아이디 중복 검사
-> 새 창 띄워서 하는건 동기식으로 구성하는 것
장바구니 항목 추가하고 "계속 쇼핑하기"
SNS의 좋아요 버튼
무한 스크롤
게시글의 댓글창만 새로고침/불러오기

동기화 : 요청과 응답이 순서대로 이루어짐
비동기적 : 요청에 대해 응답이 순차적으로 오지 않음 요청과 응답을 주관하는 객체가 따로 하나 생김
동기적 -> 응답에 의해 화면이 바뀌는 것

동기 : 요청이 있으면 응답을 해서 브라우저에 반영해줌(MIME)
비동기 : 응답에 대한 처리를 안함(반드시 무엇을 해야한다~ 가 없음)
인스타 스크롤 내리는거 비동기! 위에 이미 본거 그대로 유지하면서 새로운 게시글들 보이게..
네이버 회원가입 : 아이디 입력시 이미 사용중이거ㅏㄴ 탈퇴한 아이디이넉 알려주는 것
네이버 뉴스 댓글에 답글 더보기 기능! 현재 에이젝스로 구현된건 아니지만 에이젝스로 구현할 수도 잇음
검색창에 글자 입력할 때마다 비동기적으로 자동완성 키워드 추천

여기가 움직이면 동기적인 것(화면의 응답을 기다림)

🔍 XHR 내장 객체

XMLHttpRequest객체를 줄여서 XHR이라고 부름
AJAX 통신을 하기 위해 준비되어있는 자바스크립트 기본 내장 객체
IE 예전 버전(6버전 이전)에서는 AJAX객체가 ActiveX로 구현되어있음
👉🏻 크로스 브라우저 처리가 필요(버전이 낮으면 ActiveX로 구현하도록)

➰ XHR 객체 속성(property)

readyState : XHR객체로 AJAX통신에 따라 준비-요청-응답-완료 단계를 거침 ➡ Life Cycle
- readayState 속성은 XHR객체의 통신 단계를 표현하는 값을 저장하고 있음
- 라이프사이클에 따라 자동 갱신됨
  👉🏻 0으로 시작해서 4까지 4번 변경(호출)됨
  - 0 : UNSENT - XHR 객체를 생성만 한 단계를 표현 ➡ open() 호출 전
  - 1 : OPENED - 서버와 연결이 되는 상태 ➡ open() 호출 후
  - 2 : HEADERS_RECEIVED - AJAX 요청을 보낸 후 응답을 받기 전까지의 단계 ➡ send() 호출 후
  - 3 : LOADING - 응답데이터를 받는 도중 단계
  - 4 : DONE - (응답이 완료되고) XHR객체의 동작이 완료된 단계
onreadystatechange : readyState속성값이 변경될 때마다 호출되는 콜백함수를 지정하는 속성
- 주로 readyState가 4(Done)일 때를 기준으로 응답 데이터 처리를 수행
status : HTTP 응답 상태 코드
statusText : HTTP 응답 상태 메시지
Http status code
responseText : 응답 데이터를 문자열 타입으로 파싱(추출)해놓은 속성
responseXML : 응답 데이터를 XML 형식으로 파싱(추출)해놓은 속성

➰ XHR 객체 메소드(method)

open(String method, String url[, boolean asynch]) : AJAX 요청정보를 초기화하려는 함수
- AJAX를 보내기 위한 요청 관련 정보를 설정
- method : HTTP 요청 방식 지정 ➡ get, post
- url : HTTP 요청 URL 지정
- asynch : true ➡ 비동기식(기본값) / false ➡ 동기식
  ✔ 요청을 준비만 하고 전송하지는 않음

HTTP요청 메시지에서 중요한 것
Request URL
Request Method
Request Parameter -> url 뒤에 붙어서 올 것

send(null) : GET메소드로 요청을 보낼 때 사용
- 전달 파라미터는 open()함수에서 url 지정할 때 쿼리스트링으로 포함함
send(String param) : POST메소드로 요청을 보낼 때 사용
- 전달파라미터는 send()함수의 매개변수로 쿼리스트링으로 적용

function calc() {
	console.log("calc() called")
	
	//XHR객체 생성 -> 이미 존재하므로 new만 해도 된
	xmlHttp = new XMLHttpRequest();
	console.log(xmlHttp)
	
	//전달 데이터 구하기
	var n1 = num1.value
	var n2 = num2.value
	var op = oper.value
	console.log(n1, n2, op)
	
	//AJAX 요청 전 설정
	//요청 URL
	var url = "./ajax_02_ok.jsp"
	
	//요청 Method
	var method = "POST"
	
	//요청 Parameter
	var params = "num1 =" + n1 + "&num2=" + n2 + "&oper=" + op
	
	//오류없이 잘 적었나는 서버에 보내봐야 알 수 있음
	
	//AJAX 요청 준비
	xmlHttp.open(method, url)
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
	//콘텐트타입 신경써줘야해..
	
	//AJAX 요청 보내기
	xmlHttp.send(params)
   
    --여기까지 하고 아래 세개 확인하기
    --현재 ok페이지 안만들어서 404 에러나는건 맞음
}