DB를 이용한 data 등록 및 변경 #02

아래에 있는 코드를 jQuery와 비슷하게 변환하여 app.js에 있는 내용들을 많이 간추리고 bit.js 파일을 일종의 library와 같이 사용하게 된 코드가 되겠다. jQuery와 비슷하게 엘리먼트를 찾아서 특별한 가공을 통해서 함수를 붙일 수 있도록 만들어 주었다. 후에 학습할 jQuery를 이해하고 혹은 제작하는 것이 가능하도록 연습하는 시간이 될 수 있다.

---

app.js

window.onload = function() {
loadMemberList();
clearMemberList();
clearForm();

$('#btnAdd').click(function() {
try {
validateForm();
addMember();
} catch (err) {
alert(err);
}
});
$('#btnCancel').click(function() {
$('.editMode').css('display', 'none');
$('.newMode').css('display', '');
});
$('#btnUpdate').click(function() {
updateMember();
});
$('#btnDelete').click(function() {
deleteMember($('#no').val());
});

//console.log(e);



};

function validateForm() {
var pass1 = $('#pass1').val();
var pass2 = $('#pass2').val();
if (pass1 != pass2) {
throw '암호가 일치하지 않습니다!';
}
var name = $('#name').val();
var email = $('#email').val();
if (name == '' || email == '') {
throw '이름과 이메일은 필수 입력 항목입니다!';
}
}

function loadMemberList() {
$.ajax('http://localhost:8080/web02/member/ajax/list.do', {
method: 'GET',
success: function(members){
var memberTable = $("#memberTable");
clearMemberList();
var tr = null, td = null, a = null;
members.forEach(function(member){
tr = document.createElement('tr');
tr.setAttribute('class', 'dataRow');
[member.no,
member.name,
member.email,
member.tel].forEach(function(value,index,arr){
td = document.createElement('td');
if (index == 1) {
td.innerHTML = '<a href="#"' +
' onclick="readMember(' + arr[0] +
'); return false;">' +
value + '</a>';
} else {
td.innerHTML = value;
}
tr.appendChild(td);
});
td = document.createElement('td');
a = document.createElement('a');
a.href = '#';
a.onclick = function(event) {
deleteMember(member.no);
event.preventDefault();
};
a.innerHTML = '삭제';
td.appendChild(a);
tr.appendChild(td);

memberTable.append(tr);
});
},
error: function(msg){
alert('회원 정보를 읽을 수 없습니다!');
console.log(msg);
}
});
}

function clearMemberList() {
$('.dataRow').remove();
}

function addMember() {
$.ajax('http://localhost:8080/web02/member/ajax/add.do', {
method: 'POST',
data: {
name: encodeURIComponent($('#name').val()),
email: encodeURIComponent($('#email').val()),
password: $('#pass1').val(),
tel: encodeURIComponent($('#tel').val()),
age: $('#age').val()
},
success: function(result){
loadMemberList();
clearForm();
},
error: function(msg){
alert('회원 등록 실패!');
console.log(msg);
}
});
}

function clearForm() {
$('#btnCancel').dispatchEvent('click');
}

function deleteMember(no) {
$.ajax('http://localhost:8080/web02/member/ajax/delete.do?no=' + no, {
method: 'GET',
success: function(result){
loadMemberList();
clearForm();
},
error: function(msg){
alert('회원 삭제 실패!');
console.log(msg);
}
});
}

function readMember(no) {
$.ajax('http://localhost:8080/web02/member/ajax/read.do?no=' + no, {
method: 'GET',
success: function(result){
$('#no').val(result.no);
$('#name').val(result.name);
$('#email').val(result.email);
$('#tel').val(result.tel);
$('#age').val(result.age);

$('.editMode').css('display', '');
$('.newMode').css('display', 'none');
},
error: function(msg){
alert('해당 멤버 정보를 읽을 수 없습니다!');
console.log(msg);
}
});
}

function updateMember() {
$.ajax('http://localhost:8080/web02/member/ajax/update.do', {
method: 'POST',
data: {
no: $('#no').val(),
name: encodeURIComponent($('#name').val()),
email: encodeURIComponent($('#email').val()),
tel: encodeURIComponent($('#tel').val()),
age: $('#age').val()
},
success: function(result){
loadMemberList();
clearForm();
},
error: function(msg){
alert('회원 변경 실패!');
console.log(msg);
}
});
}

---

bit.js

function bit(selector) { //
  var elements = document.querySelectorAll(selector);
  elements.click = function(listener){
for (var i=0; i <this.length; i++){
this[i].onclick = listener;
}
  };
  elements.css = function(name, value){
 for (var i=0; i <this.length; i++){
this[i].style[name] = value;
 }
  };
  elements.append = function(child){
 for (var i=0; i <this.length; i++){
this[i].appendChild(child);
 }
  };
  elements.remove = function(){
 for (var i=0; i <this.length; i++){
this[i].parentNode.removeChild(this[i]);
 }
  };
  elements.dispatchEvent = function(eventType){
 if (eventType=='click'){
 event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
 });
 }else{
 return;
 }
 for (var i=0; i <this.length; i++){
 this[i].dispatchEvent(event);
 }
  };
  elements.val = function(value){
 if(arguments.length==0){
 return this[0].value;
 }else{
 for (var i=0; i <this.length; i++){
 this[i].value = value;
 }
 }
  };
  return elements;
}

/* AJAX 기능 수행
 * url : 서비스를 가리키는 URL. string
 * options: AJAX 요청시 필요한 값을 담은 객체.
 *    data - 원격 함수에 전달할 데이터
 *    success - 원격 함수의 호출이 성공적으로 끝났을 때 호출될 메서드
 *    error - 원격 함수의 호출이 실패 했을 때 호출될 메서드
 *    method - 원격 함수 호출 방법(요청 방식: GET, POST)
 */
bit.ajax = function(url, options) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = JSON.parse(xhr.responseText).jsonResult;
if (result.resultStatus == 0) { //원격 함수 호출 성공!
if (options.success) options.success(result.data);
} else { // 원격 함수 호출 실패!
if (options.error) options.error(result.error);
}
}
};
xhr.open(options.method, url, true);
if (options.method == 'GET') {
xhr.send(null);
} else { // POST
var queryString = '';
for (var key in options.data) {
if (queryString.length > 0) queryString += '&';
queryString += key + '=' + options.data[key];
}
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(queryString);
}
};

var $ = bit;