ajax(Asynchronous JAvascripte XML)

• 자바스크립트를 이요해서 비동기적으로 데이터를 받아오는 기술
• 전체 화면을 갱신하지 않고 데이터를 받아서 일부분만 갱신하는 용도로 많이 사용
  • 아이디 중복 체크, 댓글을 작성하고 전체화면 갱신없이 댓글이 업데이트

실습 - ajax 로 item2.json 이 리턴한 데이터를 받아서 화면에 출력

1. home.jsp 파일에 ajax 요청을할 링크 추가

    <a href="#" id="ajax">ajax로 json 데이터 사용하기 </a><br/>

2.home.jsp 파일에 데이터를 출력할 영역을 생성

<div align='center' id="disp"></div>

3..home.jsp 파일에 id가 ajax인 링크를 클릭하면 동작하는 스크립트 코드를 추가

<!-- javascript : html 내에서 동적으로 변화를 주기 위한 언어  -->
<script>
    document.getElementById("ajax").addEventListener("click", function(){
        //ajax 객체 만들기 
        request = new XMLHttpRequest();
        //요청 생성 
        request.open('GET', 'item2.json');
        //요청 전송
        request.send('');
        //요청에 대한 처리를 위한 콜백 메소드 등록
        request.onreadystatechange = function() {
            // 정상응답이 오면 
            if(request.readyState == 4 && request.status >= 200 && request.status < 300){
                //받아온 데이터를 json 파싱을해서 배열로만들기
                list = JSON.parse(request.responseText);
                //배열을 순회 - 제목
                msg  = '';
                msg += "<table border='1'>";
                msg += "<tr class='header'>";
                msg += "<th width='80'>코드</th>";
                msg += "<th width='160'>상품명</th>";
                msg += "<th width='80'>가격</th>";
                msg += "</tr>";
                for(i in list) {
                    // 내용 
                    msg += "<tr class='record'>";
                    msg += "<td align='center'>" + list[i].itemid + "</td>"
                    msg += "<td align='left'>" + list[i].itemname + "</td>"
                    msg += "<td align='right'>" + list[i].price + "</td>"
                    msg += "</tr>";
                }
                msg +="</table>";
                document.getElementById("disp").innerHTML = msg; 
            }
        }
    })
</script>
</html>

XML 출력

• XML(eXtensible Markup Language) : 데이터를 태그를 이용해서 표현하는 방식
  • XML은 브라우저가 해석하지 않고 개발자 또는 DTO 설정에서 해석하는 마크업 언어
• 예전에 실시간 데이터 전송에 많이 사용했고 프로젝트 설정 파일로 사용된다.
  • twitter 등이 예전에는 XML 서비스를 제공했지만 최근에는 json으로 많이 변경되고 있다.
• 서버 개잘자가 아니라면 XML은 생성보다는 파싱이 중요합니다.
• spring-oxm, jaxb-api, jaxb-impl, jaxb-core 라이브러리가 필요
• 출력은 MarchallingView를 이용
• RPC(Remot Procedure Call - 원격 프로시저 호출)를 닷넷 계열에서는 Mashalling 이라고 합니다.
  • 웹 서버나 클라우드 사용하는 것이 RPC 입니다.
  • http://211.183.6.60:9000/db 를 브라우저에 입력하면 입력된 컴퓨터에 있는 어떤 메소드가 호출되서 작업을 한 후 결과를 브라우저에 전송합니다.
  • 이러한 기술을 RPC 라고 하는데 Spring이 중간 통신 작업을 다 해주기 때문에 RPC를 어떻게 만들어야 하는지 몰라도 구현이 가능함니다.

• Item의 List를 XML로 출력

  1.XML 관련 의존성을 pom.xml 파일의 dependercis 추가

        <!-- xml 출력을 위한 라이브러리  -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-oxm</artifactId>
            <version>${org.springframework-version}</version>
        </dependency>
        <dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.1</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-impl</artifactId>
            <version>2.2.11</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-core</artifactId>
            <version>2.2.11</version>
        </dependency>

2.home.jsp 파일에 xml 요청을 생성

    <a href="item.xml">XML로 내려받기 </a><br/>

3.Item 클래스를 XML형식으로 출력할 수 있도록 어노테이션을 추가

@Data
@XmlAccessorType(XmlAccessType.FIELD)
//출력할 태그와 순서를 설정 
@XmlType(name="", propOrder = {"itemid", "itemname", "price", "description", "pictureurl"})
public class Item {

    private int itemid;
    private String itemname;
    private int price;
    private String description;
    private String pictureurl;

}

4.XML은 DTO만을 출력할 수 없어서 DTO 의 List를 property로 갖는 클래스가 필요합니다.

• Item의 List를 property로 갖는 클래스를 생성
  • com.gmail.hiwony7933.domain.ItemReport

@XmlAccessorType(XmlAccessType.FIELD)

// 루트 태그 설정
@XmlRootElement(name="itemlist")
public class ItemReport {

    // 객체 1개마다 출력되는 태그 설정  
    @XmlElement(name="item")
    private List<Item> list;

    public List<Item> getList() {
        return list;
    }

    public void setList(List<Item> list) {
        this.list = list;
    }
}

5.HimeController 클래스에 item.xml 요청을 처리하는 메소드 생성

@RequestMapping(value="/item.xml", method=RequestMethod.GET)
    public String xml(HttpServletRequest request, Model model ) {
        //서비스 메소드 호출 
        List<Item> list = itemService.allItem(request);
        //xml 출력 데이터 생성
        ItemReport itemReport = new ItemReport();
        itemReport.setList(list);

        //데이터저장 
        model.addAttribute("list", itemReport);
        //뷰이름을 리턴 
        return "xmlreport";
    }

6.servlet-context.xml 파일에 xml 출력을 위한 설정을 추가

    <!--  XML 출력을 위한 클래스  설정  -->
    <beans:bean class = "org.springframework.oxm.jaxb.Jaxb2Marshaller" id="marshaller">
        <beans:property name="classesToBeBound">
            <beans:list>
                <beans:value>com.gmail.hiwony7933.domain.ItemReport</beans:value>
            </beans:list>
        </beans:property>
    </beans:bean>

    <!--  XML 뷰 설정  -->
    <!--  id는 Controller가 리턴한 View 이름이고 
    ModeKey에 설정하는 것은 model에 저장한 데이터이름입니다. -->
    <beans:bean id="xmlreport" class="org.springframework.web.servlet.view.xml.MarshallingView">
        <beans:property name="marshaller" ref="marshaller"/>
        <beans:property name="modelKey" value="list"/>
    </beans:bean>