Ajax 및 JScript 웹 리소스와 함께 OData 끝점 사용

아티클
07/06/2017

게시 날짜: 2016년 11월

적용 대상: Dynamics CRM 2015

OData 끝점을 사용하면 JavaScript 라이브러리를 사용하여 Microsoft Dynamics CRM 2015 및 Microsoft Dynamics CRM Online 2015 업데이트 데이터와 상호 작용할 수 있습니다.JavaScript 라이브러리를 정의하는 파일을 사용하여 스크립트 웹 리소스를 만듭니다. 그런 다음 라이브러리의 함수를 양식 또는 필드 이벤트 처리가 또는 리본 명령 동작에 연결합니다. 웹 페이지(HTML) 웹 리소스 내에서 다른 JavaScript 라이브러리를 사용할 때와 같이 사용할 수 있습니다.

이 항목의 내용

Ajax

POST를 통해 터널링하는 방법

서버 URL에 액세스

XMLHttpRequest 사용

jQuery 사용

날짜에 대한 작업

Ajax

AJAX(비동기 JavaScript 및 XML)는 대화형 웹 응용 프로그램을 만드는 데 사용되는 웹 개발 기술입니다. 서버 요청은 브라우저에서 XmlHttpRequest 개체를 사용하여 백그라운드에서 만들어집니다. 동기 요청을 보낼 수 있지만 비동기 요청을 전송하는 것이 좋습니다. 비동기 요청에는 JScript 함수 두 개가 필요합니다. 하나는 요청을 보내고 둘째 "콜백" 함수는 응답을 처리하는 데 필요 합니다.

JSON

JSON(JavaScript Object Notation) 형식은 구조화된 데이터를 XML과 동일한 방식으로 직렬화 및 전송하는 데 사용됩니다.XML과 마찬가지로 텍스트 기반이며 사람이 읽을 수 있도록 설계되었습니다. 일반적인 JavaScript 개체를 JSON 형식으로 변환하려면 JSON.stringify 메서드를 사용합니다. JSON의 텍스트는 JavaScript 개체를 정의하므로 eval 메서드를 사용하여 텍스트를 JavaScript 개체로 변환할 수 있습니다. 하지만 이 방법은 보안 취약점을 만듭니다. 대신 JSON.parse 메서드를 사용해야 합니다.

XmlHttpRequest

XmlHttpRequest(XHR이라고도 함)는 요청을 구성하고 보내며 비동기 요청일 경우 콜백 함수를 정의하는 기능을 제공합니다. 서버의 HTTP 응답에는 요청이 성공 했는지 여부를 나타내는 상태 코드가 포함됩니다. 200 범위의 HTTP 상태 코드 값은 성공한 것으로 간주됩니다.

XmlHttpRequest는 응답에 포함되는 데이터의 형식에 대해 서버에 지침을 제공합니다.ODATA 끝점은 ATOM 및 JSON 형식 둘 다를 지원하므로 데이터를 XMLATOM 형식으로 반환되도록 요청할 수 있는 옵션이 있습니다. 하지만 JavaScript 코드를 사용하면JavaScript를 쉽게 사용할 수 있기 때문에 예상되는 일반적인 요청에서 JSON을 사용합니다.

POST를 통해 터널링하는 방법

OData 프로토콜은 MERGE라는 새 동사를 정의할 뿐만 아니라 많이 사용하지 않는 HTTP 동사 PUT 및 DELETE를 사용합니다. 사용하는 라이브러리 지원에 따라 이러한 동사를 사용하는 동안 문제가 발생할 수 있습니다. 이 문제를 해결하는 방법은 POST 동사를 사용하고 원하는 동작으로 X-HTTP-MethodHTTP 헤더를 지정하는 것입니다.setRequestHeader 메서드를 사용하여 XmlHttpRequest에 지정된 동작을 다시 정의합니다.

서버 URL에 액세스

JavaScript에서 ODATA 끝점을 사용하기 시작할 때 가장 먼저 할 일은 URL을 조직 루트 URL로 설정하는 것입니다. 컨텍스트 개체에서 getClientUrl 함수를 사용합니다.

