🍁jQuery로 개량하여 구현 ajax 메서드 $.ajax(); jQuery 함수를 $로 적고, 바로 .을 찍으면 ajax 메서드가 나타난다. ajax는 태그와 관련된 기능이 아니라 독립적인 자바스크립트 기능이기 때문에 어떤 태그를 넣기가 애매하다. 독립적으로 ajax가 존재하도록 만들어야 하지만, 그냥 ajax();로 만들면 일반적인 함수인지 독립적인 함수인지 알 수 없기 때문에 앞에 jQuery를 붙여서 사용하는 것이다. success 이벤트 ajax 메서드에는 페이지 요청 정보를 작성하며, 안전한 상황에서만 작업을 수행해야 한다. 그리고 onreadystatechange에서 readyState(4) + status(200)인 상황일 때 안전한 상황이라고 했는데, success: function(re..
🍁순수 자바스크립트로 구현 Ajax를 사용해서 서버로 데이터를 요청하고 응답받는 게 가능하다. 이를 구현하기 위해서는 Ajax 객체를 먼저 만들어야 한다. Ajax 객체 생성 const ajax = new XMLHttpRequest(); //서버와 데이터를 송수신(전화기) 서버와 통신하는 Ajax 객체를 생성한다. 이 객체가 전화기의 역할을 하여 서버와 송수신할 수 있게 된다. open, send 메서드 // ajax.open('GET', '서버쪽 프로그램 주소'); ajax.open('GET', '/ajax/ex02.txt'); ajax.send(); ajax에는 open이라는 메서드가 있다. 이때 form 태그의 GET과 open 메서드의 GET은 같다. 서버와 통신을 하기 위해서 GET 방식으로 통..
🍁Ajax Ajax는 비동기 방식으로 자바스크립트를 사용해서 서버와 데이터를 통신하는 기술을 의미하며, XML 형식으로 데이터를 주고받는다. 화면 깜박임 없이 데이터를 주고받을 수 있는 기술이다. 서버 통신 요구사항 구현 프로젝트 생성 Dynamic Web Project: AjaxTest Contextr oot: ajax Generate web.xml deployment descriptor 체크 com.test.ajax 패키지 생성 1. com.test.ajax.controller 패키지 DBUtil.java Ex01.java Ex01Data.java 2. com.test.ajax.repository 패키지 AjaxDAO.java 3. com.test.ajax.model 패키지 WEB-INF 폴더 1. ..
🍁Servlet + JSP Servlet 장점 : 자바 기반으로 자바 코드 용이하다. 단점 : 클라이언트 코드가 불편하다. JSP 장점 : 클라이언트 코드 용이하다. 단점 : 자바 코드가 불편하다. Servlet + JSP 결론 자바코드는 서블릿에 작성하고, 클라이언트 코드는 JSP에 작성한다. 🍁MVC Model MVC 모델은 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. Model 데이터 처리, 오라클 DB처리를 한다. (자바) View 출력담당, HTML페이지 생성한다. (JSP 페이지) Controller 요청부터 응답까지 전체를 관리한다. (서블릿) 🍂JSP Model JSP Model은 일반적으로 MVC모델을 따르며, 그중에서도 애플리케이션의 ..
🍁Todo List 1. 주제 Todo List 2. 업무 할일 쓰기 할일 보기(목록) 할일 수정하기 할일 삭제하기 3. DB Todo (script.sql) 4. 화면(+페이지) 할일 보기(목록) 페이지 (webapp > list.jsp) 할일 쓰기 페이지 (webapp > add.jsp, addok.jsp) 할일 수정 페이지 (webapp > editok.jsp) 할일 삭제 페이지 (webapp > delok.jsp) 템플릿 역할 (webapp > template.jsp) 5. 리소스 조각 페이지 (webapp > inc > header.jsp, asset.jsp) jQuery (webapp > js > jquery-1.12.js) 6. WEB-INF lib > ojdb6.jar 복사 구현 페이지 할..
🍁EL (Expression Language) EL과 JSTL을 사용하면 구문이 단순해지고, 가독성이 향상된다. 이들은 서로 다른 기술이지만, 섞어서 사용한다. 슬로건은 "JSP에서 되도록 자바를 쓰지 말자!"이다. EL 표현식의 사용 ${} Expression()과 EL 언어는 완전히 다른 것이지만, 이름이 같다는 점에서 목적이 같다는 것을 알 수 있다. EL 언어는 기능을 대신하기 위해서 만들어진 언어이다. EL 표현식 a: b: c: EL a: ${a} b: ${b} c: ${c} 기존에 사용하던 표현식을 EL을 사용하여 바꿀 수 있다. 그런데 어떤 건 출력이 되고 어떤 건 출력이 안 된다. 왜 그런 걸까? EL의 목적 EL은 내장 객체(pageContext, request, session, app..
🍁생명주기 내장 객체에 저장소를 제공하는데, pageContext, request, session, application 중에 어떤 것을 사용해야 하는지 의문이 생길 수 있다. 이때 내장 객체의 생명주기를 고려하면 된다. 내가 저장하고 사용할 데이터를 어느 기간 동안 사용할지에 대해 결정하고, 내장 객체가 어느 기간 동안 객체가 유지되는지에 대한 생명주기를 고려하여 일치하는 것을 찾는다. ex19_scope_1: 데이터 입력 페이지 ex19_scope_2: 데이터 수신 및 처리 페이지 각 방법으로 데이터를 전달하는 과정을 살펴보면서 내장 객체의 생명주기에 대해 알아보도록 하자. ex19_scope_1 실패 int a = 10; /* 자바로 페이지 이동 */ //response.sendRedirect("e..
🍁이미지 뷰어 ex18.jsp: 이미지를 목록보기로 보여주는 뷰어 역할(메인, 목록 보기) ex18_ok.jsp: 이미지 업로드 처리 ex18_del.jsp: 이미지 삭제 처리 webapp에 "pic" 폴더를 생성했다. ex18.jsp o2.getName().compareTo(o1.getName())); %> Image Viewer × 이미지 ex18_ok.jsp ex18_del.jsp 더보기
