ASP.NET 지원 음성 열
XMLHTTP를 사용하여 동적 페이지 업데이트
필요에 따라 이 열을 사용자 지정하기 위해 관심 있는 항목 및 향후 기술 자료 문서 및 지원 음성 열에서 해결하려는 문제에 대한 아이디어를 제출할 수 있습니다. 요청 양식을 사용하여 아이디어와 피드백을 제출할 수 있습니다. 이 열 아래쪽에 폼에 대한 링크도 있습니다.
소개
웹 애플리케이션 사용성을 연구하는 가장 좋아하는 방법 중 하나는 제 아내가 웹 사이트를 탐색하는 것을 보는 것입니다. 그녀는 인터넷을 매우 잘 사용할 수 있지만 모든 작업을 하는 저수준 기술 측면("지루한 것"이라고 하는 것)에 대해 거의 알지 못합니다.
최근 저녁에 저는 제 아내가 큰 남자 중 한 명으로부터 전자 상거래 응용 프로그램을 사용하게 하는지 보던 중입니다. 여러 드롭다운을 사용하여 제품 목록으로 드릴다운하고 각 드롭다운은 이전에 선택한 항목에서 벗어날 수 있습니다. 각 드롭다운에서 항목을 클릭하면 페이지가 다시 게시하여 다음 드롭다운에 대한 데이터를 얻습니다. 후방으로 인해 시간이 오래 오래 왔다는 인상을 던지기 때문에 이 경험은 안타겼습니다.
다시 게시하는 대신 XMLHTTP만 사용하여 데이터를 검색하는 경우 애플리케이션 개발자가 경험한 좌절 수준이 쉽게 해소될 수 있습니다. 이번 달의 열은 이 정도입니다. 게시를 다시 수행하지 않고 XMLHTTP를 사용하여 웹 페이지의 일부를 Microsoft ASP.NET 웹 서비스의 데이터로 업데이트하는 방법을 보여 드려요. 정말 멋지겠어요! 나를 믿으세요.
일반 개요
XMLHTTP는 클라이언트에서 웹 서버로 요청을 보내고 XML 데이터 섬을 반환하여 작동합니다. 수신되는 XML의 구조에 따라 XSLT 또는 XML DOM을 사용하여 조작하고 페이지의 일부를 해당 데이터에 바인딩할 수 있습니다. 이는 매우 강력한 기술입니다.
NoteMicrosoft는 Internet Explorer 웹 서비스에 대한 비동기 호출을 빠르고 ASP.NET 웹 서비스 동작을 제공합니다. 그러나 이 동작은 지원되지 않습니다. 페이지를 비동기적으로 업데이트하는 가장 좋은 방법은 없습니다. 대신 XMLHTTP를 사용하세요!
이 열에서 작업할 예제에서는 XMLHTTP를 통해 ASP.NET 웹 서비스를 호출합니다. 웹 서비스는 로컬 웹 사이트에서 Northwind 데이터베이스를 SQL Server 데이터 세트를 XML diffgram의 형태로 클라이언트에 반환합니다. 그런 다음 XML DOM을 사용하여 XML 데이터를 구문 분석하고 내 페이지의 일부를 동적으로 업데이트합니다. 이 모든 것이 게시물을 다시 게시하지 않고 수행됩니다.
웹 서비스
사용할 웹 서비스 이름은 DynaProducts입니다. C#으로 ASP.NET 다음 세 가지 메서드를 포함하는 기본 웹 서비스입니다.
-
GetCategories – 범주 테이블의 모든 범주를 포함하는 데이터 세트를 반환합니다.
-
GetProducts – 메서드에 전달되는 범주의 모든 제품을 포함하는 데이터 세트를 반환합니다.
-
GetProductDetails – ProductID가 메서드에 전달된 제품에 대한 세부 정보가 포함된 데이터 세트를 반환합니다.
HTML 페이지
이 샘플에 대해 가장 먼저 할 수 있는 점은 업데이트하는 페이지가 ASP.NET 웹 서비스가 ASP.NET 아닙니다. 일반 HTML 페이지일 수 있습니다. 그러나 페이지에 상당히 많은 양의 클라이언트 쪽 JavaScript를 추가했습니다. 웹 서비스에 대한 호출을 만드는 스크립트입니다.
HTML 페이지에서 코드의 첫 번째 코드 코드를 살펴보고자 합니다.
var objHttp;
var objXmlDoc;
function getDataFromWS(methodName, dataSetName, wsParamValue, wsParamName)
{
// create the XML object
objXmlDoc = new ActiveXObject("Msxml2.DOMDocument");
if (objXmlDoc == null)
{
alert("Unable to create DOM document!");
} else {
// create an XmlHttp instance
objHttp = new ActiveXObject("Microsoft.XMLHTTP");
// Create the SOAP Envelope
strEnvelope = "<soap:Envelope xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" +
" xsd=\"http://www.w3.org/2001/XMLSchema\"" +
" soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
" <soap:Body>" +
" <" + methodName + " xmlns=\"http://jimcoaddins.com/DynaProducts\">" +
" </" + methodName + ">" +
" </soap:Body>" +
"</soap:Envelope>";
// Set up the post
objHttp.onreadystatechange = function(){
// a readyState of 4 means we're ready to use the data returned by XMLHTTP
if (objHttp.readyState == 4)
{
// get the return envelope
var szResponse = objHttp.responseText;
// load the return into an XML data island
objXmlDoc.loadXML(szResponse);
if (objXmlDoc.parseError.errorCode != 0) {
var xmlErr = objXmlDoc.parseError;
alert("You have error " + xmlErr.reason);
} else {
switch(dataSetName)
{
case "CategoriesDS":
processCategory();
break;
case "ProductsDS":
processProducts();
break;
case "ProductDetailDS":
processProductDetails();
break;
}
}
}
}
var szUrl;
szUrl = "http://dadatop/wsXmlHttp/DynaProducts.asmx/" + methodName;
if (wsParamValue != null)
{
szUrl += "?" + wsParamName + "=" + wsParamValue;
}
// send the POST to the Web service
objHttp.open("POST", szUrl, true);
objHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
objHttp.send(strEnvelope);
}
}
이 코드는 페이지에서 가장 큰 코드 조각으로, 진행된 내용을 이해하기 위해 자세히 설명하고자 합니다.
이 스크립트 블록의 맨 위에 objHttp 및 objXmlDoc의 두 변수를 생성했습니다. 다음은 XMLHTTP 개체 및 내 XML DOM 개체에 사용할 변수입니다. 바로 그 직후 getDataFromWS 함수에 대한 함수 정의입니다. 웹 서비스에 대한 클라이언트 쪽 호출을 담당하는 함수입니다. 다음 4개의 인수를 사용하게 됩니다. 이 중 두 인수는 선택 사항입니다.
-
methodName – 웹 서비스에서 호출할 메서드의 이름입니다.
-
dataSetName – 웹 서비스에서 반환되는 DataSet의 이름입니다.
-
wsParamValue – 해당하는 경우 웹 서비스에 전달되는 매개 변수의 값입니다. (선택 사항)
-
wsParamName – 해당하는 경우 웹 서비스에 전달되는 매개 변수의 이름입니다. (선택 사항)
getDataFromWS 함수를 부분으로 나타 내고 각각에 대해 설명해보죠. 첫 번째는 다음과 같습니다.
// create the XML object
objXmlDoc = new ActiveXObject("Msxml2.DOMDocument");
if (objXmlDoc == null)
{
alert("Unable to create DOM document!");
} else {
// create an XMLHTTP instance
objHttp = new ActiveXObject("Microsoft.XMLHTTP");
이 코드 블록은 XMLHTTP 개체 및 XML 문서 개체를 만듭니다. 다음으로 SOAP 봉투를 만들기 시작됩니다.
// Create the SOAP Envelope
strEnvelope = "<soap:Envelope xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" +
" xsd=\"http://www.w3.org/2001/XMLSchema\"" +
" soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
" <soap:Body>" +
" <" + methodName + " xmlns=\"http://jimcoaddins.com/DynaProducts\">" +
" </" + methodName + ">" +
" </soap:Body>" +
"</soap:Envelope>";
이 코드에서는 웹 서비스에 전달할 수 있도록 문자열 변수에 SOAP 봉투를 할당합니다. 실제로 웹 서비스에 대한 SOAP 봉투의 서식을 지정하는 방법을 쉽게 검색할 수 있습니다. 웹 서비스를 찾아보고 메서드 중 하나를 클릭하여 해당 메서드에 대한 SOAP 봉투를 볼 수 있습니다. 예를 들어, 이 문서에 대해 만든 wsXMLHTTP 웹 서비스의 GetCategories 메서드를 검색할 때 
됩니다. 이 문서에 제시된 예제에서는 HTTP POST를 사용하게 될 것입니다.
지금까지는 좋았어요. 이제 코드의 다음 섹션을 살펴보고자 합니다.
// Set up the post
objHttp.onreadystatechange = function(){
// a readyState of 4means we're ready to use thedata returned byXMLHTTP
if (objHttp.readyState == 4)
{
// getthe return envelope
varszResponse= objHttp.responseText;
// loadthe return into an XML data island
objXmlDoc.loadXML(szResponse);
if (objXmlDoc.parseError.errorCode != 0) {
var xmlErr =objXmlDoc.parseError;
alert("You have error " + xmlErr.reason);
}
else
{
switch(dataSetName)
{
case "CategoriesDS":
processCategory();
break;
case "ProductsDS":
processProducts();
break;
case "ProductDetailDS":
processProductDetails();
break;
}
}
XMLHTTP를 통해 요청이 진행되면 XMLHTTP 개체는 readyState 속성을 사용하여 요청의 상태를 추적합니다. 웹 서비스에서 모든 데이터를 다시 수신하면 readyState 속성이 값 4로 변경됩니다. XMLHTTP 개체에 대한 onreadystatechange 속성을 사용하면 readyState 속성이 변경될 때 호출되는 콜백 함수를 설정할 수 있습니다. 데이터가 전체적으로 수신될 수 있도록 하여 준비가 될 때까지 해당 데이터에 대한 행동을 유지할 수 있습니다.
모든 데이터가 수신된 후 responseText 속성을 사용하여 응답이 있는 XML 데이터 섬을 생성합니다. 알고 있을 것입니다. 웹 서비스의 응답은 XML 형식입니다. 이 경우 Microsoft ADO.NET DataSet을 반환합니다.
이 코드 블록의 다음 섹션에서는 switch 문을 사용하여 웹 서비스에서 반환되는 DataSet의 이름을 기반으로 적절한 함수를 호출합니다. 나중에 해당 함수에 대한 코드에 대해 자세히 설명할 것입니다.
이제 실제로 XMLHTTP 요청을 수행하는 코드를 살펴보고자 합니다.
var szUrl;
szUrl = "http://dadatop/wsXmlHttp/DynaProducts.asmx/" + methodName;
if (wsParamValue != null)
{
szUrl += "?" + wsParamName + "=" + wsParamValue;
}
// send the POST to the Web service
objHttp.open("POST", szUrl, true);
objHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
objHttp.send(strEnvelope);
변수 szUrl에는 명확성을 위해 웹 서비스를 호출하는 데 사용되는 URL이 포함되어 있습니다. 그런 다음 QueryString 값으로 전달되는 모든 매개 변수에 대해 처리되는 if 문이 있습니다. 사용자 환경에서 SOAP 봉투에 매개 변수를 추가할 수 있습니다. 어느 쪽이든 괜찮습니다.
XMLHTTP 개체의 열린 메서드를 다음으로 호출합니다. 열려 있는 메서드에 처음 세 개의 인수를 사용했습니다. 호출이 비동기인지 여부를 지정하는 메서드, URL 및 부울 값입니다.
중요 현재와 같은 비동기 호출을 만드는 경우 onreadystatechanged 속성을 통해 콜백 함수를 설정해야 합니다.
content-type에 대한 요청 헤더를 설정한 후 앞에서 입력한 문자열 변수를 사용하여 요청을 SOAP 봉투로 전송합니다.
이제 XMLHTTP 요청을 만드는 모든 코드를 처리했습니다. 이제 브라우저에서 인터페이스를 처리하고 웹 서비스 호출의 응답을 처리하는 코드를 살펴보습니다.
먼저 페이지가 처음 로드될 때 호출되는 함수를 살펴보고자 합니다.
function getCategories()
{
var func = "getDataFromWS('GetCategories', 'CategoriesDS')";
document.all.lblCategoryDropdown.innerText =
"Please wait while data is retrieved...";
window.setTimeout(func, 1);
}
이 함수에서 가장 먼저 하는 일은 getDataFromWS에 대한 함수 서명을 저장하는 변수를 만드는 것입니다. getDataFromWS 함수를 호출하기 위해 이 함수의 끝에 window.setTimeout을 호출하기 때문에 이 작업을 수행 합니다. 이 방법의 목적은 웹 서비스 호출이 완료될 때까지 기다리는 동안 사용자에게 상태를 표시할 수 있도록 하는 것입니다. 데이터가 검색되고 있는 것을 나타내는 메시지를 표시하기 위해 DIV의 innerText를 변경합니다. 그런 다음 window.setTimeout 호출을 통해 getDataFromWS 함수를 예약하고 1밀리초에서 실행됩니다.
웹 서비스 응답 처리
앞에서 onreadystatechanged 속성을 사용하여 콜백 함수를 구성했습니다. 또한 콜백 함수에는 DataSet 이름에 따라 특정 함수를 호출하는 switch 문이 포함되어 있습니다. 이 경우 DataSet 이름은 CategoriesDS입니다. 따라서 processCategory 함수는 콜백 함수에서 호출됩니다. XML DOM을 사용하여 웹 서비스에서 응답을 구문 분석하는 방법을 살펴보는 함수를 살펴보고자 합니다.
function processCategory()
{
// get an XML data island with the category data
objNodeList = objXmlDoc.getElementsByTagName("Categories");
// add default value to the drop-down
document.forms[0].drpCategory.options[0] = new Option("Select a Category", 0);
// walk through the nodeList and populate the drop-down
for (var i = 0; i < objNodeList.length; i++)
{
var dataNodeList;
var textNode;
var valueNode;
dataNodeList = objNodeList[i].childNodes;
valueNode = dataNodeList.item(0);
textNode = dataNodeList.item(1);
document.forms[0].drpCategory.options[i + 1] =
new Option(textNode.text, valueNode.text);
document.all.lblCategoryDropdown.innerText = "Select a Category:";
document.forms[0].drpCategory.style.visibility = "visible";
}
}
getDataFromWS 함수는 응답에서 objXmlDoc 개체로 XML을 로드했습니다. processCategory 함수에서 해당 XML을 사용하여 구문 분석하여 범주 드롭다운을 채우고 있습니다.
가장 먼저 XML 응답의 일부를 사용하여 IXMLDOMNodeList 개체를 만드는 것입니다. 웹 서비스 호출에서 반환하는 데이터 세트는 diffgram으로 반환됩니다. 이 응답의 유일한 부분은 데이터 세트에 삽입한 DataTable의 데이터뿐입니다. DataTable이 포함된 XML 블록에서 IXMLDOMNodeList 개체를 만들어 이 개체에 액세스합니다.
웹 서비스에 대한 코드를 보면 범주라는 이름의 DataTable을 만들고 데이터 세트에 추가하는 것이 볼 수 있습니다. XML이 웹 서비스에서 반환되는 경우 DataSet은 <CategoriesDS> 블록 내에 포함하며, DataTable의 각 행은 아래 XML 파일에 표시된 <범주> 블록 내에 포함되어 있습니다.
다음 파일은 Microsoft 다운로드 센터에서 다운로드할 수 있습니다.
다운로드합니다.
119591 Microsoft에서 바이러스에 대해 이 파일을 검사한 온라인 서비스에서 Microsoft 지원
파일을 얻는 방법 Microsoft는 파일이 게시된 날짜에 사용할 수 있는 최신 바이러스 감지 소프트웨어를 사용했습니다. 이 파일은 해당 파일을 무단으로 변경할 수 없는 보안이 향상된 서버에 보관됩니다.
해당 DataTable이 포함된 XML 블록을 얻은 경우 다음 코드를 사용 합니다.
objNodeList = objXmlDoc.getElementsByTagName("Categories");그러면 노드의 각 범주가 포함된 IXMLDOMNodeList <> 반환됩니다. 그런 다음 for 루프를 사용하여 해당 목록을 반복합니다.
// walk through the nodeList and populate the drop-down
for (var i = 0; i < objNodeList.length; i++)
{
var dataNodeList;
var textNode;
var valueNode;
dataNodeList = objNodeList[i].childNodes;
valueNode = dataNodeList.item(0);
textNode = dataNodeList.item(1);
document.forms[0].drpCategory.options[i + 1] =
new Option(textNode.text, valueNode.text);
document.all.lblCategoryDropdown.innerText = "Select a Category:";
document.forms[0].drpCategory.style.visibility = "visible";
}
각 <범주> 노드에는 <ID> 노드 및 <CategoryName> 노드가 있습니다. 따라서 가장 먼저 해야 할 일은 새 IXMLDOMNodeList를 만들고 현재 <범주 노드의 자식> 채우는 것입니다.
dataNodeList = objNodeList[i].childNodes;
그런 다음 항목 메서드를 사용하여 드롭다운을 채우는 데 필요한 두 노드에 모두 액세스합니다. 첫 번째 노드는 데이터베이스의 CategoryID 필드를 포함하며, 두 번째 노드에는 데이터베이스의 CategoryName 필드가 포함됩니다. 새 Option 개체를 만들고, 텍스트를 CategoryName으로 설정하고, 값을 CategoryID로 설정하고, drpCategory 드롭다운에 추가합니다. 나머지 함수에 사용되는 코드는 동일한 메서드를 사용하여 XML 응답에서 필요한 데이터를 끌어오고 페이지의 일부를 채우는 데 사용합니다.
여기서는 소량의 데이터를 처리하고 있습니다. DOM을 사용하는 것은 필요한 데이터를 끌어오는 좋은 방법입니다. 많은 양의 데이터를 처리한 경우 대신 XSLT를 사용할 수 있습니다.
모든 작업을 하는 방법
이제 이 모든 작업의 작동 방식에 대한 자세한 내용을 설명했습니다. 이제 포함된 샘플 파일을 사용하여 직접 작동하는지 볼 수 있는 방법을 설명해 봐야 합니다.
웹 서비스 배포
웹 ASP.NET 배포하기 위해 연결된 웹 서비스 샘플을 웹 서버의 루트에 풀면 됩니다. 그런 다음 DynaProducts.asmx에 대한 코드를 열고 연결 문자열을 변경해야 합니다. 최소한 SA 암호를 입력해야 합니다. 변경한 후 웹 서비스를 다시컴컴합니다.
HTML 파일 배포
HTML 파일에는 웹 서비스에 대한 URL을 포함하는 szUrl이라는 변수가 포함되어 있습니다. 함수 아래쪽의 getDataFromWS 함수에서 이 변수를 찾을 수 있습니다. 위에서 배포한 웹 서비스의 URL로 변경해야 합니다.
웹 서비스 및 HTML 파일을 모두 배포한 후 HTML 파일을 찾아서 탐색합니다. 로드하면 범주 드롭다운이 웹 서비스에 대한 첫 번째 XMLHTTP 요청으로 채워질 것입니다. 채워진 후 범주를 선택하여 제품 드롭다운을 채우는 다음 XMLHTTP 요청을 시작합니다. 제품 드롭다운에서 제품을 선택하면 해당 제품에 대한 데이터가 테이블에 채워질 것입니다.
이러한 XMLHTTP 요청 중에 페이지가 다시 게시되지 않습니다. XMLHTTP 요청의 가장 매력적입니다. 큰 페이지에서 이 일을 수행한 경우 페이지에서 사용자에 대해 "깜박임"을 표시하지 않고 스크롤 위치도 유지 관리했습니다. 물어보면 매우 강력한 기능을 사용하게 됐습니다.
한 가지 더, 이 문서에서는 XMLHTTP를 사용하여 웹 서비스를 쿼리했습니다. ASPX 페이지 또는 ASP 페이지에 대한 요청을 하는 데 쉽게 사용할 수 있습니다. 이 기술을 사용할 수 있는 방법에 대한 가능성은 무한합니다. 향후 웹 애플리케이션 개발에서 XMLHTTP가 유용하게 사용할 수 있도록 하겠습니다.
항상 그처럼 질문하기 양식을 사용하여 향후 열 또는 Microsoft 기술 자료에서 해결하려는 항목에 대한 아이디어를 자유롭게 제출할 수 있습니다.
