JSP - AJAX통신 입문하기

java

JSP - AJAX통신 입문하기

dev_summer 2020. 11. 12. 11:38

- AJAX(Asynchronous Javascript And XML)

javascript를 이용한 비동기 데이터 통신 기술

뒤로 가기가 없는(페이지 이동이 없는) 부분적으로 정보를 리로드 하는 기술

응답하는 곳이 html이 아닌 데이터를 리턴해주어 부하가 훨씬 적고 빠르다.

요청할때 xmlhttprequest, Data를 요청하고 data를 return해준다.

그 부분을 부분리로딩해준다.

참고로 요즘은 websoket사용한다 :-)

현재 배우고있는 자바스크립트 버전은 ES5이다.

ES6,7등의 최신버전의 스크립트문법은 브라우저가 컴파일러 해주지 못해서 탄생한 것이 바벨이다.

*바벨(babel) : EX6 를 ES5로 컴파일 해주는 자바스크립트컴파일러

이러한 자바스크립트 컴파일러의 등장으로 자바스크립트 라이브러리인 제이쿼리는 하향을 타고있고 순수한 자바스크립트를 이용하여 개발을 하고있다.

<!DOCTYPE html>
<html>
  <body>
    <div id="demo">
      <h2>The XMLHttpRequest Object</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
      <a href="ajax_info.txt">파일이동</a>
    </div>

    <script>
      function loadDoc() {
        var responseText = fetch("ajax_info.txt");
        console.log(responseText);
      }
    </script>
  </body>
</html>

개발자모드에서 ajax_info.txt를 찾지 못하는 이유는 패치를 하는 순간 하드디스크의 i/o를 한다.

i/o한 과정중에 responseText에 넣기때문에 보이지 않음.

promise : 언젠간 들어올 데이터

<!DOCTYPE html>
<html>
  <body>
    <div id="demo">
      <h2>The XMLHttpRequest Object</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
      <a href="ajax_info.txt">파일이동</a>
    </div>

    <script>
      async function loadDoc() {
        var responseText = await fetch("ajax_info.txt");
        console.log(responseText);
      }
    </script>
  </body>
</html>

데이터를 받음.

fetch를 하기 전 기다린 후 변수에 넣는 await해야한다.

<!DOCTYPE html>
<html>
  <body>
    <div id="demo">
      <h2>The XMLHttpRequest Object</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
      <a href="ajax_info.txt">파일이동</a>
    </div>

    <script>
      async function loadDoc() {
        var response = await fetch("ajax_info.txt");
        var responseText = await response.text(); // 파싱하는 시간또한 기다렸다가 넣음
        console.log(responseText);
      }
    </script>
  </body>
</html>

기다려주는 await를 사용하면 결과값을 얻을 수 있다.

모~ 든 통신은 다 붙어야 한다.

<!DOCTYPE html>
<html>
  <body>
    <div id="demo">
      <h2>The XMLHttpRequest Object</h2>
      <button type="button" onclick="loadDoc()">Change Content</button>
      <a href="ajax_info.txt">파일이동</a>
    </div>

    <script>
      async function loadDoc() {
        var response = await fetch("ajax_info.txt");
        var responseText = await response.json(); // json을 파싱해서 뿌려줌
        console.log(responseText);
        console.log(responseText.name); //.name처럼 접근이 가능하다. 결과값은 
       //var t = JSON.parse(responseText); 으로 하면 t.name으로 접근이 가능하다. 
      }
    </script>
  </body>
</html>

.json으로 받으면 컴파일 시 파싱되어 객체로 접근이 가능하다.

'java' 카테고리의 다른 글

프로젝트 모델링 (0)	2020.11.12
AJAX (0)	2020.11.12
JSP - 게시판만들기(11) - 주소 API 사용하기 (0)	2020.11.12
스프리링 부트 기본개념 (0)	2020.11.11
JSP - 게시판만들기(10) 로그인 -v2(Cookie,EL표현식, JSTL 적용) (0)	2020.11.09

현재글JSP - AJAX통신 입문하기

'왜'라는 질문에 대한 답이 굳건하고 단단해질때 지속성은 늘어난다.

nodejs밋업, 인프랩, jsp, 디앤디, 톰캣, 2022개발회고, DND, NestJS, rds connection, MySQL, 사이드프로젝트, Connection Pool, docker mysql 시드데이터, docker초기생성, lambda, java, 디앤디사이드프로젝트, dnd프로젝트, lambda rds, 인프런퇴근길밋업,

Today :
Yesterday :

일	월	화	수	목	금	토
					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

🐾