다음을 통해 공유

JSONP

JSONP 샘플은 WCF REST 서비스에서 JSONP(Padding)를 사용하여 JSON을 지원하는 방법을 보여 줍니다. JSONP는 현재 문서에서 스크립트 태그를 생성하여 도메인 간 스크립트를 호출하는 데 사용되는 규칙입니다. 결과는 지정된 콜백 함수에 반환됩니다. JSONP는 태그와 같은 <script src="http://..." > 태그가 모든 도메인에서 스크립트를 평가할 수 있고 해당 태그에서 검색된 스크립트가 다른 함수가 이미 정의되어 있는 범위 내에서 평가된다는 생각에 기반을 두고 있습니다.

입증합니다

JSONP를 사용한 도메인 간 스크립팅

토론

샘플에는 페이지가 브라우저에서 렌더링된 후 스크립트 블록을 동적으로 추가하는 웹 페이지가 포함되어 있습니다. 이 스크립트 블록은 단일 작업이 GetCustomer있는 WCF REST 서비스를 호출합니다. WCF REST 서비스는 콜백 함수 이름으로 래핑된 고객의 이름과 주소를 반환합니다. WCF REST 서비스가 응답하면 웹 페이지의 콜백 함수가 고객 데이터로 호출되고 콜백 함수는 웹 페이지에 데이터를 표시합니다. 스크립트 태그의 삽입 및 콜백 함수의 실행은 ASP.NET AJAX ScriptManager 컨트롤에 의해 자동으로 처리됩니다. 사용 패턴은 다음 코드와 같이 JSONP를 사용하도록 설정하는 한 줄을 추가하여 모든 ASP.NET AJAX 프록시와 동일합니다.

var proxy = new JsonpAjaxService.CustomerService();
proxy.set_enableJsonp(true);
proxy.GetCustomer(onSuccess, onFail, null);

서비스에서 WebScriptEndpoint를 사용하고, crossDomainScriptAccessEnabled가 true로 설정되어 있기 때문에 웹 페이지에서 WCF REST 서비스를 호출할 수 있습니다. 이러한 구성은 모두 system.serviceModel< 요소 아래의 Web.config 파일에서 >수행됩니다.

<system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
  <standardEndpoints>
    <webScriptEndpoint>
      <standardEndpoint name="" crossDomainScriptAccessEnabled="true"/>
    </webScriptEndpoint>
  </standardEndpoints>
</system.serviceModel>

ScriptManager는 서비스와의 상호 작용을 관리하고 JSONP 액세스를 수동으로 구현하는 복잡성을 숨깁니다. 작업이 crossDomainScriptAccessEnabled로 설정되고 응답 형식이 JSON일 때, WCF 인프라는 요청의 URI에서 콜백 쿼리 문자열 매개 변수를 검사하고 JSON 응답을 해당 콜백 쿼리 문자열 매개 변수 값으로 래핑합니다. 샘플에서 웹 페이지는 다음 URI를 사용하여 WCF REST 서비스를 호출합니다.

http://localhost:33695/CustomerService/GetCustomer?callback=Sys._json0

콜백 쿼리 문자열 매개 변수의 JsonPCallback값이 있으므로 WCF 서비스는 다음 예제와 같이 JSONP 응답을 반환합니다.

Sys._json0({"__type":"Customer:#Microsoft.Samples.Jsonp","Address":"1 Example Way","Name":"Bob"});

이 JSONP 응답에는 웹 페이지에서 요청한 콜백 함수 이름으로 래핑된 JSON 형식의 고객 데이터가 포함됩니다. ScriptManager는 스크립트 태그를 사용하여 이 콜백을 실행하여 도메인 간 요청을 수행한 다음, 결과를 ASP.NET AJAX 프록시의 GetCustomer 작업에 전달된 onSuccess 처리기에 전달합니다.

샘플은 두 ASP.NET 웹 애플리케이션으로 구성됩니다. 하나는 WCF 서비스만 포함하고 다른 하나는 서비스를 호출하는 .aspx 웹 페이지를 포함합니다. 솔루션을 실행할 때 Visual Studio는 서로 다른 포트에 두 웹 사이트를 호스트하여 서비스와 클라이언트가 서로 다른 도메인에 있는 환경을 만듭니다.

이 샘플을 실행하려면

  1. JSONP 샘플에 대한 솔루션을 엽니다.

  2. F5 키를 눌러 브라우저에서 시작 http://localhost:26648/JSONPClientPage.aspx 합니다.

  3. 페이지가 로드되면 "이름" 및 "주소"에 대한 텍스트 입력이 값으로 채워집니다. 이러한 값은 브라우저가 페이지 렌더링을 완료한 후 WCF 서비스에 대한 호출에서 제공되었습니다.

  • Last updated on