@ResponseBody Annotation을 사용하게 되면

Controller에서 return "json결과"; 하는 경우

json으로 "json결과" 라는 String 을 받게된다.

 

Y/N 식의 단발성 DATA라면 관계 없지만

여러개의 결과값을 받고자 한다면

Map식의 결과를 받는 것이 좋다.

 

이럴 때 사용할 수 있는 방법이다.

 

 

* xxHTML.jsp 의 경우

 

$.ajax( {
    type : "post",
    url : "/xxProc.do",
    data : $("#formid").serialize(),
    dataType : "json",
    success : function( data ) {
        if( "Y" == data.result ) {
            alert( data.message );
        }
    }
} );

 

* xxController.java 의 경우

 

@Controller
public class xxController {

   @RequestMapping( value = "/xxProc.do" )
   public ModelAndView xxProc( xxVO xxxVO, ModelMap model ) throws Exception {
      model.put( "result", "Y" );

      model.put( "message", "OK" );

   return new ModelAndView( "jsonV", model );

}

 

 

이렇게 처리하기 위해 기본 설정이 필요하다.

 

* web.xml

  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/config/dispatcher-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

 

* dispatcher-servlet.xml

<bean id="beanNameResolver" class="org.springframework.web.servlet.view.BeanNameViewResolver" p:order="0" />

<bean id="jsonV" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView">

   <property name="contentType" value="application/json;charset=UTF-8"></property>

</bean>

 

* pom.xml

  <dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
   <version>2.5.1</version>
  </dependency>

 

  1. 익명 2017.01.03 21:25

    비밀댓글입니다

    • 행이™ 2017.01.09 18:57 신고

      원래 $.ajax를 쓰면 안움직이긴한데요.
      정상적으로 호출이 되었는지는
      호출하려는 해당 method에 print를 쓰셔서 확인하시거나
      명확하게 return을 받은 값을 alert 해보심이 정확하겠죠?

  2. 알 수 없는 사용자 2017.06.06 22:04

    고맙습니다.

Struts.xml에

json으로 응답받을 Action.method에 result값으로 json을 처리할 type을 기술하고

화면에서 받을 이름을 기술했는데도 정상적으로 값이 읽혀지지 않을 때는

방황하지 말고, 당황하지 말고, 삽질하지 말고

해당 Action에 get/set method를 생성해주어야

화면에서 정상적으로 값을 읽을 수 있다.

 

화면에서 읽을 수 있도록

HttpServletRequest request =  ServletActionContext.getRequest();
request.setAttribute("json값", json값);

요롷게 해줘도 읽혀지지 않는다.

${json값.Key1} 요롷게는 읽혀져도...

 

- Struts.xml

<result-type name="json처리" class="json처리Class">
     <param name="encoding">UTF-8</param>
     <param name="contentType">text/html</param>
     <param name="contentType">application/json</param>
</result-type>

 

<action name="getJsonValue" class="Action" method="jsonMethod">
     <result name="success" type="json처리"><param name="value">json값</param></result>
</action>

 

- Action.java

private Map<String, Object> json값;

 

public String jsonMethod() {

    json값 = 블라블라;

    return SUCCESS;

}

 

public Map<String, Object> getJson값() {
     return json값;
}
public void setJson값(Map<String, Object> json값) {
     this.json값 = json값;
}

 

 

- 화면.jsp

$.ajax({
    type:'POST',
    url : "/getJsonValue.do",
    data :  { "param1" : param1 },
    success : function( json ) {
        var json값 = eval( json );
        alert( json값.Key1 );
    }
});

 

'plming > Java - Struts' 카테고리의 다른 글

404 페이지 대신 Struts Problem Report 나올 때  (0) 2015.07.27
Struts - ajax/json  (0) 2015.05.20
Struts2 - Login 처리  (0) 2015.05.20

Ajax 요청의 생성과 관련된 jQuery의 모든 함수와 커맨드는 이 함수를 사용하여 요청을 전송

 

$.ajax( options=Object )

요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 option을 사용하여 Ajax 요청을 전송

option : 요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스

 이름

 타입

 설명

 url

 String

 요청 URL

 type  String

 사용할 HTTP 메서드.  일반적으로 POST나 GET을 사용.

 생략하면 기본 값으로 GET을 사용

