페이징 - AJAX (1)

페이징에 사용된 Ajax, JavaScript 코드를 분석해보자~!

function Common(){
	this.jsonString = function(params) {
		var myJSONText = JSON.stringify(params, function replacer(key, value) {			
			if (typeof value === 'number' && !isFinite(value)) {		
				return String(value);		
			}		
			return value;
		});
		return myJSONText;
	}
	
	this.getJSON = function(url, method, parameters, successFunc, errorFunc) {
		var ithis = this;
        
		$.ajax({
			type: method,
			url: url,
			data: parameters, 
			dataType: 'text',
			beforeSend: this.beforeSend,
			success: successFunc,
			error: errorFunc,
			complete: this.onCompleteGetJSON
		});
	};
	
	this.getObjectList = function(url, method, params, successFunc, errorFunc) {
		var ithis = this;
		var po = [];
			po.push(params);
			
	this.getJSON(url, method, 
		po.join("&"),
			function(responseData) {
				//Log(responseData);
				successFunc(responseData);
			}, function(xhr, status, error) {
				
				if(xhr.status==302) {
					
				} else if(xhr.status==401) {
					if(window.authMessage == undefined) {
						window.authMessage = 1;
						common.showMessage("권한이 없습니다. 로그인 해주세요.");
						common.goLoginPage();
					}
				}
			}
		);
	};
}

Common function 생성

   getJSON : Controller로 요청할 Ajax functon 생성

---

function paging(pageNo){
	
var common = new Common();
			
var pageParams = new Object();
	pageParams.pageNo = pageNo;
	pageParams.pageSize = 10;
				
	var po = [];
	po.push("pageParams=" + encodeURIComponent(common.jsonString(pageParams)));			
		
	common.getObjectList("/paging.ajax", "GET", po.join("&"), function(responseData) {
		var resultDatas = jQuery.parseJSON(responseData);				
		var html = "";		
		//var length = resultDatas.items.length;				
		if(resultDatas.items.length != 0){
			for(var i=0; i<resultDatas.items.length; i++){	
				html += '<tr>';
				html += '<td class="board-number">' + resultDatas.items[i].rn + '</td>';
				html += '<td class="board-writer">' + resultDatas.items[i].Fullname + '</td>';
				html += '<td class="board-title">';
				html += '<a href="readPage/' + resultDatas.items[i].idx + '">' + resultDatas.items[i].message + '</a>';
				html += '</td>';
				html += '<td class="board-date">' + resultDatas.items[i].date + '</td>';
				html += '</tr>';	
			}
		}
		$("#boardList").append(html);
		boardPaging(resultDatas.total, dataPerPage, pageCount, pageNo);
	});
}

▼ 아래에 하나씩 정리했습니다.

var common = new Common();

common 에 Common function 생성 및 호출

 

var pageParams = new Object();   
     pageParams.pageNo = pageNo; 
     pageParams.pageSize = 10;

pageParams 객체 생성
pageNo : 페이지 번호를 객체에 담기 (페이지 번호는 pagin function이 호출될 때 정해짐)
pageSize : 페이지 사이즈, 곧 한 페이지에 보여질 리스트 개수(글 갯수)를 객체에 담기

               (고정이기 때문에 직접 지정 가능)

 

var po = [];  
po.push("pageParams=" + encodeURIComponent(common.jsonString(pageParams)));

po 객체 생성

po 객체에 pageParams 객체를 jsonString 형식으로 담기

 

common.getObjectList("/paging.ajax", "GET", po.join("&"), function(responseData) {
	var resultDatas = jQuery.parseJSON(responseData);				
	var html = "";

 

Common function에 있는 getObejctList 호출

Controller로 요청한 URL="/paging.ajax", 요청 방식=GET

function(responseData) Controller로부터 받은 응답을 처리하는 메소드

응답 받은 데이터를 parseJSON으로 변환하여 resultDatas에 담음

빈 문자열인 html 생성

 

if(resultDatas.items.length != 0){
	for(var i=0; i<resultDatas.items.length; i++){

응답받은 객체의 길이(Map, 리스트로 받았기 때문)가 0이 아닐 때,  

응답받은 객체가 null이 아님을 체크하여 0이 아닐때 for문 작동

 

	html += '<tr>';
	html += '<td class="board-number">' + resultDatas.items[i].rn + '</td>';
	html += '<td class="board-writer">' + resultDatas.items[i].Fullname + '</td>';
	html += '<td class="board-title">';
	html += '<a href="readPage/' + resultDatas.items[i].idx + '">' + resultDatas.items[i].message + '</a>';
	html += '</td>';
	html += '<td class="board-date">' + resultDatas.items[i].date + '</td>';
	html += '</tr>';
		}	
	}

빈 문자열인 html에 출력할 리트스 html 양식을 넣어주면 됨

* <table> 태그로 리스트를 작성했기 때문에 html 문자열에 동일하게 <tr><td> 태그 사용

 

$("#boardList").append(html);
	boardPaging(resultDatas.total, dataPerPage, pageCount, pageNo);
});

jsp 혹은 html페이지에서 태그의 id가 boardList인 곳에 해당 html(리스트)를 추가하여 출력

boardPaging 메소드를 호출하며 리스트 페이징 종료

** boardPaging 메소드는 리스트 아래에 페이지를 알려줄 번호를 표시할 메소드입니다.

 

boardPaging 분석하러 가기~