교육과정 기록/jQuery
Ajax 시작
춘식이왔엉
2022. 7. 4. 21:47
Ajax를 테스트하려면 웹 서버(Web Server) 필요
Apache Tomcat 9
(1) Web Server = 파일서비스
(2) WAS (Web Application Server)
- 기존에 scoop으로 설치해놓은 Tomcat 파워쉘로 실행
Ajax 관련 메서드
(제이쿼리 entry point 없이도 실행 가능)
- $.ajax() 메서드
$.ajax({
// 1. 데이터 전송 및 요청할 외부 주소를 입력
url: "전송 페이지"(action url),
// 2. 전송 방식을 입력
type: "전송 방식"(get, post 방식),
// 3. 전송할 데이터 입력
data: "전송할 데이터",
// 4. 서버로부터 받아올 데이터 형식을 지정
dataType: "요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
// 5. 데이터 전송 및 요청이 정상적으로 이뤄지면 함수가 실행됨.
// 이때 매개변수(result)에는 요청한 데이터가 저장됨
success: function(data){
전송에 성공하면 | 실행될 코드;
},
error: function() {
전송에 실패하면 실행될 코드;
}
}); // .ajax
* Ajax로 JSON 데이터 바인딩하기
- mockaroo 사이트에서 가상 데이터 준비
<script>
$(() => {
$.ajax({ // jQuery 라이브러리의 AJAx 핵심구현 메소드
// 1. 로컬/원격 요청 URL 지정
url: "json/MOCK_DATA.json",
// 2. 요청한 문서의 타입(유형) 지정
dataType: "json",
// 3. 비동기 요청에 대한 응답이 성공적으로 왔을 때,
// 자동으로 callback 되는 메소드
success: function (data) { // callback if succeeded
// console.clear(), console.group('success');
// console.log(data);
// console.groupEnd();
// JSON Binding into DOM tree.
if (data.length > 0) {
var tb = $("<table>"); // 새로운 태그 생성
for (var i in data) {
var id = data[i].id;
var first_name = data[i].first_name;
var last_name = data[i].last_name;
var email = data[i].email;
var gender = data[i].gender;
let row = $("<tr>").
append(
$("<td>").text(id),
$("<td>").text(first_name),
$("<td>").text(last_name),
$("<td>").text(email),
$("<td>").text(gender)
); //.append
tb.append(row);
} // enhanced for-in
$(".wrap").append(tb);
}
}, //success
// 4. 비동기 요청에 대한 응답이 에러로 왔을 때,
// 자동으로 callback 되는 메소드
error: function (XHR) { // callback if failed
console.group('error');
console.log('$.ajax::error() invoked.');
console.log('\t+ XHR', XHR); // XmlHttpRequest (내장)객체 - 비동기호출의 근간
console.log('\t+ readyState:', XHR.readyState); // XHR의 상태코드값 출력
console.log('\t', XHR.status); // XHR의 상태메시지 출력
console.log('\t', XHR.statusText); // Ditto.
// console.log('\t', XHR.statusCode()); // 웹서버의 응답 상태코드
console.groupEnd();
}//error
}); // ajax
}); // jq
</script>
* Ajax로 XML 데이터 바인딩하기
<script>
$(() => {
$.ajax({ // jQuery 라이브러리의 AJAx 핵심구현 메소드
// 1. 로컬/원격 요청 URL 지정
url: "http://localhost:8080/temp/persons.xml",
// 2. 요청한 문서의 타입(유형) 지정
type: "post",
data: "name=Eunhye&age=28",
dataType: "xml",
// XML 문서를 바인딩
success: function (data) { // callback if succeeded
console.clear(), console.group('success');
// console.log(data);
// 받아온 XML 문서에서, <person> 태그를 모두 찾아라!
let persons = $(data).find("person"); // 결과타입은? jQuery: Array-Like Object
if (persons.length > 0) { // 1개 이상의 요소가 있다면,
let tb = $("<table>"); // 새로운 태그 생성
// jQuery 배열객체의 모든 원소를 순회하는 제이쿼리 메소드
$.each(persons, function (i, person) {
console.log(`i: ${i}, person:`, person);
// 각 학생의 정보항목들의 값을 획득
let id = $(person).find("id").text(); // <id>태그를 찾아서
let first_name = $(person).find("first_name").text();
let last_name = $(person).find("last_name").text();
let email = $(person).find("email").text();
let gender = $(person).find("gender").text();
let row = $("<tr>").
append(
$("<td>").text(id),
$("<td>").text(first_name),
$("<td>").text(last_name),
$("<td>").text(email),
$("<td>").text(gender)
); //.append : 하나의 <tr>태그가 완성
// 위에서 완성시킨 <tr>태그를 <table> 태그의 하위노드로 추가
tb.append(row);
}); // $.each
$(".wrap").append(tb);
}// if
}, //success
// 4. 비동기 요청에 대한 응답이 에러로 왔을 때,
// 자동으로 callback 되는 메소드
error: function (XHR) { // callback if failed
console.group('error');
console.log('\t+ XHR', XHR); // XmlHttpRequest (내장)객체 - 비동기호출의 근간
console.log('\t+ readyState:', XHR.readyState); // XHR의 상태코드값 출력
console.log('\t', XHR.status); // XHR의 상태메시지 출력
console.log('\t', XHR.statusText); // Ditto.
// console.log('\t', XHR.statusCode()); // 웹서버의 응답 상태코드
console.groupEnd();
}//error
}); // ajax
}); // jq
</script>
* ajax 의 local lifecycle method's callback order
(1) beforeSend
(2) dataFilter (if succeed)
(3) success (if succeed)
(3) error (if failed)
(4) complete