기록하고 기억하는 블로그

자바스크립트 방식 Ajax에 무한스크롤을 구현해본다

    let lastpage = false; //마지막 페이지 설정
    let oneTime = false; //한번만 실행을 보장하는 변수
    let first = true; //맨처음 접속시 실행됨을 보장하는 변수


classScroll();

function classScroll(){
    const screenHeight = screen.height;/* 화면크기 */
            
    if(first&& !oneTime){
    oneTime = true; 
    first =false; 
    addClassLine();//컨텐츠 추가 발동
    }//맨처음 실행   
    
    document.addEventListener('scroll',OnScroll,{passive:true}) // 스크롤 이벤트함수정의
    
    function OnScroll () { //스크롤 이벤트 함수
            
            const fullHeight = infinitebox.clientHeight; // infinite 클래스의 높이   , 스크롤 이벤트 안에서 정의해야 추가된 높이가 다시 계산된다
            const scrollPosition = scrollY; // 스크롤 위치
                    if (fullHeight-screenHeight*1/4 <= scrollPosition && !oneTime && !lastpage && !first) {
                        oneTime = true; // oneTime 변수를 true로 변경해주고,
                        addClassLine();//컨텐츠 추가 발동
                    }
    }
}

function addClassLine(){
	//ajax를 통한 데이터 추가
    
}//컨텐츠 추가 발동

1. XMLHttpRequest 객체 생성

2. 설정 및 데이터 세팅

3. readyState가 변화했을 때 응답을 받고 데이터 처리

//통신에 사용될 XMLHttpRequest 객체 정의
let httpRequest = new XMLHttpRequest();

const 보낼 데이터 = {}


/* Post 방식으로 요청 */
httpRequest.open("POST", 요청할URL입력 , true);

/* Response Type 을 Json으로  */
httpRequest.responseType = "json";

/* 요청 헤더에 컨텐츠 타입 json 명시 */
httpRequest.setRequestHeader("Content-Type", "application/json");

/* 데이더 json으로 변환 후 전송하기 */
httpRequest.send(JSON.stringify(reqJson));


//readyState가 변화했을 때 함수 실행
 httpRequest.onreadystatechange = ()=>{
 	if(httpRequest.readyState === XMLHttpRequest.DONE){
    	//readyState가 Done이고 응답값이 200이면
                    if(httpRequest.status ===200){
                    	//성공
                    }
                    else{
                    	//실패
                    }
        }
 }

JSON이란 

- JavaScript Object Notation (자바스크립트 객체 표현법)

간단한 포맷

{ "K" : V , "K" : V ..}

K는 반드시 문자열 

V는 String Number Boolean Array Object null 가능 ( char 불가 )

서블릿 -> Ajax 로 통신 시 자바의 객체가 Ajax로 제대로 가지 않는 문제가 생길 수 있다.

==> JSON으로 해결

JSON으로 받을 수 있게 이를 쉽게 도와주는 라이브러리 :

GSON

Object를 JSON으로 변환하여 Appendable에 견결된 출력스트림으로 출력하는 메소드

기존 JSON방식으로 변환하기 번거로웠던 List Map 등 모든 객체를 별도의 방법이 아닌

toJson() 메서드 하나로 쉽게 JSON으로 변환해준다.

new Gson().toJson( 객체 , resp.getWriter() ); 로 요청에 응답을 보낸다.

new Gson().toJson(member,resp.getWriter());

Ajax란 ?

-Asynchronous JavaScript and XML

-JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는 통신방식

-데이터 형식은 XML 뿐 아니라 Text, HTML, JSON, CSV등 다양하게 가능하다

-브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기식으로 데이터를 송수신함

동기식 vs 비동기식

-동기식 : 클라이언트가 서버로 데이터를 요청하면 응답이 올 떄 까지 다른 작업은 대기

-비동기식 : 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능

                추후 요청에 대한 응답이 오면 응답에 관련된 작업을 진행

==새로고침 없이 서버에 get요청을 할 수 있다

Ajax 특징

1. 전체 페이지 갱신 없이 일부분 업데이트 가능

2. 사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능

3. ActiveX나 JQuery 방식으로 구현 가능 

4. JavaScript 방식, jQuery 방식으로 구현 가능

단점

-JS이므로 크로스 브라우저 처리 필요

- 연속적 데이터 요청시 서버 부하로 페이지 느려짐

-페이지 내 복잡도 증가로 에러 발생 시 디버깅이 어려움

<사용법>

[JQuery 방식]