학원 26일차 복습(4/18)

이론

동기식: HTTPRequest 모든 코드 전송

비동기식: XML_HTTPRequest 필요한 코드만 전송,callback***

자바스크립트 이벤트가 트리거

Ajax를 이용한 웹 접근 방법

 - 요청 / 응답 방식 동일

 - 응답은 자바스크립트의 HttpRequest객체가 받음

 - 사용자는 하나의 페이지에서 다른일을 계속 수행할 수 있음

 - 응답이 오면 자바스크립트의 함수를 통해 일을 수행

 - 하나의 페이지에서 여러 가지 데이터를 서버로부터 실시간으로 갱신 가능

 - 페이지리로딩없이 계속 서버와 통신 가능

■ Ajax의 장점

 - 서버 처리를 기다리지 않고, 비동기 요청이 가능

 - 수신하는 데이터의 양을 줄일 수 있음

 - 서버의 부하를 줄이고, 성능좋은 클라이언트를 사용함

■ Ajax의 단점

 - 페이지 이동없는 통신으로 인한 보안상의 문제

 - 클라이언스크립트로 작성되므로 Debugging이 용이하지 않음

 (WISWIG를 지원하는 통합개발툴(IDE)이 없음)

html에서 name 과 id

name: action에 해당하는 페이지로 전달하는 파라미터

id: javascript에서 다룰려고 지정

브라우저별 XMLHttpRequest 객체를 저장할 전역변수

서버로부터 결과가 도착할 때 수행하는 함수 지정 (콜백함수)

실습

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>spring0418_js</groupId> <artifactId>spring0418_js</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <build> <sourceDirectory>src</sourceDirectory> <plugins> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.7.0</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>3.0.0</version> <configuration> <warSourceDirectory>WebContent</warSourceDirectory> </configuration> </plugin> </plugins> </build> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.3.6.RELEASE</version> </dependency> <!-- spring-jdbc for MyBatis --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>4.3.6.RELEASE</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.2</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.1</version> </dependency> <!-- Web MVC --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>4.3.6.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.3.6.RELEASE</version> </dependency> <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <!-- Aop관련 --> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.8.10</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.8.6</version> </dependency> </dependencies> </project>

web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>spring0418_js</display-name> <!-- Filter --> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>EUC-KR</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <servlet> <servlet-name>kosta</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>kosta</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>