 data  Object

 요청에 전달되는 프로퍼티를 가진 객체.

 GET요청이면 데이터는 쿼리 문자열로 제공

 POST요청이면 데이터는 요청의 본문으로 제공

 두 경우 모두 $.ajax() 유틸리티 함수가 값의 인코딩을 처리

 dataType

 String

 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드

 콜백 함수로 전달하기 전에 후처리가 발생할지 결정

 . xml - XML문서로 파싱, 콜백에 XML DOM을 전달

 . html - 응답 텍스트는 처리 과정없이 콜백 함수로 전달

            반환된 HTML에 있는 <script> 블록이 평가된다.

 . json - 응답 텍스트는 JSON문자열로 평가되어 콜백 함수로 전달

 . jsonp - 원격 스크립트를 허용한다는 점을 제외하고는 json과 유사

 . script - 응답 텍스트가 스크립트 구문으로 처리되어 콜백 함수로 전달

 . text - 일반 텍스트

 서버에서 올바른 content-type 응답 헤더를 설정해야 한다.

 생략하면 어떠한 처리나 평가 없이 콜백에 전달

 timeout

 Number

 Ajax 요청의 제한 시간을 밀리초 단위로 설정

 제한 시간이 지나면 취소하거나 error 콜백이 있으면 호출

 global  Boolean  전역 함수 활성화 여부.  생략하면 기본 값으로 활성화
 contentType  String

 요청에 명시되는 콘텐츠 타입. 생략하면 폼 전송이 기본으로 사용하는 'application/x-www-form-urlencoded'가 설정

 success  Function

 응답이 성공 상태코드를 반환하면 호출되는 함수

 응답 본문은 첫번째 매개변수로 전달

 두번째는 상태 값. 항상 success

 error  Function

 응답이 에러 상태코드를 반환하면 호출되는 함수

 XHR 인스턴스, error 상태문자, 예외 객체(선택적)가 매개변수로 전달

 complete

 Function

 요청이 완료되면 호출되는 함수

 XHR 인스턴스와 success/error의 상태문자

 success/error 콜백을 실행후 호출

 beforeSend

 Function

 요청이 전송되기 전에 먼저 호출되는 함수

 XHR 인스턴스를 전달, 헤더설정/요청전 필요연산을 수행

 Ajax 요청을 취소하려면 return true;

 async

 Boolean

 false이면 동기 호출로 전송.  기본은 비동기 요청

 processData

 Boolean

 false로 설정하면 인코딩된 형태의 데이터 금지

 기본은 폼 전송에 사용되는 URL인코딩 방식

 ifModified

 Boolean

 true일 때 Last-Modified 헤더를 확인하여 응답콘텐츠가 변경되지 않았다면 성공, 생략하면 확인하지 못함.

 

 

$.ajaxSetup( properties )

전달된 프로퍼티 집합을 이어지는 $.ajax()호출의 기본 옵션 값으로 할당

properties : 기본 Ajax 프로퍼티 집합을 정의하는 프로퍼티를 가진 객체 인스턴스

                 $.ajax()의 프로퍼티와 동일

 

설정하는 기본 프로퍼티 집합은 load() 컨맨드에 적용할 수 없다.

$.get()/$.post()같은 유틸리티 함수에서 HTTP메서든 기본 값으로 재정의될 수 없다.

 

그 이외의 모든 Ajax 호출이 기본 값 프로퍼티를 사용

 

 

* Ajax 전역 함수

Ajax 요청이 처리되는 각 단계나 요청이 성공하거나 실패할 때 실행되도록

특정 DOM 엘리먼트에 jQuery함수를 덧붙일 수도 있다.

 

ajaxStart( callback )

ajaxSend( callback )

ajaxSuccess( callback )

ajaxError( callback )

ajaxComplete( callback )

ajaxStop( callback )

 

전달된 함수는 모든 일치하는 엘리먼트에  덧붙여지고, Ajax 요청이 발생하는 과정에서 지정된 시점에 호출

 

 전역 콜백 타입

 호출 시점

 매개변수

 ajaxStart

 jQuery의 Ajax 함수나 커맨드가 실행될 때, 하지만 XHR 인스턴스는 생성되기 전이다.

 . 타입이 ajaxStart로 설정된 전역 콜백정보객체