스크립트가 양식 또는 필드 이벤트의 컨텍스트나 리본 명령의 <JavaScriptFunction> (RibbonDiffXml)의 컨텍스트에서 작동하도록 설계된 경우 Xrm.Page.context 개체를 사용하여 getClientUrl을 호출할 수 있습니다.
스크립트가 웹 페이지(HTML) 웹 리소스의 컨텍스트에서 실행될 경우 GetGlobalContext 함수을 사용할 수 있도록 HTML 웹 리소스에서 ClientGlobalContext.js.aspx 페이지에 대한 참조를 포함해야 합니다.

XMLHttpRequest 사용

jQuery는 다양한 용도를 가진 훌륭한 라이브러리입니다. 하지만 jQuery를 사용하는 것은 Microsoft Dynamics 365에 대한 ODATA 끝점을 사용하여 작업을 수행하기 위한 전제 조건은 아닙니다. 응용 프로그램 페이지에서 실행되는 양식 스크립트 또는 명령 스크립트의 jQuery를 사용하지 말고 XmlHttpRequest를 직접 사용하고 jQuery 라이브러리를 로드하지 않도록 합니다.jQuery**$.ajax**는 브라우저에서 사용 가능한 XmlHttpRequest를 사용합니다. 이 개체를 직접 사용하는 것은 $.ajax를 사용하는 것과 다릅니다.XMLHttpRequest를 사용하는 데 이미 익숙한 경우에는 계속 사용해야 합니다. 항상 jQuery를 사용한 경우에는 XMLHttpRequest를 직접 사용해 보십시오.추가 정보:XMLHttpRequest 개체

XmlHttpRequest로 onreadystatechange 이벤트에 대한 이벤트 처리기를 만들고 언제 요청을 완료했는지 검색합니다. 이벤트 처리기에서 반환된 상태 코드를 확인하여 요청의 성공 여부를 확인합니다. 마지막으로 open 및 send 메서드를 사용합니다. 다음 샘플에서는 XmlHttpRequest를 사용하여 새 거래처 레코드를 만듭니다.

var account = {};
    account.Name = "Sample Account";
    var jsonAccount = JSON.stringify(account);

    var createAccountReq = new XMLHttpRequest();
    createAccountReq.open("POST", Xrm.Page.context.getClientUrl() + "/XRMServices/2011/OrganizationData.svc/AccountSet", true);
    createAccountReq.setRequestHeader("Accept", "application/json");
    createAccountReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    createAccountReq.onreadystatechange = function () {
        createAccountReqCallBack(this);
    };
    createAccountReq.send(jsonAccount);

function createAccountReqCallBack(createAccountReq) {
    if (createAccountReq.readyState == 4 /* complete */) {
        createAccountReq.onreadystatechange = null; //avoids memory leaks
        if (createAccountReq.status == 201) {
            //Success
            var newAccount = JSON.parse(createAccountReq.responseText).d;
        }
        else {
            //Failure
            errorHandler(createAccountReq);
        }
    }
};

XMLHttpRequest를 사용하는 추가 예제는 샘플: JavaScript와 함께 OData 끝점을 사용하여 만들기, 검색, 업데이트 및 삭제를 참조하십시오.

jQuery 사용

jQuery는 Microsoft Visual Studio의 웹 응용 프로그램 프로젝트에 포함된 인기 있는 JavaScript 라이브러리입니다.jQuery는 JavaScript를 사용하여 HTML 페이지에서 쿼리하고 작업할 수 있는 광범위한 프레임워크 개체 및 함수를 제공합니다.XMLHttpRequest를 사용하기 위해 jQuery에서는 jQuery.ajax 메서드를 제공합니다.

참고

양식 스크립트 또는 명령에서 jQuery를 사용하지 않는 것이 좋습니다.추가 정보:jQuery 사용.

jQuery 개체는 jQuery.ajax의 짧은 양식이 $.ajax인 $ 문자를 사용하여 참조됩니다.ajax 메서드는 일반적으로 명령 구문으로 사용되며 개체가 인스턴스화되는 대로 요청이 전송됩니다. 다음 샘플에서는 새 거래처 레코드를 만듭니다.

var account = {};
account.Name = "Sample Account";
var jsonAccount = window.JSON.stringify(account);
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    datatype: "json",
    url: Xrm.Page.context.getClientUrl() + "/XRMServices/2011/OrganizationData.svc/AccountSet",
    data: jsonAccount,
    beforeSend: function (XMLHttpRequest) {
        //Specifying this header ensures that the results will be returned as JSON.
        XMLHttpRequest.setRequestHeader("Accept", "application/json");
    },
    success: function (data, textStatus, XmlHttpRequest) {
        account = data.d;
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        errorHandler(XMLHttpRequest, textStatus, errorThrown);
    }
});

