jqeury cross domain ajax 호출

http://www.ibm.com/developerworks/kr/library/wa-aj-jsonp1/

jsonp를 이용하여 크로스 도메인간의 ajax호출을 가능하게 하는 방법.

쥬디가 알려줬다. 정리해둬야지 ㅋㅋ

php로 요청할 URL이 이런식으로 정의되어 있다면

###php

<?php

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';

?>

 

 

jquery로 이렇게 처리

###js

jQuery.getJSON(CROSS_DOMAIN_URL+"&callback=?", function(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
});

 

또는

###js

 

jQuery.ajax({
    type : "GET",
    url : CROSS_DOMAIN_URL,
    data : {symbol: 'ibm', price: '91.42'},
    dataType:"jsonp",
    cache:false, //ie에서 캐시를 잡고 있어서 요청이 잘 안되는경우가 있어서 사용.
    success : function(data){
        //데이터 처리
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
    },
    error : function(xhr, status, error){
        alert(xhr.status);
    }
})  

 

간단하다.

는 훼이크!!!
한방에 되는게 어딨어;;

 

인터넷 떠도는글 보면 다 되는데 안된다;; 되는 경우도 있을거다.

암튼 안된다.

###js

jQuery.ajax({
    xhrFields : {
        withCredentials : true
    }
});

이렇게 설정해 주면 된다.

http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

Credentialed Requests

By default, “credentials” such as Cookies and HTTP Auth information are not sent in cross-site requests using XMLHttpRequest. In order to send them, you have to set the withCredentials property of the XMLHttpRequest object. This is a new property introduced in Firefox 3.5 and Safari 4. IE8′s XDomainRequest object does not have this capability.

Again, let us assume some JavaScript on a page on http://foo.example wishes to call a resource on http://bar.other and send Cookies with the request, such that the response is cognizant of Cookies the user may have acquired.

var request = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
function callOtherDomain(){
  if(request)
  {
   request.open('GET', url, true);
   request.withCredentials = "true";
   request.onreadystatechange = handler;
   request.send();
  }

Note that withCredentials is false (and NOT set) by default. The header exchange is similar to the case of of a simple GET request, with the exception that now an HTTP Cookie header is sent with the request header. You can see this sample in action here.

jquery 홈페이지에 보면

xhrFields(added 1.5.1)Map

A map of fieldName-fieldValue pairs to set on the native XHR object. For example, you can use it to set withCredentials to true for cross-domain requests if needed.

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

In jQuery 1.5, the withCredentials property was not propagated to the native XHR and thus CORS requests requiring it would ignore this flag. For this reason, we recommend using jQuery 1.5.1+ should you require the use of it. 

 

쿠키, HTTP Auth information을 크로스 도메인으로는  XMLHttpRequest로는 전송할 수 없다고 한다.

XMLHttpRequest Object의 withCredentials 프로퍼티를 설정하여 사용하면된다.

ie8의 XDomainRequest 는 없는 설정이라고 한다.

 

이번엔 ie에서 에러난다. 'No transport' 라는 에러가 뜰거다.

http://stackoverflow.com/questions/9314413/jquery-ajax-cross-domain-remote-server-does-not-work-in-ie8

Try adding this somewhere before the ajax call

jQuery.support.cors = true; 

Without this, the "No transport" error will be thrown by Internet Explorer. The error message itself is rather confusing, but by default cross-domain ajax requests are blocked by IE, but do not appear to be so by other browsers - or at least, Chrome and Firefox will function to that effect.

I shared your pain on this one, historically. Quite confident that it will sort your issue.

 

ie에서 기본으로 크로스 도메인 ajax를 막고 있어서 그렇다고 한다.

CORS(Cross-Origin Resource Sharing )를 true로 설정해야 한다.

###js

<script type="text/javascript">
jQuery.supprt.cors = true;
</script>

이렇게 설정해 주자.

 

최종적으로는 아래와 같이 사용 되어야 한다.

###js

<script type="text/javascript">
    jQuery.supprt.cors = true;

jQuery.ajax({
    type : "GET",
    url : CROSS_DOMAIN_URL,
    xhrFields : {
        withCredentials : true
    },
    data : {symbol: 'ibm', price: '91.42'},
    dataType:"jsonp",
    cache:false, //ie에서 캐시를 잡고 있어서 요청이 잘 안되는경우가 있어서 사용.
    success : function(data){
        //데이터 처리
        alert("Symbol: " + data.symbol + ", Price: " + data.price);
   },
   error : function(xhr, status, error){
       alert(xhr.status);
   }
});

</script>