삶 가운데 남긴 기록 AACII.TISTORY.COM
Ajax 본문
Ajax
Ajax는 XMLHttpRequest 객체를 이용하여 웹서버와 비동기 통신하고 XML이나 JSON을 통해 DOM을 동적으로 갱신하는 기법을 말합니다.
XMLHttpRequest
프로퍼티
- readyStateHTTP : 통신 상태(0~4) , 읽기 전용
- response : 응답 내용, 읽기 전용
- responseText : 응답 내용을 텍스 형식으로 가져 옴, 읽기 전용
- responseType : 응답 타입, 쓰기 가능
- responseXML : 응답 내용을 XMLDocument 객체로 가져옴, 읽기 전용
- status : HTTP 상태 코드, 읽기 전용
- statusText : 요청 상태 보충 메시지, 읽기 전용
- timeout : 요청을 끝내는데 걸릴 시간을 가져오거나 설정, 쓰기 가능
- withCredentials : 크로스 오리진 통신에 대해 인증 정보를 사용할지를 뜻하는 Boolean, 쓰기 가능
- onreadystatechange : readyState값이 바뀔 때마다 호출되는 이벤트 처리기, 쓰기 가능
- ontimeout : 요청 시간이 초과할 때마다 호출되는 이벤트 처리기, 쓰기 가능
메서드
- abort() : 현재 비동기 통신을 중단
- getAllResponseHeaders() : 통신 성공시 수신한 모든 HTTP 응답 헤더를 획득
- getResponseHeader(header) : 통신 성공시 특정 HTTP 응답 헤더를 획득
- open() : HTTP 요청을 초기화
- send(data) : HTTP 요청을 보냄
- setRequestHeader(header, value) : 요청 헤더에 정보를 추가
readyState
- 0 : 초기화되지 않음
- 1 : 로드중
- 2 : 로드 완료
- 3 : 응답 수신 중
- 4 : 수신 완료
주요 이벤트
- abort : 요청 취소시 발생
- error : 요청 실패시 발생
- loadend : 요청 완료시 발생
- load : 요청 성공 후 응답이 리턴되었을 때 발생
- loadstart : start 요청을 보낼 때 발생
- progress : 데이터를 주고받는 중에 발생
- timeout : 요청 시간을 초과했을 때
ajax 통신
req.open(method, url, [,async [,user [,password]]]);
method : HTTP 메서드, GET or POST
url : 요청할 URL
async : 비동기 통신 여부(생략하면 비동기)
user, password : 인증이 필요한 경우에 사용
아래 예제는 Open api를 호출해서 공인아이피 결과값을 출력해주는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<div id="view"></div>
<script>
/* 해당 사이트의 응답 콜백 함수 이름이 callback(JSON)이기 때문에 이 콜백 함수의 동작을 정의 */
function callback(data){
console.log(data);
console.log("ip: "+data.ip);
}
window.onload = function(){
/* 요청 */
var req = new XMLHttpRequest();
var jsonObj;
var jsonText;
/* 요청이 완료되어 응답을 받은 상태(load) 시 발생한 이벤트에 실행할 리스너를 정의 */
req.addEventListener("load", function(){
/* 문서 화면에 표시 */
document.getElementById("view").innerHTML = req.responseText;
/* 응답 상태 : 200 정상 */
console.log(req.status);
/* 준비 상태 : 4 수신완료 */
console.log(req.readyState);
/* 응답값을 TEXT로 처리할 경우 */
jsonText = req.responseText;
jsonText = jsonText.replace("callback","");
jsonText = jsonText.replace("(","");
jsonText = jsonText.replace(");","");
jsonObj = JSON.parse(jsonText);
console.log("Text: "+jsonObj.ip);
/* 해당 사이트는 응답 값이 콜백함수로 된 jsonp로 오기 때문에 */
/* script element를 생성 */
var script = document.createElement("script");
/* 응답 값(콜백함수 호출)을 스크립트 element에 추가하면 위에서 정의된 콜백함수가 실행 됨. */
script.innerText = req.response;
document.getElementsByTagName("head")[0].appendChild(script);
}, false);
req.responseType = "jsonp";
req.open("GET", "https://api.ipify.org?format="+encodeURIComponent("jsonp"));
req.send(null);
};
</script>
</body>
</html>POST로 요청할 때에는 아래와 같이 content-type을 바꿔줘야합니다.
req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
req.open("POST", "https://api.ipify.org");
req.send("format="+encodeURIComponent("jsonp"));POST 요청과 응답은 DOMString, FormData, ArrayBufferView, Blob, Document 등을 주고 받을 수 있습니다.
크로스 오리진 통신
XMLHttpRequest는 동일 출처 정책을 준수하지만 JSONP, CORS, postMessage 기법으로 크로스 오리진 통신을 할 수 있습니다.
이를 이용하여 위 예제처럼 다른 웹사이트의 서비스를 가져와서 구현할 수 있습니다.
JSONP
P는 padding을 뜻하고 JSON데이터에 함수 이름을 추가했다는 뜻이 담겨있습니다.
위의 예제에서는 JSON데이터를 callback({ip:"x.x.x.x"}); 함수의 인수로 지정한 JSONP 데이터가 들어있습니다.
클라이언트에서는 이벤트가 발생했을 때 DOM을 사용해서 script 요소를 생성해서 그 내용을 script 요소에 추가합니다. 그 때 만약 콜백 함수(JSONP)의 동작이 미리 정의되어 있다면 그 콜백함수가 실행이 되게 됩니다.
<div>태그의 내용을 보면 아시겠지만, 해당 JSONP 데이터 자체가 callback(JSON); 을 실행하라는 동작이기 때문입니다.
postMessage
HTML5에 추가된 Window객체의 postMessage 메서드를 사용하여 부모, 자식 윈도우끼리 메시지를 비동기적으로 주고받을 수 있습니다.
target.postMessage(message, origin);
target : 메시지를 받을 윈도우 객체
message : 보내는 메시지(브라우저에 따라 문자열만 보낼수 있는 경우도 있음)
origin : 메시지를 받을 윈도우 출처 URL
메시지를 받은 윈도우의 내용에 message이벤트 리스너를 만들어 두면 이벤트 리스너 안에서 메시지를 받을 수 있습니다.
window.addEventListener("message", function(e){
console.log("메시지 수신");
}, false);
'DEV&OPS > Javascript' 카테고리의 다른 글
| javascript 드래그 앤 드롭 (0) | 2022.03.17 |
|---|---|
| javascript class (0) | 2022.03.15 |
| javascript 비동기 처리 Promise (0) | 2022.03.12 |
| javascript event (0) | 2022.03.11 |
| javascript DOM tree (0) | 2022.03.06 |