XMLHTTP를 사용 하 여 동적 페이지 업데이트

ASP.NET Support Voice 칼럼

XMLHTTP를 사용 하 여 동적 페이지 업데이트

이 칼럼의 필요에 맞게 다루었으면 보려고 하는 문제와 관심 있는 항목에 대 한 아이디어를 향후 기술 자료 문서 및 Support Voice 칼럼을 초대 하려고 합니다. 의견이 나 요청에 대해이 양식을 사용 하 여 피드백을 제출할 수 있습니다. 이 칼럼의 맨 아래에 폼에 대 한 링크가 있습니다.

소개

제 와이프의 웹 사이트 탐색 내 즐겨 찾는 웹 응용 프로그램의 유용성 연구 방법 중 하나입니다. 그녀가 수 인터넷 나름으로 꽤 잘 하지만 낮은 수준에 대해서는 거의 알고 (어떤이 라 부르는 "지루한 것")는 기술적 측면을 모두 작동 하도록 합니다.



저녁에 내가 제 와이프가 큰 소년 중 하나에서 전자 상거래 응용 프로그램을 살펴보고 있습니다. 채워지고 있 었 드롭다운들은 이전 선택 영역이 여러 드롭다운을 사용 하 여 나열 하는 제품으로. 각 드롭다운에서 항목을 선택한 순간 페이지 다시 게시 드롭다운 목록에서 다음 데이터를 가져옵니다. 그녀의은 포스트백을 사용 하 여 때문에 시간이 걸린다는 경험 그녀에 대 한 불편 함을 느끼게 되었습니다.



겪은 좌절 수준 수 쉽게 사라졌을 것 응용 프로그램의 개발자가만 다시 게시 하는 대신 데이터를 검색 하려면 XMLHTTP 사용 합니다. 이번이 달이 칼럼의 내용입니다. XMLHTTP를 사용 하 여 다시 게시를 수행 하지 않고도 Microsoft ASP.NET 웹 서비스의 데이터로 웹 페이지의 일부를 업데이트 하는 방법을 살펴보겠습니다. 이 거 정말 멋진! 나를 믿어요.

일반 개요

XMLHTTP는 클라이언트로부터 웹 서버로 요청을 보내는 하 고 XML 데이터 아일랜드를 반환 하 여 작동 합니다. 받은 XML의 구조에 따라 XSLT 또는 XML DOM을 조작 하 고 페이지의 부분을 데이터 바인딩할 사용할 수 있습니다. 이것은 매우 강력한 기술입니다.

참고: Microsoft에서는 쉽고 빠르게 ASP.NET 웹 서비스에 대 한 비동기 호출을 사용 하는 Internet Explorer 대 한 웹 서비스 동작을 제공 합니다. 하지만이 동작은 지원 되지 않습니다 및 페이지를 비동기적으로 업데이트 하는 가장 좋은 방법은 아닙니다. XMLHTTP를 대신 사용 해야!


이 칼럼을 수행 합니다 예제에서는 XMLHTTP 통해 ASP.NET 웹 서비스에 웹 서비스 호출을 세 바다가 될 것입니다. 웹 서비스는 로컬 SQL Server Northwind 데이터베이스를 쿼리하여 및 클라이언트는 XML diffgram 형식의 데이터 집합을 반환 합니다. XML DOM을 사용 하 여 XML 데이터를 구문 분석 하 고 내 페이지의 일부를 동적으로 업데이트 됩니다. 이 모든 다시 게시 하지 않고 수행 됩니다.

웹 서비스

웹 서비스를 사용할 것을 DynaProducts 라고 합니다. C#으로 쓰여진 다음 세 가지 메서드를 포함 하 고 기본 ASP.NET 웹 서비스는.

  • GetCategories – Categories 테이블의 모든 범주를 포함 하는 데이터 집합을 반환 합니다.
  • 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);
}
}
페이지에서 코드의 가장 큰 부분 이므로 무슨을 이해할 수 있도록 자세하게에서 올려 서.



이 스크립트 블록의 맨 위에 있는 두 개의 변수 만들었습니다: objHttpobjXmlDoc. 이들은 변수 XMLHTTP 개체 및 XML DOM 개체에 대 한 사용 합니다. 직후 getDataFromWS 함수의 함수 정의입니다. 웹 서비스에 클라이언트측 호출을 수행 하는 일을 담당 하는 함수입니다. 두 가지 옵션, 다음 네 개의 인수를 사용 합니다.
  • methodName – 웹 서비스에 대해 호출할 메서드의 이름입니다.
  • dataSetName – 웹 서비스에서 반환 되는 데이터 집합의 이름입니다.
  • 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 EnvelopestrEnvelope = "<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 봉투를 string 변수에 웹 서비스에 전달할 수 있도록 합니다. 이 실제로 웹 서비스의 SOAP 봉투 형식을 지정 하는 방법을 쉽게. 간단히 웹 서비스를 찾아서 해당 메서드에 대 한 SOAP 봉투를 확인 하는 방법 중 하나를 클릭 합니다. 예를 들어, 다음은 내가 보고 있는 것이 문서에 대 한 내가 만든 웹 서비스를 wsXMLHTTP의 GetCategories 메서드를 검색할 때.