다음 표에는 Microsoft Dynamics 365에 대한 ODATA 끝점을 사용하여 HTTP 요청 및 응답을 처리하기 위해 알아야 하는 속성이 나와 있습니다.

속성 이름	유형	댓글
type	string	데이터를 검색할 때는 GET을 사용하고 다른 모든 작업의 경우에는 POST를 사용합니다.추가 정보:요청 헤더를 다른 HTTP 동작으로 명시적으로 설정
contentType	string	서버에 보낸 콘텐츠 유형을 지정합니다. JSON 형식으로 데이터를 보낼 경우 application/json; charset=utf-8를 사용합니다.
dataType	string	서버에서 반환이 예상되는 데이터 유형입니다.json 사용 > [!NOTE] > 이 속성을 설정하기만 하면 충분할 수 있습니다.추가 정보:JSON을 허용하도록 명시적으로 요청 헤더 설정
data	object	만들기 또는 업데이트 작업의 경우 JSON 개체의 값으로 설정합니다.
url	string	수행하는 동작에 적합한 ODATA 끝점 URL입니다.
beforeSend	function	XMLHttpRequest 개체를 보내기 전에 수정할 수 있는 함수입니다.
success	function	요청에 성공할 경우 콜백 함수입니다.추가 정보:프로세스 결과
error	function	요청이 실패할 경우 호출되는 함수입니다.추가 정보:오류 처리

자세한 내용은 샘플: JavaScript 및 jQuery와 함께 OData 끝점을 사용하여 만들기, 검색, 업데이트 및 삭제을 참조하십시오.

JSON을 허용하도록 명시적으로 요청 헤더 설정

JSON 형식의 결과를 기대할 경우 dataType 속성을 설정하면 작동하지 않을 수 있습니다. 데이터를 JSON으로 반환하도록 beforeSend 속성을 사용하여 명시적으로 XMLHttpRequest에서 헤더를 설정할 수 있습니다. 일반적으로 다음 예제와 같이 익명 함수를 사용하여 수행됩니다.

beforeSend: function (XMLHttpRequest) {
   //Specifying this header ensures that the results will be returned as JSON.
   XMLHttpRequest.setRequestHeader("Accept", "application/json");}

지정하면 XMLHttpRequest.responseText의 오류는 XML 형식 대신 JSON 형식이 됩니다.

팁

데이터가 반환되지 않을 것으로 예상하더라도 결과가 항상 JSON을 반환하도록 지정하면 오류 처리를 단순화합니다.추가 정보:오류 처리

요청 헤더를 다른 HTTP 동작으로 명시적으로 설정

POST를 통해 터널링하는 방법에서 설명된 대로 POST 또는 GET이 아닌 HTTP 동작이 필요한 동작을 수행할 경우 다른 동작을 수행하도록 POST 및 beforeSend 속성을 사용하여 XMLHttpRequest에서 헤더를 명시적으로 설정합니다. 일반적으로 다음 예제와 같이 익명 함수를 사용하여 수행됩니다.

beforeSend: function (XMLHttpRequest) {
   //Specify the HTTP method DELETE to perform a delete operation.
   XMLHttpRequest.setRequestHeader("X-HTTP-Method", "DELETE");
}

오류 처리

요청에 성공하면 $.ajax는 다음 인수 세 개를 오류 속성의 함수 집합에 전달합니다.

XMLHttpRequest
XMLHttpRequest 개체.
textStatus
발생한 오류 유형을 설명하는 문자열. 가능한 값은 다음과 같습니다.
- null
- timeout
- error
- notmodified
- parsererror
errorThrown
선택적인 예외 개체.

다음 샘플에서는 오류를 관리하는 중앙 함수에 이러한 인수를 전달하는 방법을 보여 줍니다.

error: function (XMLHttpRequest, textStatus, errorThrown) {
   errorHandler(XMLHttpRequest, textStatus, errorThrown);
}

다음 샘플에서는 오류 메시지를 캡처하고 showMessage 함수를 사용하여 결과를 표시하는 간단한 함수입니다.

참고

