IT

ajax + jsonp 으로 cross-domain 호출하기

2013. 8. 12. 13:37 : 소프트웨어/JavaScript

$.ajax() 같은 ajax 관련 함수를 호출할 때 타겟이 되는 URL이 클라이언트와 다른 도메인이면 호출이 안 된다.

 

가령 http://a.abc.com/first.jsp 에서 ajax로 http://x.xyz.com/api/getme 라는 API를 호출할 수는 없다는 말이다.

 

이는 Same Origin Policy 라는 ajax의 원칙 때문으로, 현재 브라우저에 보여지는 HTML을 내려준 서버에게만 ajax 요청을 

 

할 수 있다는 말이 되겠다.

 

 

위와 같이 불가한 호출을 하고 크롬에서 F12를 눌러 에러메시지를 보면,

 

XMLHttpRequest cannot load http://x.xyz.com/api/getme. Origin http://a.abc.com is not allowed by Access-Control-Allow-Origin.

 

이라는 문구가 뜨는 걸 볼 수 있다.

 

 

이를 해결하는 방법이 있다.

 

1. json 대신 jsonp 타입을 사용한다.

 

  1. $.ajax({
  2.    type : "get",
  3.    url : "http://...",
  4.    dataType : "jsonp",
  5.    success : ...,
  6.    error : ...
  7. });

이때 중요한 것은 type을 get으로 해야 한다는 것이다.
jsonp는 post를 지원하지 않고 get만 가능하기 때문이다. (post로 해 놔도 호출시점에 get으로 바뀐다)
물론 서비스를 제공하는 서버 측에서 해당 api가 get으로 호출가능하도록 되어있어야 한다.


2. CORS 라는 방법을 사용하는 것이다. 이것은 클라이언트가 아닌 서버 측에서 설정해 줘야 하는 것이다.
   즉 다른 도메인과도 ajax 통신을 할 수 있도록 서버에 설정하는 것이다.
   관련 포스팅 (http://iolothebard.tistory.com/494)

 

저작자표시 비영리 변경금지

'소프트웨어 > JavaScript' 카테고리의 다른 글

JQuery Validation  (0) 2013.10.01
jQuery Migrate plugin  (0) 2013.08.19
Custom Scheme 만들기(모바일 웹 -> 앱 실행)  (0) 2013.08.07
Jquery+Ajax으로 session 생성하기  (0) 2013.08.07
jquery 기본  (0) 2013.08.07
Posted by sinpk

Custom Scheme 만들기(모바일 웹 -> 앱 실행)

2013. 8. 7. 23:41 : 소프트웨어/JavaScript

1. 개요 : Custom_Scheme이란것은 스마트 폰의 web에서 해당 app을 실행시키는 것을 말한다.

 

2. 정확히 만들려는게 모야 :

1) 입력창과 버튼이 있는 web 페이지를 하나 만들고 모바일 web에서 접속한다. 

2) 입력창에 아무 값이나 입력한 후 전송 버튼을 누르면 앱이 실행된다.

3) app이 실행되고 web에서 입력했던 값이 app에서 출력된다.

 

3. jsp페이지 생성 : one.jsp, two.jsp

안드로이드 프로젝트 수정:  AndroidManifest.xml, csmail.xml csActivity.java

 

4. 사용기술 : jsp, javascript(ajax, jquery), android

 

5. 소스

[one.jsp]

<script type="text/javascript" src="./jqeury/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
 function checkApplicationInstall() {
   var id = idCheck(); //생성된 세션값 가져옴.
   document.checkframe.location = "testurl://aa/?input="+id; 
   /*
   iframe에 걸린거... 여기서 앱이 설치 되어 있지 않을 경우 testurl"// 이 안먹힐 거고 창이 닫히지 않는다. */
  
   /* 웹 페이지가 닫히지 않을시 어플 다운로드 페이지로 이동 1초 후에 다음 function을 수행 */
   /* setTimeout(method, delay, optional);
   (반복호출할 함수명, 반복시간(1초=1000밀리세컨드), 스크립트 언어 타입(javascript, VBScript, JScript)))*/
   setTimeout("checkApplicationInstall_callback()", 1000);
 }
 
 function checkApplicationInstall_callback() {
  
   try {
    //iframe부분에 해당하는 앱 호출하는 url 실행
    var s = document.checkframe.document.body.innerHTML;
     
   } catch (e) {
   // 어플리케이션 설치 안 되어 있으면 설치페이지로 연결
    alert("Custom_Scheme 앱이 설치 되어 있지 않습니다. 설치 페이지로 이동합니다.");
    location.href = "http://blog.naver.com/dearjune7/memo/130167378345";
   }
 }  
 
 function idCheck(){
  var id=$("#test").val();
  $.ajax({
   type:"POST"
   ,url:"two.jsp" //세션 생성페이지 (setAttribute...)
   ,data:"id="+id
   ,success:function(){
    $("#result").html("테스트 성공");
   }
  });
  return id;
 }
