kh day 068
이번 주 공지사항
내일 능력단위 평가시험 (요구사항확인)
이번 주 훈련방향
가. UI구현기술의 마지막인 제이쿼리 기반의 Ajax 종료 (Front-end 끝)
나. Back-end 개발을 위한 선행요소 기술의 훈련
1) Apache Maven
2) JDBC API & Driver Spy
3) Eclipse에서 Apache Maven 기반의 Java Application 개발을 위한 프로젝트 생성방법 학습
4 )Eclipse에서 Apache Maven 기반의 Web Application 개발을 위한 프로젝트 생성방법 학습
다. Back-end 개발의 표준 기술은 Servlet/JSP 시작
- Servlet 시작으로 JSP 끝
- Model2 Architecture인 MVC 모델에 대해 숙지
---
**Apache Tomcat 실행
파워쉘
cd C:\app\scoop\apps\tomcat9\current\webapps\ROOT
or cd $env:catalina_base > bin
catalina run
브라우저에서 localhost:8080 접속
*** net cat 실행
파워쉘
nc -l -p 8080
끊을 때는 ctrl + c
---
Ajax
Asynchronous Javascript And Xml
클라이언트 : 서버에 서비스를 요청하는 프로그램
서버 : 클라이언트의 요청을 수락하여 처리하고, 응답을 하는 프로그램
---
Ajax 관련 메서드
jquery_ajax_1 - load()
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$("#newsWrap_1").load("ttt.html #news_1"); // ttt.html의 #news_1 태그를 불러와라
$("#newsWrap_2").load("ttt.html #news_2"); // ttt.html의 #news_2 태그를 불러와라
});
// jquery_ajax_news. html
</script>
</head>
<body>
<h1>LOAD 1</h1>
<div id="newsWrap_1"></div>
<h1>LOAD 2</h1>
<div id="newsWrap_2"></div>
</body>
ttt.html
<body>
<p id="news_1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quis tenetur consectetur nobis blanditiis possimus exercitationem, ipsa repellendus dignissimos odit beatae, laudantium, magnam porro atque natus? Eum saepe nostrum facere!</p>
<p id="news_2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae ea consectetur necessitatibus, consequatur, tenetur quo cupiditate nulla neque optio quidem consequuntur at vel aspernatur adipisci voluptates exercitationem velit facilis maxime vero ducimus modi libero aliquid minima ullam. Expedita veritatis architecto enim obcaecati magnam. Saepe, repellat. Quod nobis vitae maiores voluptatibus?</p>
</body>
---
**mockaroo (가상 데이터 제공 사이트)
다운로드 후 html 파일이 들어있는 폴더에 넣어주자
---
$.ajax()
jquery_ajax_2 - $.ajax()
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$.ajax({ // jQuery 라이브러리의 Ajax 핵심구현 메소드
// 1. 로컬/원격 요청 URL 지정
url: "json/MOCK_DATA.json", // 성공
// url: "json/MOCK_DATA2.json", // 실패
// 2. 요청한 문서의 타입 지정
dataType: "json",
// 3. 비동기 요청에 대한 응답이 성공적으로 왔을 때,
// 자동으로 callback 되는 메소드
success: function (data) { // data는 MOCK_DATA.json이 참조됨
console.clear();
console.group('sucess');
console.log(data);
console.groupEnd();
}, // success
// 3. 비동기 요청에 대한 응답이 에러로 왔을 때,
// 자동으로 callback 되는 메소드
error: function (XHR) {
console.group('error');
console.log('$.ajax::error() invoked');
console.log('\t XHR:', XHR); // XmlHttpRequest 객체
console.groupEnd();
} // error
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
교재에 나와있는 원본 예제파일을 다시 한번 봐보자!
---
Json 말고 XML 방식으로 해보자
다운로드 후 html 파일이 들어있는 폴더에 넣어주자
jquery_ajax_3 - $.ajax()
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function () {
$.ajax({
url: "xml/persons.xml",
dataType: "xml",
success: function (data) {
console.clear();
console.group('sucess');
console.log(data);
console.groupEnd();
}, // sucess
error: function (XHR) {
console.group('error');
console.log('$.ajax::error() invoked');
console.log('\t XHR:', XHR); // XmlHttpRequest 객체
console.groupEnd();
} // error
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
---
'국비학원' 카테고리의 다른 글
| [국비지원] KH 정보교육원 75일차 (0) | 2022.07.14 |
|---|---|
| [국비지원] KH 정보교육원 69-74일차 (0) | 2022.07.13 |
| [국비지원] KH 정보교육원 67일차 (0) | 2022.07.01 |
| [국비지원] KH 정보교육원 66일차 (0) | 2022.07.01 |
| [국비지원] KH 정보교육원 65일차 (0) | 2022.06.30 |
