Ajax (xml 방식)- 애플리케이션 테스트 수행

 

웹페이지를 만들면 데이터 베이스에 테이블이 많을텐데 여기서 보이는 url 이 a.up 이라고 하자.

웹페이지를 div로 나눈다 했을때 전체. 1.div  2.div 3.div 가 있다라고 하자

우리가 지금까지 div를 읽어올때 하나의 테이블에서 읽어 왔는데

여기서 위에 하나의 div가 각각 다른 테이블이다. 즉 위에 3가지의 div가 각각 다른 테이블이다.

1.div 에는 table1 을 2.div 에는 table2 3.div 에는 table3 인데 이 세가지를 하나의 a.up을 통하여 하나의 웹페이지로 보여주고자 한다.

 

이 방법을 Ajax 라고 한다. 

 

 

동기 - 3가지의 div가 있을때 1,2,3 이라고 하자

         여기서 1에는 데이터가 많고 2는 데이터가 적을때 실행이 되어진다면 1은 데이터가 많기때문에 느릴것이고

         2는 데이터가 적어 빠를텐데 여기서 1이 다 될동안 2는 기다리는 것이다.

 

비동기 - 어느 하나가 기다리지 않고 모두 각자 되어지는 것이다.

 

매번 오라클로 해 왔는데 이제는 XML 로 바꿔어서 해주어야 한다.

 

파견을 나가서 DB를 사용 하는데 나는 oracle만 사용해 왔는데 파견 나간곳은 다른 DB를 사용한다 했을경우

파견나간 회사의 DB관리자는 DB권한을 막아놓은 상태이다.

즉, 내가 select를 하고자 했을때 DB관리자는 DB가 아닌 XML, JSON 로 보여준다.

그러므로 DB가 oracle 이 아닌 다른 종류라 해도 보여주는 것은 XML,JSON 로 바꾸어서 보여주기 때문에 관여치 않아도 된다.

 

XML,JSON 은 select를 해온 결과물이라 보면 된다.

 

순수한 JavaScript 로 사용하면 복잡한데 JQuery를 사용하면 더욱 쉽다.

 

먼저 oracle 에서 테이블을 만들자

 

위에 3가지의 table 을 보여줄때 XML형태로 바꾸어서 보여주어야 한다.

 

먼저 DAO를 하나 만들어야 한다.

model 패키지를 하나 만들었다.

먼저 3가지의 테이블에 대한 DAO를 만들어 놓는다.

[ TodayNewsTitleVO ]

 

 

[ AjaxDAO.java - 참고 ]

먼저 DBCP 가 필요하다. - member.model.MemberVO 에서 DBCP 부분만 카피해 온다.

후 메소드의 오버라이딩 하여 3가지의 메소드를 작성해 주어야 한다.

만든후 결과물을 XML로 바꾸어 줄것이다.

 

 

참고로 기사 제목같은 경우 길이가 다 다르지만 사이즈를 맞추어주어서 길면 ... 으로 나와주게 한다.

또한 기사입력 날짜에 년,월,일 시,분,초 까지 나오게 한다.

참고

계속해서 기사 DAO를 작성한다 - 참고.

 

AjaxDAO.java 에 작성할 메소들이 모두 완료가 되었다면  이제 결과물을 XML로 보여주어야 한다.

 

/ajaxstudy/xmltestMain.up 으로 간다.

[ main.jsp ]

 

jQuery 가 정상작동 되는지 alert로 확인한다.

정상으로 jQuery 가 작동된다.

이렇게 3가지 div에서 각각 다른 table을 보여줄 것이다.

 

ajax 문법이다.

위에 url은 DB에 들어가서 광고image테이블을 xml 형태로 바꾸어 주는 역할만 할것이다.

 

[ XmltestImageAction.java ]

여기서 중요하다! next -> New JSP File (xhtml) 로 잡아주어야 한다.

위에처럼 만든후 시작한다.!!!

페이지 소스 보기

현재 결과물은 위에처럼 나온다.

 

현재 소스보기에서 안해도 상관은 없지만 공백을 지워줘 보자.

 

이제 ajax로 넘어 간다.

 

여기가 화면을 합치는 곳이다

 console 에 먼저 나오는지 확인을 해본다.

위에 까지 나오는지 안나오는지 한번 확인한다.

 

 

 

부트스트렙 을 이용 해본다.

 

newsTitleList 를 보여주도록 한다.