</script>   

<body>
<h3>Custom_Scheme App으로 입력한 데이터 전달</h3>
 
 <input type="text" id="test" />
 <input type="button" value="app으로 전송" onclick="checkApplicationInstall()"/><br/>
 
 <!-- html에서 iframe 을 이용하여 앱을 호출하는걸 아이프레임에 넣어놓고 호출시에는 브라우저가 닫히고 앱이 실행되고 아이프레임상에서 오류페이지가 뜰경우 부모 html에 스크립트로 setTimeout 몇초간 줘서 브라우저가  0.5초동안 닫히지 않을시 어플다운로드 페이지로 이동하도록 해서 처리하였습니다. -->
 
 <iframe id="checkframe" name="checkframe"  src="check.html" width="1" height="1"></iframe>
 <div id="result"></div><p>
 생성된 세션값 : <%=session.getAttribute("id") %> <!--확인용일뿐...-->
</body>

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

[two.jsp]

<%
String id = request.getParameter("id");
System.out.println("넘어온 id :"+id);

session.setAttribute("id", id);

request.getSession().getAttribute("id");
System.out.println("session id:"+id);

%>

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

 

[AndroidManifest.xml]

...

<!-- activity태그 안에 intent-filter추가 -->

<intent-filter>
                <action android:name="android.intent.action.VIEW" />
    <!-- url scheme을 사용하기 위한 준비 -->
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <!-- 자신만의 url scheme 등록 -->
                <!-- scheme은 http같은 프로토콜 부분, host는 www.daum.net 같은 경로부분 -->
                <data android:scheme="testurl" android:host="aa"/>
</intent-filter>

...

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

[csmain.xml]

<!-- 텍스트 표시 -->

    <TextView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="웹에서 전송 받은 값 보여주기" />

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

[csActivity.java]

public class reActivity extends Activity {
 
 private TextView txtresult; 
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  txtresult = (TextView)findViewById(R.id.result);
  
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
     
  //AndroidManifest 읽음.
  
  getMenuInflater().inflate(R.menu.main, menu);
  Intent intent = getIntent();
  Log.d("getIntent() : "+getIntent(), "  Intent안 ");
  
  if(intent.ACTION_VIEW.equals(intent.getAction())){
   Uri uri = intent.getData(); 
   Log.d("uri : " + uri ,"  Action_view안 "); //uri : testurl://aa/?input=%E3%84....
   
   String input = uri.getQueryParameter("input");
   //input : jg
   Log.d("input : " + input , "  input안 "); //uri에서 ?input= 뒤에 받아온 값
   
   //앱에서 출력
   txtresult.setText("받은 값 : " + input);
   
  }
  return true;
 }

}

[출처] Custom Scheme 만들기(모바일 웹 -> 앱 실행)|작성자 Alex


저작자표시 비영리 변경금지

'소프트웨어 > JavaScript' 카테고리의 다른 글

jQuery Migrate plugin  (0) 2013.08.19
ajax + jsonp 으로 cross-domain 호출하기  (0) 2013.08.12
Jquery+Ajax으로 session 생성하기  (0) 2013.08.07
jquery 기본  (0) 2013.08.07
JavaScript의 Navigator 객체를 이용한 브라우저 정보 가져오기  (0) 2013.08.07
Posted by sinpk

Jquery+Ajax으로 session 생성하기

2013. 8. 7. 23:37 : 소프트웨어/JavaScript

- jquery를 이용한 Ajax POST방식 -

 

* ajax호출 내용

 

 

1. type : get, post

2. url : 호출할 url주소

3. dataType : xml, json, script, html

4. data : get방식의 "input=text&output=text2" 처럼 =.&기호를 이용하여 쌍을 이루어 데이터를 넘겨도 

되고 json처럼 key, value형태인 ({"key":"value", "key2":"value2"}) array로 넘겨도 된다.

5. success : ajax호출이 성공했을때 취할 액션을 넣음. 내부에 function을 넣어도 된다.

 

 

소스 : 

[Test01.jsp]

 

 

function check(){

var id=$("#test").val();

$.ajax({

type:"POST"

,url:"Test02.jsp" //세션 생성페이지 (setAttribute...)

,data:"id="+id

,success:function(){

//성공하면...

location.href="http://localhost:8080/ajaxTest/Test02.jsp?id="+id;

}

});

}

 

 

