'ajax'에 해당되는 글 1건

  1. 2014.03.21 jsonp에 대한 간단한 사용법


간만에 포스트를 올리는 것 같다

오늘은 jsonp에 대한 간단한 소스를 공개하고 한다

jsonp는 크로스 도메인을 피할수 있는 굉장한 대안이다.

또한 타 사이트에 있는 내용을 스크립트로 처리하거나 내용을 받아올 때 정말 놀라운 성능을 발휘한다.

 

  $.ajax({

   type : "POST",  //메소드 속성(POST, GET방식 선택)
   
   url : "URL", //요청 할 URL
   data : {gubun:gubun,searchKey:searchKey,MainNo:MainNo,SubNo:SubNo}, //넘길 파라미터
   
   contentType: "text/plain; charset=utf-8",  //캐릭터타입을 선언해준다
   
   jsonp : "callback", //굉장히 중요하다. 이 이름으로 넘겨주면 반드시 여기 지정된 이름으로 값을 넘겨받아야 한다. 이부분은 값을 넘겨 주는 부분에서 살펴보자
   
   dataType : "jsonp",
   
   withCredentials: true, //요청을 보낼때는 반드시 true로 활성화해야 한다.
   
   success : function(data) {

   //통신이 정상적으로 되었을때 실행 할 내용
   
    if(data != null)    {
    
     if(data.flag == "Y"){ //데이타가 정상적으로 넘어온경우 처리한다
      if(data.gubun == "oldpost"){ //우편번호를 처리하고자 구분에서  구주소 처리를 위해서 썼다
       var xml = data.message;  //돌려받는 값중 message로 받은 값을 저장한다.
         xmlDoc = $.parseXML( xml ), //내용을 XML로 받는 경우 처리 하는 루틴이다.
         $xml = $( xmlDoc ),
       $xml.find("detailList").each(function(){
  
              //내용을 처리한다.  
           });
          }
          else{
       var xml = data.message;
         xmlDoc = $.parseXML( xml ),
         $xml = $( xmlDoc ),
       $xml.find("newAddressList").each(function(){
  
              //우편번호를 처리하고자 구분에서  신주소 처리를 위해서 썼다  
           });
          }
     
     }else{ //에러가 발생한 경우 처리한 것이다.
     
      var xml = data.message;
        xmlDoc = $.parseXML( xml ),
        $xml = $( xmlDoc ),
      errMsg = $xml.find("errMsg").text();
           append("",errMsg,errMsg);
     }
     
    }
   
   },
   
   error : function(data) {
   
   alert("접속 도중 오류가 발생했습니다. (통신오류)"); //에러시 실행 할 내용
   
   }
  
  });

 

이렇게 자바스크립트에서 ajax를 이용하여 jsonp로 결과를 요청했다

 

그럼 결과를 보내주는 쪽에서는 상기 소스에서 파라메타값을 받아서 내용을 처리한 다음

결과값을 보내준다

ASP의 경우는

아래와 같이 처리한다.

callback = request("callback")
 response.write callback & "({'gubun':'구분값','flag':'정상처리유무','message':'결과값'})"

 

여기서 중요한것은 jsnop에서  jsonp : "callback", 로 처리를 했기 때문에 반드시 받을때도 callback 값을 같이 붙여서 보내야 정상적으로 값을 받을 수 있다

나 여기서 결과값을 'message'로 해서 XML형태로 데이타를 보내서 처리했다

 

너무 편하고 간단하다...

 

 

top