jsonp 호출하는 쪽과 호출되는 쪽 세팅

http://doolyit.tistory.com/20

http://blog.naver.com/woo_jae_ho/220318694045

이렇게 코딩하는 방식도 존재..

$.ajax ({

...,

success : function(data) { console.log("success") },

error : function(data) { console.log("error") },

complete : function(data) { console.log("complete") } // success 나 error 후에 실행

})

.done(function(){ console.log("done") })

.fail(function(){ console.log("fail") })

.always(function(){ console.log("always") })                      // done 이나 fail 후에 실행

콘솔에 표시되는 순서는 다음과 같다.

1. 성공일 경우 : success > complete > done > always

2. 실패일 경우 : error > complete > fail > always.

jquery 1.9.x 이후로는

done/fail/always 방식을 권고하고 있는데,

이렇게 하면 리턴되는 data 를 이용해서 여러번 사용할 수 있기 때문.

-----------------------------------------------------------------------------------------------------------------------------

XSS 공격을 미연에 방지하기 위해서, A 사이트와 B 사이트 간의 자바스크립트 호출시 웹브라우저가 작동하지 않습니다.

물론, 웹브라우저 설정을 바꾸면 되기는 하겠지만 안 된다는 사람들 마다 일일이 알려주기도 힘들고 해서..

XSS 가 허용되는 정상적인 프로그램 방법이 무엇이 있을까 찾아 보니, jsonp 가 정답.

json 과 달리 jsonp 는 http:// 프로토콜로 열려있는 화면에서 https:// 프로토콜 이용이 가능.

물론, jsonp 로 http 를 사용하거나 https 사용하거나 둘다 가능하다는 이야기.

이 경우에도.. 호출하는 쪽에서 자바스크립트를 사용하고,

호출되는 쪽에서는 프로세스나 데이타만 제공하는 식으로 처리하도록 하는 것이 깔끔합니다.

이렇게 해 놓으면, 모바일 어플에서 사용할 수도 있고.. 다른 시스템과의 연계에서도 API 로 써 먹을 수 있다는..

호출하는 쪽은 아래와 같이 데이타를 처리.

var data1 = $('form[name="formName"]').serialize(); // serialize 가 대세? 불필요한 내용이 들어가기도 함..

$.ajax({

  cache : false, // true 결과물이 정적인 경우, false 결과물이 동적인 경우

  type : 'POST', // GET, DELETE/PUT 은 RESTful 에서 사용하는데, 모든 웹브라우저가 지원하는 것은 아님

  dataType : 'jsonp', // ajax 결과로 리턴되는 데이타 타입. html 이면 script 가 포함된 경우 실행됨. script 명 type 이 GET 으로 변환. text, xml

  jsonp : 'callback', // dataType 이 jsonp 이면 jsonp 세팅 필수. 호출 시점에서 callback 파라미터에 자동으로 값을 넣는데, 이 때 사용되는 명칭

  async : true,// default true. true 비동기로 success 전까지 호출한 곳에 기다리지 않음. false success/fail 기다리기 때문에 화면 멈춤

  contentType : 'application/x-www-form-urlencoded',// default application/x-www-form-urlencoded

  url : 'https://...', // SSL 이 가능하면 이걸 사용, sha2 와 sha1 문제가 걸려도 화면에 보여지는 것이 아니라 통과

  //contentType : 'application/json;charset=EUC-KR', // 필요시 설정

  data : data1.replace(/%/g, '%25'), // 특수문자 처리, 불필요시 그냥 data1. json 방식 가능. JSON.parse() json 개체로, JSON.stringify() stirng 개체로 변환

  success : function(data){ // ajax 수신 성공시 처리 로직

    if(data.result){

      if(data.msg!='') alert(data.msg); // 메시지가 있으면 알림

     ...

    }else{

      if(data.msg!='') alert(data.msg); // 오류가 나도 메시지가 없으면 통과

      if(data.cb!='') eval(data.cb+'()'); // jsonp 작업 후에 특정 자바스크립트 함수가 호출되어 한다면 이렇게 기술

     ...

    }

  },

  error : function(data){ // ajax 수신 실패시 처리 로직

  }

});