소스 :

[Test02.jsp]

 

 

<%

request.setCharacterEncoding("euc-kr");

String id = request.getParameter("id");

session.setAttribute("id", id); 

%>

[출처] (2)Jquery+Ajax으로 session 생성하기|작성자 Alex


저작자표시 비영리 변경금지

'소프트웨어 > JavaScript' 카테고리의 다른 글

ajax + jsonp 으로 cross-domain 호출하기  (0) 2013.08.12
Custom Scheme 만들기(모바일 웹 -> 앱 실행)  (0) 2013.08.07
jquery 기본  (0) 2013.08.07
JavaScript의 Navigator 객체를 이용한 브라우저 정보 가져오기  (0) 2013.08.07
오류 : jquery min .js파일 validator Eclipse  (0) 2013.07.15
Posted by sinpk

jquery 기본

2013. 8. 7. 23:36 : 소프트웨어/JavaScript
- jquery 사용 이유나 자세한 적용방법을 알고 싶다면 위의 링크를 추천한다.  

- 기본 문법 ($라는 기호가 jquery를 사용한다는 기호이다.)
$("#ID") - 해당되는 ID값을 찾아 한개만 반환한다.
$("div") - 해당되는 Element를 찾아 객체집합으로 반환한다.
$(".hand") - 해당되는 Class명을 찾아 객체집합으로 반환한다.
$("*") - 모든 Element를 찾아 객체집합으로 반환한다.
$("div, span") - div와 span태그를 찾아 객체집합으로 반환한다.

[출처] jquery 기본 예제|작성자 Alex


저작자표시 비영리 변경금지

'소프트웨어 > JavaScript' 카테고리의 다른 글

Custom Scheme 만들기(모바일 웹 -> 앱 실행)  (0) 2013.08.07
Jquery+Ajax으로 session 생성하기  (0) 2013.08.07
JavaScript의 Navigator 객체를 이용한 브라우저 정보 가져오기  (0) 2013.08.07
오류 : jquery min .js파일 validator Eclipse  (0) 2013.07.15
jqGrid 튜토리얼  (0) 2013.06.17
Posted by sinpk

JavaScript의 Navigator 객체를 이용한 브라우저 정보 가져오기

2013. 8. 7. 23:34 : 소프트웨어/JavaScript
ActiveX의 사용 유무와 관련하여 IE와 기타브라우저(크롬, 사파리, 파이어폭스...)를 구분하여 각각 다른 이벤트를 주는 경우가 종종 있을 것이다. 
이때 Navigator객체를 이용하면 접속한 브라우저의 모든 정보를 알아낼 수 있다.  

* 아래는 Navigator의 간단한 예제이다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
  <script type="text/javascript">
    var br = "<br />", hr = "<hr />";
    document.write("브라우저 코드 : " + navigator.appCodeName + br + hr);
    document.write("브라우저 이름 : " + navigator.appName + br + hr);
    document.write("브라우저 버전 : " + navigator.appVersion + br + hr);
    document.write("사용 언어 : " + navigator.language + br + hr);
    document.write("시스템 코드 : " + navigator.platform + br + hr);
    document.write("UserAgent : " + navigator.userAgent + br + hr);
    
    document.write("<h2>브라우저에서 지원하는 마임타입들</h2>");
    for(var i in navigator.mimeTypes) {
        document.write(navigator.mimeTypes[i].type + br + hr);
        document.write(navigator.mimeTypes[i].desciption + br + hr);
        document.write("마임타입과 관련 된 plug in : ");
        document.write(navigator.mimeTypes[i].enabledPlugin + br + hr);
        document.write("파일 확장자(suffix) : ");
        document.write(navigator.mimeTypes[i].suffixes + br + hr + br + br);
    }

    // 크로스 브라우징의 간단한 예..
    var browser = navigator.appName;
    if (browser == "Netscape") {
        alert("익스플로러로 접속바랍니다.");
    } else {
        alert("Welcome~!");
    }
    </script>

<body>
  <h2>브라우저 정보</h2>

</body>


저작자표시 비영리 변경금지

'소프트웨어 > JavaScript' 카테고리의 다른 글

Custom Scheme 만들기(모바일 웹 -> 앱 실행)  (0) 2013.08.07
Jquery+Ajax으로 session 생성하기  (0) 2013.08.07
jquery 기본  (0) 2013.08.07
오류 : jquery min .js파일 validator Eclipse  (0) 2013.07.15
jqGrid 튜토리얼  (0) 2013.06.17
Posted by sinpk

티스토리툴바