 ajaxSend

 XHR 인스턴가 생성된 뒤, 하지만 서버로 전송하기 전이다.

 . 타입이 ajaxSend로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

 ajaxSuccess

 서버에서 요청이 반환되고, 응답이 성공상태코드를 포함할 때

 . 타입이 ajaxSuccess로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

 ajaxError

 서버에서 요청이 반환되고, 응답이 실패상태코드를 포함할 때

 . 타입이 ajaxError로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

. XHR 인스턴스가 반환한 예외 객체

 ajaxComplete  서버에서 요청이 반환되고, 선언된 ajaxSuccess나 ajaxError 콜백이 호출된 후  . 타입이 ajaxComplete로 설정된 전역 콜백정보객체

 . XHR 인스턴스

 . $.ajax() 함수가 사용하는 프로퍼티

 ajaxStop

 모든 Ajax 진행이 완료되고, 다른 적용된 전역 콜백이 호출된 후

 . 타입이 ajaxStop로 설정된 전역 콜백정보객체

 

 

'plming > jQuery' 카테고리의 다른 글

jQuery 사용자 정의 플러그인  (0) 2015.05.22
animation 효과  (0) 2015.05.19
Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14
  1. 토마's 2016.09.06 16:38 신고

    많은 도움 되었습니다. 감사합니다 :)

GET 요청은 동일한 메서드를 여러번 반복호출해도 동일한 결과를 얻을 때 사용한다.

브라우저가 HTTP 메서드에 따라 캐싱여부를 결정하기 때문이다.

POST 요청은 서버로 전송한 데이터로 추가/변경 작업을 할 때 사용한다.

 

$.get( url, parameters=Object|String, callback=Function )

매개변수로 명시된 URL을 사용하여 서버에 대한 GET요청을 전송한다.

매개변수는 쿼리 문자열로 전달한다.

 

parameters : URL에 덧붙이는 쿼리 문자열을 구성하려고 이름과 값의 쌍으로 프로퍼티를 지닌 객체

                   미리 구성 및 인코딩된 쿼리 문자열

callback : 요청이 완료되면 호출되는 함수

               응답 본문은 이 콜백 함수의 첫 번째 매개변수로 전달되며, 상태 값두번째 매개변수로 전달

 

응답이 XML문서를 포함하면 문서는 파싱되어 DOM이 생성된다.

 

 

$.getJSON( url, parameters=Object|String, callback=Function )

매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송

매개변수는 쿼리 문자열로 전달

응답은 JSON 문자열로 해석되며, 결과로 만들어진 데이터는 콜백함수에 전달

 

callback : 응답에서 JSON문자열로 만들어진 데이터 값은 첫 번째 매개변수로 전달

 

 

$.post( url, parameters, callback )

매개변수로 명시된 URL을 사용하여 서버에 대한 POST 요청을 전송

parameters는 요청의 본문으로 전달

 

 

'plming > jQuery' 카테고리의 다른 글

animation 효과  (0) 2015.05.19
Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14
동적으로 스크립트 로드하기  (0) 2015.05.13

. load( url, parameters=Object, callback=Function )

URL과 선택적인 매개변수로 Ajax요청을 전송한다.

콜백 함수는 요청이 완료되면 호출된다.

응답텍스트는 일치하는 엘리먼트의 콘텐츠를 대체한다.

 

parameters : 요청으로 전달하기 위해 올바르게 인코드된 매개변수로 직렬화되는 프로퍼티를 가진 객체.

                   이 매개변수를 명시하면 요청은 POST메서드를 사용하고, 생략하면 GET메서드를 사용

callback : 응답 결과 데이터가 일치하는 엘리먼트로 로드된 이후에 호출되는 콜백함수.

               이 함수로 전달되는 매개변수는 응답텍스트, 상태코드, XHR인스턴스다.

 

응답으로 반환된 엘리먼트를 필터링하려고 할 때는 요청URL에 셀렉터를 추가하면 된다.

$('.injectMe').load( '/someResource #div' );

 

 

. serialize()

확장집합에 있는 전송할 수 있는 상태인 폼 엘리먼트에서 올바르게 구성되고 인코딩된 쿼리문자열을 생성