이 함수는 모든 오류 정보가 JSON 형식으로 반환될 것이라고 예상합니다.$.ajax 메서드가 JSON을 사용하여 결과를 반환하도록 구성되어 있지 않으면 XMLHttpRequest.responseText는 XML이 됩니다.

function errorHandler(XMLHttpRequest, textStatus, errorThrown)
{ showMessage("Error : " + textStatus + ": " + JSON.parse(XMLHttpRequest.responseText).error.message.value); }

프로세스 결과

POST 또는 GET 작업을 수행할 경우 데이터가 반환될 것을 예상할 수 있습니다. 해당 결과를 JSON 형식으로 반환하도록 지정한 경우 결과는 반환된 데이터 개체의 d 속성에 있습니다. 고유 식별자를 사용하여 레코드를 만들거나 검색할 때 d는 레코드의 데이터를 나타냅니다. 다른 모든 경우에 d는 배열입니다.

다음 샘플에서는 여러 거래처 레코드를 반환하는 쿼리 결과 프로세스를 보여 줍니다.

success: function (data, textStatus, XmlHttpRequest) {
   var accounts = data.d;
   for (var i in accounts) {   showMessage(accounts[i].Name);
   }}

날짜에 대한 작업

수행해야 하는 날짜와 관련된 작업이 네 가지 있습니다.

검색한 데이터 구문 분석
날짜 값 표시
날짜 값 업데이트
쿼리에서 필터 조건으로 날짜를 설정합니다.

검색한 데이터 구문 분석

ODATA 끝점을 사용하여 레코드를 검색할 때 날짜 값은 “\/Date(<ticks>)\/” 형식을 사용하는 문자열로 반환됩니다. 여기서 <ticks>는 1970년 1월 1일 자정부터의 밀리초 수입니다. 예: "\/Date(1311170400000)\/".Microsoft Dynamics 365에서 반환된 모든 값은 오프셋 정보가 포함되지 않도록 UTC(협정 세계시) 값을 나타냅니다.

ODATA 끝점을 사용하여 반환된 레코드의 날짜를 구문 분석하기 위해 사용할 수 있는 방법은 다음과 같이 두 가지입니다.

JSON.parse 메서드로 reviver 함수 사용
String.replace를 사용하여 문자열에서 날짜 값을 생성합니다.

JSON.parse 메서드로 reviver 함수 사용

JSON.parse 메서드는 MSDN의 JSON.parse 메서드 설명서에 설명된 대로 선택적 reviver 인수를 지원합니다. 다음은 정규식에 정의된 패턴과 일치하는 문자열 값을 Date 개체로 변환하는 예제입니다.

var jsontext = '{ "hiredate": "\/Date(1311170400000)\/", "birthdate": "\/Date(-158342400000)\/" }';
var dates = JSON.parse(jsontext, dateReviver);
var string = dates.hiredate.toUTCString();
// The value of string is "Wed, 20 Jul 2011 14:00:00 UTC"

function dateReviver(key, value) {
 var a;
 if (typeof value === 'string') {
  a = /Date\(([-+]?\d+)\)/.exec(value);
  if (a) {
   return new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
  }
 }
 return value;
};

참고

이 코드에서는 날짜 값이 항상 UTC 데이터 값이고 오프셋 정보는 포함하지 않는다고 가정합니다.

String.replace를 사용하여 문자열에서 날짜 값을 생성합니다.

JSON.parse 메서드로 reviver 인수를 사용하지 않는 경우 다음 예제에서는 문자열에서 Date 값을 생성할 수 있는 방법을 보여 줍니다.

var dateValue = new Date(parseInt(stringDateValue.replace("/Date(", "").replace(")/", ""), 10));

날짜 값 표시

문자열 날짜 값을 Date 개체로 변환한 후 다양한 JavaScript 메서드를 사용하거나 고유한 메서드를 사용하여 사용자 인터페이스에서 날짜를 문자열로 표시합니다.JavaScriptDate 개체는 UTC 인식이므로 toString 또는 toLocaleString과 같은 메서드를 사용하여 사용자 인터페이스에 표시된 날짜는 사용자의 운영 체제의 표준 시간대 설정을 반영합니다.