호출되는 쪽은 아래와 같이 데이타를 처리. 문자셋은 서버 세팅에 맞게 조정.

<%--

  * 프로그램 명칭 : 

  * 프로그램 설명 : 

  * 작업일/작업자 : 

--%><%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"

%><% request.setCharacterEncoding("EUC-KR"); 

%><%@ page import="java.util.Calendar" %><%-- 오류 발생시 일시를 남기려고 세팅

--%><%@ page import="java.net.URLDecoder" %><%-- 한글이나 특수문자가 넘어올 때 url 인코딩이 되기 때문에 decoding

--%><%@ page import="net.sf.json.JSONArray" %><%-- json object 를 array 에 담는 형식이라..

--%><%@ page import="net.sf.json.JSONObject" %><%-- json object 를 array 에 담는 형식이라..

--%><%@ page import="net.sf.json.JSONSerializer" %><%-- 이건 나중에..

--%><%

  if(request.getProtocol().equals("HTTP/1.0")){ // 혹시나 캐시가 먹힐까봐서..

    response.setDateHeader("Expires", 0);

    response.setHeader("Pragma", "no-cache");

  }else{

    response.setHeader("Cache-Control", "no-cache");

  }

  HashMap hm= new HashMap();

  try {

    // 파라미터 수집

    String name  = URLDecoder.decode(request.getParameter("name"),"utf-8"); // jsonp 는 utf-8 로 세팅

    String email  = URLDecoder.decode(request.getParameter("email"),"utf-8"); // jsonp 는 utf-8 로 세팅. '@' 특수문자

    // 수집된 파라미터 검증, 필요시 DB 와 대조

    if(체크 오류시){

      hm.put("msg","오류 메시지");

      hm.put("cb","필요시 callback함수"); // 필요 없으면 설정하지 않아도 됨

      throw new Exception(); // return 하면 finally 도 실행되지 않아서 throw

    }

    // DB 작업

    boolean result = 작업로직;

    if(!result){ hm.put("msg", "작업로직에서 넘어 온 오류 메시지"); throw new Exception(); }

    hm.put("msg", "작업 성공시 메시지가 필요하면 기술");

    hm.put("result", result); // 어쩌다 보니 이게 제일 마지막에 세팅

  }catch(Exception e){

    if(!hm.containsKey("msg")){ // 개발자가 예외 처리한 것은 통화

       hm.put("msg",e.toString()); // 시스템 오류 메시지를 사용자가 봐야 한다면 추가..

      StringBuffer  sbLog = new StringBuffer();

      sbLog.append("\n"+Calendar.getInstance().getTime()); // 웹서버 시스템 시간, 간혹 시간이 중요할 때가 있어서..

      sbLog.append("\n+++."+request.getRequestURL()); // 해당 .jsp URL

      sbLog.append("\n+++.Exception:" +e.toString()); // e.toString() 과 e.getMessage() 와는 약간 다름

      sbLog.append("\n+++.name     :" +name  ); // 파라미터도 여기에 찍으면 굿

      System.out.println(sbLog);

      sbLog.delete(0,sbLog.length());

    }

  }finally{

    // jsonp 작업. 호출하는 쪽에서 jsonp : 'callback' 이라 했기 때문에 파라미터 처리. 실제값은 복잡

    if(!hm.containsKey("result")) hm.put("result",false); // throw 할 때 마다 세팅하지 않고 여기서 1회 세팅

    if(!hm.containsKey("msg")) hm.put("msg","");  // 메시지가 없어도 jsonp 에 표시를 하려면 필요

    if(!hm.containsKey("cb")) hm.put("cb",""); // jsonp 호출 이후 콜백

    out.print(Utils.getVal(request.getParameter("callback"))+"("+JSONObject.fromObject(hm)+")"); // hashmap json

    try{ hm.clear(); }finally{ hm = null; } // 명시적 GC(GarbageCollection)

  }

%>

.Fine.