envelope.png

ASP.NET은 SOAP 봉투를 HTTP POST 및 HTTP GET에 대 한 서식 지정 방법을 알려 줍니다. 이 문서에 제공 된 예제에서는 I를 사용할 HTTP POST.



지금까지는 괜찮아요. 이제 코드의 다음 섹션에서 살펴보겠습니다.
// Set up the postobjHttp.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 속성이 변경 될 때 호출 되는 콜백 함수를 설정할 수 있습니다. 전체에서 데이터를 받은 함으로써 준비가 될 때까지 해당 데이터에서 작업에서 유지할 수 있습니까.



모든 데이터를 수신한 후 만드는 XML 데이터 아일랜드 응답 responseText 속성을 사용 하 여. 아시다시피, 웹 서비스의에서 응답은 XML 형식입니다. 이 경우 Microsoft ADO.NET DataSet을 돌려주 겠다.



이 코드 블록의 다음 섹션에서는 switch 문을 적절 한 웹 서비스에서 반환 되는 데이터 집합의 이름 뒤에 함수를 호출 하려면 세부에 잠시 후에 해당 기능에 대 한 코드를 보겠습니다.


이제 실제로 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을 포함 합니다. 경우 if 문 tacks에서 쿼리 문자열 값으로 전달 되는 매개 변수입니다. 사용자 환경에서 SOAP 봉투에 매개 변수를 추가 하는 것이 좋습니다. 어느 쪽이 든 괜찮습니다.



XMLHTTP 개체의 open 메서드 다음에 호출 됩니다. Open 메서드의; 처음 세 인수를 사용 했습니다. 메서드, URL 및 호출이 비동기적인지 여부를 지정 하는 부울 값입니다.
중요: 내가 여기에 따라 비동기 호출 하는, 콜백 함수는 onreadystatechanged 속성을 설정 해야 합니다.

콘텐츠 형식에 대 한 요청 헤더를 설정한 후 내가 앞서 채웠던 문자열 변수를 사용 하 여 SOAP 봉투로 요청을 보낼 합니까.



이제 XMLHTTP 요청을 수행 하는 코드를 통해 고대의 한 우리. 이제 브라우저에서 인터페이스를 처리 하 고 웹 서비스 호출의 응답을 처리 하는 코드 보시 죠.

처음 페이지가 처음 로드 될 때 호출 되는 함수에 알아 보겠습니다.
function getCategories(){

var func = "getDataFromWS('GetCategories', 'CategoriesDS')";
document.all.lblCategoryDropdown.innerText =
"Please wait while data is retrieved...";
window.setTimeout(func, 1);

}

이 함수에서 먼저는 getDataFromWS함수 시그니처를 저장 하는 변수를 만듭니다. 내가 이렇게 window.setTimeout 끝에 getDataFromWS 함수를 호출 하려면이 함수를 호출 하려고 합니다. 이 방식의 목적은 웹 서비스 호출이 완료 될 때까지 기다리는 동안 사용자에 게 상태를 표시 하기입니다. 데이터를 검색 하 고 있음을 나타내는 메시지를 표시 하는 DIV의 innerText를 변경 거 내가 확인 합니다. GetDataFromWS 함수는 window.setTimeout 호출을 통해 다음 일정 하 고 1 밀리초에서 실행 되도록 설정 합니다.

웹 서비스 응답 처리

기억 이전 콜백 함수를 구성 하려면 onreadystatechanged 속성을 사용 했습니다. 또한 콜백 함수에는 데이터 집합 이름을 기반으로 특정 함수를 호출 하는 switch 문의 해야 합니다. 이 경우, 우리의 데이터 집합의 이름은 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 함수 로드 되도록 XML 응답에서 objXmlDoc 개체에 저장 합니다. ProcessCategory 함수에서 내가 해당 XML 걸리고 범주 드롭다운 상자를 채우는 것을 구문 분석.



필자는 IXMLDOMNodeList XML 응답의 일부를 사용 하 여 개체를 만듭니다. 웹 서비스 호출에서 돌려주 겠다 하는 diffgram으로 돌아가고 제가 사실은 반응의 유일한 부분은 데이터 집합에 삽입 하는 데이터 테이블의 데이터를. 내가 볼 수 있는 DataTable에 포함 된 XML 블록에서 IXMLDOMNodeList 개체를 만들어.



웹 서비스의 코드를 보면 범주 이름이 고 데이터 집합에 추가 된 DataTable을 만들어 내가 표시 됩니다. XML은 웹 서비스에서 반환 하 고 데이터 집합 < CategoriesDS > 블록 내에 포함 된 DataTable의 각 행에 포함 된 아래의 XML 파일에 표시 된 대로 < 범주 > 블록을 구분 합니다.