하지만 사용자의 운영 체제 표준 시간대 설정에 의존하지 않는 응용 프로그램의 값은 Microsoft Dynamics 365에 표시된 동일한 값과 다를 수 있습니다. 사용자의 현재 운영 체제 표준 시간대 기본 설정이 Microsoft Dynamics 365에 저장된 표준 시간대 기본 설정과 일치하지 않을 경우 이러한 값은 다릅니다.Microsoft Dynamics 365에서는 toString과 같은 표준 JavaScript 날짜 함수를 사용하여 적용되지 않는 개인 설정 프레젠테이션 옵션을 설정할 수도 있습니다.

표시된 날짜와 시간 값을 Microsoft Dynamics 365에 표시된 값과 일치하도록 조정하려면 UserSettings 엔터티 및 TimeZoneDefinition 및 TimeZoneRule과 같은 엔터티에 저장된 데이터를 쿼리하여 사용자의 기본 설정과 일치하는 날짜를 표시하도록 함수를 만들 수 있습니다.Microsoft Dynamics 365에서는 이러한 동작을 수행하는 함수를 제공하지 않습니다.

날짜 값 업데이트

setMinutes 또는 setHours와 같은 표준 집합 메서드를 사용하여 JavaScript 날짜 값을 변경하면 이러한 변경 내용은 사용자의 현지 시간에 있습니다. 레코드를 저장할 때 실제 UTC 값은 직렬화되고 Microsoft Dynamics 365에 다시 저장됩니다. 날짜를 UTC 값으로 변환하기 위해 어떤 작업도 수행할 필요가 없습니다.

Date가 직렬화되면 형식은 데이터를 검색할 때 사용한 형식과 다릅니다.검색한 데이터 구문 분석에서 설명한 것처럼 날짜는 "\/Date(1311179400000)\/" 형식을 사용하는 문자열로 검색됩니다. 서버로 다시 전달되는 날짜 값에 대해 JSON.stringify의 결과를 검사하면 형식이 "2013-07-20T16:30:00Z".입니다.

쿼리에서 필터 조건으로 날짜를 설정합니다.

$filter 시스템 쿼리 옵션으로 날짜 값을 사용할 경우 UTC 날짜를 사용해야 합니다.JavaScriptDate 개체를 필터에 예상되는 형식으로 변환하려면 다음 예제와 같은 함수를 사용하여 날짜를 처리해야 합니다. 결과는 datetime'2010-09-28T18:21:46:594Z' 형식과 일치하는 문자열입니다.

function getODataUTCDateFilter(date) {

 var monthString;
 var rawMonth = (date.getUTCMonth()+1).toString();
 if (rawMonth.length == 1) {
  monthString = "0" + rawMonth;
 }
 else
 { monthString = rawMonth; }

 var dateString;
 var rawDate = date.getUTCDate().toString();
 if (rawDate.length == 1) {
  dateString = "0" + rawDate;
 }
 else
 { dateString = rawDate; }


 var DateFilter = "datetime\'";
 DateFilter += date.getUTCFullYear() + "-";
 DateFilter += monthString + "-";
 DateFilter += dateString;
 DateFilter += "T" + date.getUTCHours() + ":";
 DateFilter += date.getUTCMinutes() + ":";
 DateFilter += date.getUTCSeconds() + ":";
 DateFilter += date.getUTCMilliseconds();
 DateFilter += "Z\'";
 return DateFilter;
}

참고 항목

웹 리소스와 함께 OData 끝점 사용
OData endpoint Http status codes
Microsoft Dynamics CRM 2015용 JavaScript 라이브러리
스크립트(JScript) 웹 리소스
양식 및 필드 이벤트로 함수 연결
jQuery.ajax 메서드
XMLHttpRequest 개체
기술 문서: ODATA 끝점과 함께 옵션 집합 옵션 사용 - JScript

다음을 통해 공유

Ajax 및 JScript 웹 리소스와 함께 OData 끝점 사용

이 항목의 내용

Ajax

JSON

XmlHttpRequest

POST를 통해 터널링하는 방법

서버 URL에 액세스

XMLHttpRequest 사용

jQuery 사용

JSON을 허용하도록 명시적으로 요청 헤더 설정

요청 헤더를 다른 HTTP 동작으로 명시적으로 설정

오류 처리

프로세스 결과

날짜에 대한 작업

검색한 데이터 구문 분석

JSON.parse 메서드로 reviver 함수 사용

String.replace를 사용하여 문자열에서 날짜 값을 생성합니다.

날짜 값 표시

날짜 값 업데이트

쿼리에서 필터 조건으로 날짜를 설정합니다.

참고 항목

추가 리소스