Gson Json 관련

Gson이란?

- Gson은 JSON 파일을 자바 오브젝트로 변환할 수 있게 해주는 구글이 만든 자바 라이브러리

Gson 특징

- JSON 파일을 쉽게 읽고 만들 수 있는 메소드를 API로 제공한다.

- JAVA Generics를 지원한다

JSON이란?

- JavaScript Object Notation의 줄임말.

- JSON 그자체는 단순 데이터 포맷. 통신방법도, 프로그래밍 문법도 아님

JSON 위키피디아 자료 

http://ko.wikipedia.org/wiki/JSON

JAVASCRIPT 발견하기 힘든 에러

서버에서 가져온 데이터가 소수점 형태 52.0 이런 형태 일 경우

item.value != 0 --> 이럴 경우 에러가 발생하지만 아무로그도 나오지 않는다

item.value != 0.0--> 이와 같이 같은 형으로 비교해줘야 함

json ajax 호출 후 java->success(data) 한글깨짐

1 ajax 파라미터->java 
 contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

2. java->ajax 결과 값

@RequestMapping(value = "/Completed.do"  , method = {RequestMethod.GET, RequestMethod.POST},produces="text/plain;charset=UTF-8")

produces를 설정하면 javascript 받는쪽에서 한글이 안깨진다

JSON CONTAINS COLON

{
  "photo": {
    "reg": {
      "id": 50
    },
    "thumb": {
      "id": 51
    },
    ":original": {
      "id": 53"
    }
  }
}

json에 : 이 포함된경우 아래와 같이하면됨

photo[':original'].id

JSONP 및 Script console.log Tip

console.log 찍을 시 Object 상세 찍는법
console.log("object: %O", data); 

JSNOP  : http://kingbbode.tistory.com/26 여기에 제일 잘 정리되어있음
            크로스도메인 해결하는데 Spring security에서 막혀 있어 filter + jsonp 로 해결함
            http://www.codejs.co.kr/jquery-jsonp/
            http://dev.epiloum.net/1311

JSONP is a method for sending JSON data without worrying about cross-domain issues.

JSONP does not use the XMLHttpRequest object.

JSONP uses the <script> tag instead.

실행시 주의사항
1. web.xml 에 filter 설정해서 해당 url 크로스도메인 허용해줌
2. java 값 리턴시 callback 함수로 감싸주어야함
3. script에서 호출하고 받을때 callback 함수 이름이 동일해야함


XML 부분 
web.xml
<filter>
   <filter-name>cors</filter-name>
   <filter-class>com.test.api.common.util.CORSFilter</filter-class>
</filter>
<filter-mapping>
   <filter-name>cors</filter-name>
   <url-pattern>/test/*</url-pattern>

</filter-mapping>

Filter java 부분
public class CORSFilter implements Filter{

@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub

}

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        
        response.setHeader("Access-Control-Allow-Origin", "*");
        chain.doFilter(req, response);
}
}

JAVA 부분
@RequestMapping(value="/test.do", method = {RequestMethod.GET, RequestMethod.POST})
public void testApi(HttpServletRequest request, HttpServletResponse response) throws Exception{

try {
response.setContentType("text/html;charset=UTF-8"); //PrintWriter 한글깨짐해결

Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
TestDetail testDetail = (TestDetail ) authentication.getPrincipal();
String userId    = testDetail .getMember().getId();
String userName  = testDetail .getMember().getUserName();

String callBack = request.getParameter("callback");  //jsonp callback 함수명

JSONObject obj=new JSONObject();

obj.put("userId", userId);
obj.put("userName", userName);

PrintWriter out = response.getWriter();
out.write(callBack + "("+obj.toString()+")");
out.flush();
out.close();
}
catch (Exception e){
logger.error("Exception : " + e.getMessage(), e);
}

}
Script 부분 

function apiCheck(){
 var aPI = "http://test/testApi.do?callback=?";  //callback 이게 컬백함수 이름임
 $.getJSON( testAPI, 
function( data ) {
console.log("data : " + data);
console.log("object: %O", data)
 });
}

javascript 정규식 정리

http://noritersand.tistory.com/90

로딩바 간단히 추가하기

간단하게 로딩바 이미지 넣는법
1. css 추가
#loading {
 width: 100%;  
 height: 100%;  
 top: 0px;
 left: 0px;
 position: fixed;  
 display: block;  
 opacity: 0.7;  
 background-color: #fff;  
 z-index: 99;  
 text-align: center; } 
  
#loading-image {  
 position: absolute;  
 top: 50%;  
 left: 50%; 

 z-index: 100; }

2. jsp에 추가
<div id="loading" style="display:none;" ><img id="loading-image" src="/asset/images/loadingbar/ajax-loader.gif" alt="Loading..." /></div>

javascript submit 후 close, reload 문제해결방법

1. ajax로 해결

2. form 전체를 넘길시 serialize()함수 이용 

여기서 중요한 것은 꼭 contentType 설정을 해줘야한다

var formData = $("#frm").serialize();

$.ajax({

type : 'POST',

url : '/save',

data: formData,

contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

}).success(function(res) {

parent.opener.location.reload();

window.open('', '_self', '').close();

}).error(function(err) {

$.stateAlarm(err.message);

});