New & Now

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

오늘은 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형태로 데이타를 보내서 처리했다

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

SNS 연결 스크립트 중 대표적인 트위트, 페이스북, 미투데이, 요즘에 대한 글보내기 스크립트입니다.

많이들 사용하는 자바스크립트입니다.

// ####################################################################
//SNS연결 스크립트
// ####################################################################
function openSNS(gubunNum,msg,url){         
 var href = "";         
 var name = "";
 
 if(gubunNum == 'twitter')
 {         
  href = "http://twitter.com/home?status=" + encodeURIComponent(msg) + " " + url;
  name = "twitter";         
 }
 else if(gubunNum == 'facebook')
 {
  href = "http://www.facebook.com/sharer.php?u=" + url + "&t=" + encodeURIComponent(msg)          
  name = "facebook";         
 }
 else if(gubunNum == 'me2day')
 {             
  href = "http://me2day.net/posts/new?new_post[body]=\"" + encodeURI(msg) + "\":" + url;
  name = "me2day";         
 }
 else if(gubunNum == 'yozm')
 {          
  href = "http://yozm.daum.net/api/popup/prePost?prefix="+encodeURI(msg)+"&link="+url;          
  name = "yozm";         
 } 
      
 var openWin = window.open(href, name);
 
 if ( openWin )
 {
   openWin.focus();
  }
    
}

// ##################################################################################
//   비밀번호의 휴효성을 체크한다.
//   호출 방법    :  getCehckPassWord(아이디오브젝트, 비밀번호 오브젝트, 비밀번호 확인오브젝트)
// ##################################################################################
function getCehckPassWord(ObjUserID, ObjUserPassWord, objUserPassWordRe)
{
 
 if(ObjUserPassWord.value != objUserPassWordRe.value)
 {
  alert("입력하신 비밀번호와 비밀번호확인이 일치하지 않습니다");
  ObjUserPassWord.value = "";
  objUserPassWordRe.value = "";
  ObjUserPassWord.focus();
  return false;
 }
 
 if(ObjUserPassWord.value.length < 8)
 {
  alert("비밀번호는 문자, 숫자, 특수문자의 조합으로 8~16자리로 입력해주세요.");
  ObjUserPassWord.value = "";
  objUserPassWordRe.value = "";
  ObjUserPassWord.focus();
  return false;
 }
 
 if(!ObjUserPassWord.value.match(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/))
 {
  alert("비밀번호는 문자, 숫자, 특수문자의 조합으로 8~16자리로 입력해주세요.");
  ObjUserPassWord.value = "";
  objUserPassWordRe.value = "";
  ObjUserPassWord.focus();
  return false;
 }
 
 if(ObjUserID.value.indexOf(ObjUserPassWord) > -1)
 {
  alert("비밀번호에 아이디를 사용할 수 없습니다.");
  ObjUserPassWord.value = "";
  objUserPassWordRe.value = "";
  ObjUserPassWord.focus();
  return false;
 }
 
 var SamePass_0 = 0; //동일문자 카운트
 var SamePass_1 = 0; //연속성(+) 카운드
 var SamePass_2 = 0; //연속성(-) 카운드
 
 var chr_pass_0;
 var chr_pass_1;
 
 for(var i=0; i < ObjUserPassWord.value.length; i++)
 {
  chr_pass_0 = ObjUserPassWord.value.charAt(i);
  chr_pass_1 = ObjUserPassWord.value.charAt(i+1);
  
  //동일문자 카운트
  if(chr_pass_0 == chr_pass_1)
  {
   SamePass_0 = SamePass_0 + 1
  }
  
  
  //연속성(+) 카운드
  if(chr_pass_0.charCodeAt(0) - chr_pass_1.charCodeAt(0) == 1)
  {
   SamePass_1 = SamePass_1 + 1
  }
  
  //연속성(-) 카운드
  if(chr_pass_0.charCodeAt(0) - chr_pass_1.charCodeAt(0) == -1)
  {
   SamePass_2 = SamePass_2 + 1
  }
 }
 if(SamePass_0 > 1)
 {
  alert("동일문자를 3번 이상 사용할 수 없습니다.");
  ObjUserPassWord.value = "";
  objUserPassWordRe.value = "";
  ObjUserPassWord.focus();
  return false;
 }
 
 if(SamePass_1 > 1 || SamePass_2 > 1 )
 {
  alert("연속된 문자열(123 또는 321, abc, cba 등)을\n 3자 이상 사용 할 수 없습니다.");
  ObjUserPassWord.value = "";
  objUserPassWordRe.value = "";
  ObjUserPassWord.focus();
  return false;
 }
 return true;
}