kosta-servlet.xml

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <context:component-scan base-package="or.kosta.mvc"/> <mvc:annotation-driven/> <mvc:resources location="/resources/" mapping="/resources/**"/> <!-- dataSource setting --> <bean id="dataSource" class="org.springframework.jndi.JndiObjectFactoryBean"> <property name="jndiName" value="java:comp/env/jdbc/myoracle"></property> </bean> <!-- MyBatis config,mapper setting --> <bean id="factoryBean" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource"/> <property name="configLocation" value="classpath:or/kosta/config/config.xml"/> <property name="mapperLocations" value="classpath*:or/kosta/mapper/*.xml"/> </bean> <!-- MyBatis Template configure --> <bean id="ss" class="org.mybatis.spring.SqlSessionTemplate"> <constructor-arg ref="factoryBean"/> </bean> <!-- multipartResolver 추가 : 파일 업로드를 하기 위해서 꼭 필요한 객체 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> </beans>

or.kosta.config/config.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <typeAliases> <typeAlias type="or.kosta.vo.MemberVO" alias="mvo" /> </typeAliases> </configuration>

or.kosta.mapper/member.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="member"> <insert id="add" parameterType="mvo"> insert into member2 values(member2_seq.nextVal,#{id},#{pwd},#{name},sysdate) </insert> <select id="check" resultType="int" parameterType="String"> select count(*) cnt from member2 where id=#{id} </select> </mapper>

or.kosta.Controller/DefaultController.java

package or.kosta.mvc.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class DefaultController { //기본 페이지 설정 @RequestMapping(value= {"/index","/"}) public String defaultPage() { System.out.println("test"); return "index"; } @RequestMapping(value="/myindex") public String myDefaultView() { return "index"; } }

or.kosta.Controller/javaScript01Controller.java

package or.kosta.mvc.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import or.kosta.mvc.dao.MemberDao; import or.kosta.vo.MemberVO; @Controller public class JavaScript01Controller { @Autowired private MemberDao memberDao; @RequestMapping(value = "/form") public String form() { return "form"; } @RequestMapping(value="/memberProcess") public String memberProcess(String id, Model m) { StringBuffer out = new StringBuffer(); System.out.println(id); int num= memberDao.getCheck(id); System.out.println(num); if(num==0) { out.append("사용가능한아이디입니다."); }else { out.append("중복된 아이디입니다."); } m.addAttribute("msg",out.toString()); return "ex8_ajaxData"; } @GetMapping("/ex8_ajax") public String ajax() { return "ex8_ajax"; } @RequestMapping(value="/ajaxData1") public String ajaxData(String subject,Model m) { System.out.println("subject :"+subject); StringBuffer out = new StringBuffer(); if(subject.equals("자바")) { out.append("SCJP,SCJD"); }else if(subject.toUpperCase().equals("C")) { out.append("정보처리"); }else if(subject.equals("오라클")) { out.append("OCP"); }else { out.append("준비중입니다."); } m.addAttribute("msg",out.toString()); return "ex8_ajaxData"; } }

or.kosta.dao/MemberDao.java

package or.kosta.mvc.dao; import org.mybatis.spring.SqlSessionTemplate; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import or.kosta.vo.MemberVO; // @Repository public class MemberDao { @Autowired private SqlSessionTemplate ss; public void add(MemberVO mvo) { ss.insert("member.add",mvo); } public int getCheck(String id) { return ss.selectOne("member.check",id); } }

or.kosta.vo/MemberVO.java

package or.kosta.vo; public class MemberVO { private int num; private String id,pwd,name,mdate; public int getNum() { return num; } public void setNum(int num) { this.num = num; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getPwd() { return pwd; } public void setPwd(String pwd) { this.pwd = pwd; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getMdate() { return mdate; } public void setMdate(String mdate) { this.mdate = mdate; } }

ex8_ajax.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>Insert title here</title> <script type="text/javascript"> var xhr; //브라우저별 XMLHttpRequest 객체를 저장할 전역변수 function test(){ var param = document.getElementById("subject").value; // var s = subject.value; // s = "subject="+s; // var param = "subject="+encodeURIComponent(s); //현재 브라우져에 따라 XMLHttpRequest,또는 XMLHTTP를 구별하여 생성한다. if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xhr = new XMLHttpRequest(); } //서버로부터 결과가 도착할 때 수행하는 함수 지정 (콜백함수) xhr.onreadystatechange = res; //서버에게 호출하기 위한 준비 xhr.open("GET","ajaxData1?subject="+param, true);//전송방식,주소,비동기식(true),동기식(false) // xhr.open("post","test1.jsp"); // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //서버에게 요청보내기 xhr.send(null); //우린 get방식으로 보내기로 했기 때문에 인자는 반드시 null을 이어야한다. //post라면 null이 아니라, 보내고자 하는 파라미터를 문자열로 넣어야 한다. // xhr.send(s); } //서버로부터 전달되는 결과가 도착하는 메서드 function res(){ if(xhr.readyState==4){//서버로부터 데이터 처리가 완료된 경우 if(xhr.status==200){//정상적인 처리인 경우 document.getElementById("txt"); txt.innerHTML = xhr.responseText; //alert(xhr.responseText); }else{ alert("실패" + xhr.status); } } } </script> </head> <div style="width: 300px; height: 300px; margin: auto;"> 과목 : <input type="text" name="subject" id="subject"/> <input type="button" value="Ajax테스트" onclick="test()"/> <p>관련시험 : <div id="txt"></div> </div>

ex8_ajaxData.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <%-- ex8_ajaxData.jsp --%> ${msg}