다음 파일은 Microsoft 다운로드 센터에서 다운로드할 수 있습니다.
Download 지금 GetCategories.xml 패키지 다운로드
Download WSXMLHTTP.exe 패키지를 지금 다운로드 합니다. Microsoft 지원 파일을 다운로드 하는 방법에 대 한 자세한 내용은 Microsoft 기술 자료의 다음 문서 번호를 클릭 합니다.:
119591 온라인 서비스 로부터 Microsoft 지원 파일을 구하는 방법
Microsoft는 이 파일에 대해 바이러스 검사를 시행하였습니다. Microsoft는 파일이 게시된 날짜에 사용할 수 있었던 최신 바이러스 검색 소프트웨어를 사용했습니다. 파일은 파일을 무단으로 변경할 수 없도록 보안이 강화된 서버에 저장됩니다.


해당 데이터 테이블에 포함 된 XML 블록을 가져오려면 다음 코드를 사용 했습니다.
objNodeList = objXmlDoc.getElementsByTagName("Categories");
IXMLDOMNodeList 각 < 범주 > 노드가 포함 된 개체를 반환 합니다. 해당 목록을 사용 하 여 다음 반복을 루프.
// 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 > 노드와 < 범주 >. 따라서 먼저 내가 새로운 IXMLDOMNodeList 를 만들고 < 범주 > 현재 노드의 자식 노드를 사용 하 여 채우기입니다.
dataNodeList = objNodeList[i].childNodes;
다음 item 메서드를 사용 하 여 드롭다운을 채워야 하는 노드를 모두 액세스할 수 있습니다. 데이터베이스에서 CategoryID 필드를 포함 하는 첫 번째 노드 및 데이터베이스에서 범주 필드를 포함 하는 두 번째 노드에 있습니다. 내가 옵션 개체를 새로 만들고, 텍스트 범주를 설정, CategoryID값을 설정 및 drpCategory 드롭 다운 추가할. 나머지 함수에서 사용 되는 코드 같은 방법의 사용 하 여 XML 응답에서 필요한 데이터를 가져오는 페이지의 부분을 채웁니다.

참고: 적은 양의 데이터를 다루는 것 이므로 필요한 데이터를 끌어낼 수 있는 좋은 방법입니다 DOM을 사용 하 여. 많은 양의 데이터를 다루는 대신 XSLT를 사용할 수 있습니다.

작업 하는 방법

이제이 모든 것은 스스로가 자세히 설명 했으므로, 자신에 대 한 작업에 포함된 된 예제 파일을 사용 하는 방법을 논 한 시간입니다.

웹 서비스 구축

ASP.NET 웹 서비스를 배포 하려면 웹 서버 루트에 연결 된 웹 서비스 샘플 간단 하 게 압축 합니다. 그런 다음 DynaProducts.asmx에 대 한 코드를 열고 연결 문자열을 변경 해야 합니다. 최소한 SA 암호를 입력 해야 합니다. 변경 내용을 변경한 후 다음 웹 서비스를 다시 컴파일하십시오.

HTML 파일을 배포합니다.

HTML 파일에는 웹 서비스에 URL이 포함 된 szUrl 라는 변수가 있습니다. GetDataFromWS 함수는 함수의 아래쪽에이 변수를 찾을 수 있습니다. 위에서 구축한 웹 서비스의 URL로 변경 해야 합니다.


웹 서비스와 HTML 파일 모두를 구축한 후에 HTML 파일을 찾습니다. 로드, 범주 드롭다운 목록 웹 서비스에 첫 번째 XMLHTTP 요청으로 채워집니다. 채워져 일단 채우는 Products 드롭다운에서 다음 XMLHTTP 요청을 시작할 범주를 선택 합니다. 제품 드롭다운 메뉴에서 제품을 선택 하면 해당 제품에 대 한 데이터로 테이블이 채워집니다.



구성 요소 개발자는 이러한 XMLHTTP 요청 시 다시 페이지가 게시 되지 않습니다. XMLHTTP 요청의 장점입니다. 이렇게 큰 페이지, 페이지는 한도 유지 스크롤 위치 "깜박임"은 사용자 없이. 심해 보이는데 그 게 몇 가지 매우 유용한 기능!



한 가지 더:이 문서에서는 내가 XMLHTTP를 사용 하는 웹 서비스를 쿼리 합니다. 쉽게 사용할 수도 것 ASPX 페이지 또는 ASP 페이지에 대 한 요청을 합니다. 이 기술을 사용 하 여 관리 하는 방법에 대 한 가능성은 무한 합니다. XMLHTTP 미래의 웹 응용 프로그램 개발에 유용한 찾을 바랍니다.
언제나 처럼 자유롭게 원하는 주제에 대 한 아이디어 열을 나중에 해결 하거나 형성 하는 요청에 대 한 것 을 사용 하 여 Microsoft 기술 자료의 제출.
속성

문서 ID: 893659 - 마지막 검토: 2017. 2. 7. - 수정: 2

Microsoft ASP.NET 1.0, Microsoft ASP.NET 1.1

피드백