폼 컨트롤에서 전송할 수 있는 상태(successful)인 엘리먼트의 정보만 가져온다.

 

 

. serializeArray()

상태가 성공인 폼 컨트롤의 값을 컨트롤의 이름과 값을 포함하는 배열로 수집하여 반환한다.

 

 

'plming > jQuery' 카테고리의 다른 글

Ajax 요청 직접 제어하기  (1) 2015.05.17
Ajax - GET/POST 요청 만들기  (0) 2015.05.15
Ajax - 엘리먼트에 콘텐츠 로드하기  (0) 2015.05.14
Ajax  (0) 2015.05.14
동적으로 스크립트 로드하기  (0) 2015.05.13
자바스크립트 객체와 컬렉션 조작하기  (0) 2015.05.08

Ajax(Asynchronous JavaScript and XML)

페이지를 다시 로드할 필요 없이 서버와 비동기 요청을 만드는 기법

XMLHttpRequest (XHR) 객체로 구현

 

 

* XHR 인스터스 생성하기

var xhr;

if( window.XMLHttpRequest ) {  ← XHR이 정의되었는지 검사
  xhr = new XMLHttpRequest();
}
else if( window.ActiveXObject ) {  ← ActiveX를 제공하는 검사, IE
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
  throw new Error("Ajax 지원 안하는 가봐요");
}

 

 

* XHR 메서드와 프로퍼티

 메서드

 설명

 abort()

 현재 실행하는 요청을 취소

 getAllResponseHeaders()

 응답 헤더의 모든 이름과 값을 포함하는 문자열을 반환

 getResponseHeader(name)

 응답 헤더에서 name에 해당하는 값을 반환

 open(method, url, async, username, password)

 요청 메서드와 호출할 URL을 설정.

 선택적으로 요청은 동기 방식으로 선언할 수 있으며,

 컨테이너 기반 인증이 필요하면 사용자명과 암호를 제공

 send(content)

 요청을 선택사항인 본문 콘텐츠와 함께 전송

 setRequestHeader(name,value)

 name에 해당하는 요청 헤더에 value를 설정

 

 프로퍼티

 설명

 onreadystatechange

 요청의 상태가 변경될 때 사용하는 이벤트 핸들러를 할당

 readyState

 요청의 상태를 나타내는 정수 값

 0 - 초기화 되지 않은 상태 (Uninitialized)

 1 - 로드되지 않은 상태(Loading)

      send() 메서드가 호출되지 않은 상태

 2 - 로드된 상태(Loaded)

      헤더와 상태는 받았지만, 응답은 받지 못한 상태

 3 - 상호작용 상태(Interactive)

      데이터의 일부만 받은 상태

 4 - 완료상태(Complete)

      모든 데이터를 받아서 완료된 상태

 responseText

 응답에 반환된 본문 콘텐츠

 responseXML

 본문 콘텐츠가 XML이라면, 본문 콘텐츠에서 XML DOM을 생성

 status

 서버에서 반환한 응답상태코드.

 성공은 200, 찾을 수 없음은 404 등

 statusText

 응답으로 반환된 상태 메시지

 

 

* 요청 보내기

XHR의 open() 메서드를 호출

xhr.open( 'GET', '/some/resource/url', Boolean값 );

 

요청을 서버로 전송하지 않는다.

URL과 HTTP메서드를 설정하는 데 사용

Boolean값이 true이거나 생략하면 비동기 호출, false면 동기 호출

 

GET요청은

xhr.send(null);

 

POST요청은

send() 메서드에 전달된 문자열은 반드시 이름과 값이 올바르게 URL로 인코딩된 쿼리 문자열 형태여야

xhr.send( 'a=1&b=2&c=3' );

 

 

* 진행 상태 확인하기

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {  ← 완료상태
    if (xhr.status >= 200 && xhr.status < 300) {  ← 성공상태
      document.getElementById('someContainer').innerHTML = xhr.responseText;
    }
  }
}

 

* 응답 얻기

Ajax 요청의 응답은 일반텍스트, HTML, JSON(JavaScript Object Notation)형태의 자바스크립트 객체나 배열일 수 있다.

응답의 본문은 .responseText 프로퍼티를 사용

MIME타입이 'text/xml'등의 XML형태는 .responseXML 프로퍼티를 사용

 

 

+ Recent posts