자바기반의 웹&앱 응용 SW개발자 양성과정 58일차 -90

Ajax(Asynchronous Javascript And XML)

원격에 있는 데이터를 요청을 해서 화면에 내용을 갱신하는 기술입니다.

 

 

 

웹 2.0(Web 2.0)이란 개방, 참여, 공유의 정신을 바탕으로 사용자가 직접 정보를 생산하여 쌍방향으로 소통하는 웹 기술을 말한다. 웹 1.0이 인터넷을 통해 일방적으로 정보를 보여주었다면, 웹 2.0은 사용자가 직접 콘텐츠를 생산하여 쌍방향으로 소통할 수 있다. 게시판, 댓글, 블로그, UCC, 지식백과 등이 있다.

 

단순한 웹사이트의 집합체를 웹 1.0으로 보고, 웹 애플리케이션을 제공하는 하나의 플랫폼으로의 발전을 웹 2.0이 데스크톱 컴퓨터의 응용 프로그램을 대체할 것으로 예견하고 있다. 사용자들의 참여, 공유, 개방을 유도 산출물을 공유하고, 외부에 개방할 수 있도록 하는 서비스라고 할 수 있다.

 

Ajax 이전의 웹요청은 문서 요청입니다.

화면을 갱 신하기 위해서 이전에는 서버에서 문서 자체를 요청해 갱신하는 방법을 사용했습니다.

하지만 Ajax를 사용하면서 Data를  요청해 Data만을 응답받아 브라우저를 갱신할 수 있도록 했습니다.

 

 

Mysql은 오라클과 달리 ROWNUM이 존재하지 않고 레코드 개수를 제한할 수 있는 LIMIT 키워드가 존재하며

OFFSET이라고 해서 제한된 레코드 수다 음부터 개수를 지정해 가져오게 할 수 있습니다.

SELECT * FROM TABLE LIMIT 10 OFFSET 10;

10개의 레코드 다음에 있는 10개의 레코드를 가져온다.

 

REST 서버 주소와 디렉터리와 파일 전송할 때 사용되는 상태 정보 즉 정보의 위치를 알기 위한 REST API이다.

REST API는 일반적인 API와 다릅니다. 함수를 사용하지도 않고 오직 앱에서 이용되는 데이터 정보이기 때문입니다.

 

RESTFUL의 주소를 설정합니다. DATA -> XML, CSV, JSON들을 사용

 

 

서블릿에서 json에게 데이터를  포맷팅 한 뒤 주는 작업

Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
		
		String json = gson.toJson(list);

 

   XMLHttpRequest : callback 개념의 라이브러리

 

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새 로고 침 없이도 URL로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. XMLHttpRequest는 AJAX 프로그래밍에 주로 사용됩니다.

 

   FetchAPI : promise 개념의 라이브러리

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.  XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능합니다.

 

 

 var xhr = new XMLHttpRequest();

    xhr.open("GET", "list-data", false);  3번째 파라미터는 비동기 옵션입니다.

    xhr.send(null);

String json = gson.toJson(list);

PrintWriter out = response.getWriter();
out.write(json);

데이터를 받아서 gson에 넣어줬다면 출력을 해주어야만 자바스크립트에서 접근할 수 있습니다.

 

 

비동기로 사용할 경우 다른 행동을 하지 못하게 막아야 합니다.

처리 중인 상태를 표시해주어 기다리도록 유도해야 합니다. 최소는 가능하지만 다른 행동을 하면 에러가 발생합니다.

 

행동을 막기 위해 막을 쳐주면 됩니다.

 function delayShield() {
    var shield = document.createElement("div");
    var main = document.querySelector("main");

    main.appendChild(shield);
    main.style.position = "relative";
    shield.style.position = "absolute";
    shield.style.backgroundColor = "black";
    shield.style.width = "100%";
    shield.style.height = "100%";
    shield.style.opacity = "0.5";
    shield.style.left = "0px";
    shield.style.top = "0px";
  }
  ul.addEventListener("click", function (e) {
    e.preventDefault();
    if (e.target.nodeName != "A") return;

    var xhr = new XMLHttpRequest();
    var page = e.target.innerText;

    xhr.open("GET", "list-data?p=" + page, true);

    xhr.onload = function () {
      var notices = JSON.parse(xhr.responseText);
      bind(notices);
    };

    xhr.send(null);

    delayShield();
  });

 

 

로딩화면을 도와주는 사이트를 소개합니다.

http://www.ajaxload.info/

Ajaxload - Ajax loading gif generator

 

append는 appendChild보다 훨신 좋습니다.

child는 노드, 즉 객체를 인자로 넣어주어야합니다.

append는 자동적으로 노드, 객체로 만들어서 넣어줍니다.

append는 인자로 여러개의 노드를 받을 수 있습니다.

 

자신을 삭제하기위해서는 자신.remove()로 지울 수 있으며  자식까지 사라집니다.