티스토리 뷰

웹/부스트코스

[WEB]Ajax통신의 이해

cll179 2018. 6. 3. 15:17

*Ajax 어원 확인

 

1. Ajax (XMLHTTPRequest 통신)

이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했습니다.

더 좋은 UX를 제공할 수 있는 기술입니다.

페이지 전체의 데이터를 가져오는 것이 아닌, 필요한 부분의 데이터만 가져오는 기술

 

Ajax통신의 이해

Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받습니다

JSON이 무엇인지 찾아보고, JSON 포맷으로 데이터를 작성하려면 어떤 규칙이 필요한지 알아보세요.

 

JSON

클라이언트와 서버가 데이터를 주고 받을 때 어떠한 포맷이 필요한데, 현재 많이 쓰는 것이 JSON이다. 

자바스크립트 오브젝트처럼 키/값 형식으로 되어 있다.

https://ko.wikipedia.org/wiki/JSON

 

 

2. AJAX 실행코드

AJAX 실행 코드는 아래와 같습니다.

아래 방법은 XMLHTTPRequest 객체를 사용하는 표준방법입니다.

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

링크 바로가기

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보냅니다. 

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수(function()부분)가 실행됩니다.

콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태입니다. 

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 입니다.

 

실습을 위해서 서버구동이 필요.

 

*test.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="outside">outside element</div>
</body>
<script src="test.js"></script>
</html>
 cs

 

 

*test.js

1
2
3
4
5
6
7
var oReq = new XMLHttpRequest();
oReq.addEventListener("load",function(){
  console.log(this.responseText);
});
 
oReq.open("GET", "./json.txt");
oReq.send();
 cs

 

*json.txt

1
2
3
4
{
  "name" : "kwon",
  "favorites" : {"apple","orange"} 
}
 cs

 

참고 사이트 : http://www.edwith.org/


※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > 부스트코스' 카테고리의 다른 글

[WEB] JSP 내장 객체  (0) 2018.06.04
[WEB]JSP 문법  (0) 2018.06.04
[WEB]Browser Event, Event object, Event handler  (0) 2018.06.03
[WEB]DOM과 querySelector  (1) 2018.06.03
[WEB]window객체  (0) 2018.06.03
댓글