Aktualizace dynamické stránky pomocí XMLHTTP

Překlady článku Překlady článku
ID článku: 893659 - Produkty, které se vztahují k tomuto článku.
Sloupec podpora hlasové technologie ASP.NET

Aktualizace dynamické stránky pomocí XMLHTTP

Chcete-li upravit tento sloupec vašim potřebám, chceme pozvat sdělit své nápady o tématech, která zajímají je a problémy, které chcete zobrazit řešit v budoucnosti sloupce podporu hlasu a články znalostní báze Knowledge Base. Můžete odeslat své myšlenky a pomocí zpětné vazby Požádejte o ni formulář. Je zde také odkaz na formulář v dolní části tohoto sloupce.
Rozbalit všechny záložky | Minimalizovat všechny záložky

Na této stránce

ÚVOD

Mé oblíbené způsoby zkoušení použitelnosti webových aplikací je sledovat Moje wife navigaci webu. Si můžete vytvořit svůj způsob procházení Internetu poměrně dobře, ale málo o nižší úrovni tíseň technické aspekty (co uživatel volá "boring položky"), aby všechny fungoval.

Na poslední večer, byl jsem sledování Moje wife důkladně prostudovat e-commerce aplikace z jedné velké chlapce. Eva byla podrobnějším informacím o produktu výpis pomocí více rozevírací seznamy, každý z nich krmení z dříve provedený výběr. Eva klepli na položku každý rozevírací seznam, jak je stránka odeslána zpět k získání dat pro další rozevírací seznam. Protože její dojem, že jej bylo dosaženo delší dobu kvůli post opěradel bylo nepříjemné pro ní zkušenosti.

Před úroveň, kterou jí došlo by byla snadno zmírnila vývojáři aplikace Pokud XMLHTTP se používá pouze k načtení dat namísto zaúčtování zpět. Který je sloupec tohoto měsíce je o. Jsem ukáže vám jak aktualizovat část webové stránky bez provedení post zpět data z Microsoft ASP.NET webové služby pomocí XMLHTTP. To bude opravdu zajímavé! Důvěřujte mi.

Obecný přehled

Odeslání požadavku na webový server od klienta a vrácení ostrově data XML lze použít XMLHTTP. Podle struktury XML, která je obdržela můžete použít XSLT nebo XML DOM s ním manipulovat a části stránky vázat na data. To je velice mocná technika.

Poznámka: Microsoft nabízí chování webových služeb pro aplikaci Internet Explorer, který umožňuje asynchronní volání webové služby technologie ASP.NET, rychlý a snadný. Však toto chování není podporován a není nejlepší způsob, jak aktualizovat stránky asynchronně. Místo toho byste měli použít XMLHTTP!

V příkladu, který budete prostřednictvím práce v tomto sloupci udělám tři volání webové služby ASP.NET webové služby pomocí XMLHTTP. Webová služba databáze Northwind na místním serveru SQL Server odešle dotaz a vrátí objekt DataSet klientovi ve formě XML formátu diffgram. I bude potom slouží k analýze dat XML modelu DOM technologie XML a dynamicky aktualizovat části stránky. Všechny to bude provedeno bez příspěvku zpět.

Webová služba

DynaProducts je název webové služby, které budete používat. Je základní službu technologie ASP.NET, který je napsán v jazyce C#, který obsahuje následující tři metody.
  • GetCategories – vrací třídu DataSet, který obsahuje všechny kategorie v tabulce kategorie.
  • GetProducts – vrací třídu DataSet, který obsahuje všechny produkty, kategorie, které jsou předány metodě.
  • GetProductDetails -vrátí DataSet, který obsahuje podrobné informace o produktu, jehož ProductID je předán metodě.

Stránka HTML

První věc, která může nastolit o tento vzorek je na stránce, že I 'm aktualizace i když ASP.NET webové služby není stránky technologie ASP.NET. Je pouze pravidelně stránku HTML. Avšak nezanedbatelnou část JavaScript na straně klienta byly přidány na stránku a je tento skript, který provádí volání webové služby.

Podívejme se na první fragment kódu HTML stránky.
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);
	  }
}
To je největší část kódu ze stránky a chcete přejít přes něj podrobně se pochopit, co se děje.

V horní části tohoto bloku skriptu, vytvoření dvou proměnných: objHttp a objXmlDoc. Jedná se o proměnné, které budu používat Můj objektu XMLHTTP a objektu modelu DOM technologie XML. Ihned poté, co to je definice funkce getDataFromWS funkce. Toto je funkce, která je zodpovědná za klienta volání webové služby. Má následující čtyři argumenty, dva z nich jsou volitelné:
  • methodName – název metody pro volání webové služby.
  • dataSetName – název datové sady, která je vrácena pomocí webové služby.
  • wsParamValue – hodnota parametru, který je předán do webové služby, případně. (Volitelné)
  • wsParamName – název parametru, který je předán do webové služby, případně. (Volitelné)
Pojďme rozdělit getDataFromWS funkce na části a diskutovat o každé z nich. Zde je první úryvek:
// 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");
Tento blok kódu vytvoří objekt XMLHTTP a objektu dokumentu XML. Dále lze začít vytvářet obálky 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>";
V tomto kódu I 'm přiřazení obálky SOAP řetězcové proměnné tak, aby můžete předat k webové službě. Je skutečně poměrně snadno zjistit, jak formátovat obálky protokolu SOAP pro webové služby. Jednoduše procházet webové služby a klikněte na jednu z metod zobrazit obálku protokolu SOAP pro danou metodu. Zde je například co zobrazí při prohlížení GetCategories metoda wsXMLHTTP webové služby, která byla vytvořena pro tento článek:

Zmenšit tento obrázekZvětšit tento obrázek
Envelope.PNG


ASP.NET určuje způsob formátování obálky SOAP pro POST protokolu HTTP a HTTP GET. V příkladu v tomto článku jsem se pomocí HTTP POST.

Tak daleko, tak dobré. Nyní Podívejme se na další část kódu.
// 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;

				}
			}
Při požadavku pomocí XMLHTTP objektu XMLHTTP používá vlastnost readyState ke sledování stavu žádosti. Po všechna data byla přijata zpět z webové služby, vlastnost readyState změní na hodnotu 4. Vlastnost objektu XMLHTTP onreadystatechange umožňuje nastavit funkci zpětného volání, která bude volána při změně vlastnosti readyState . Tím, že zajistí, že data byla přijata jako celek, lze zabránit, které působí na tato data dokud jsem připraven.

Jakmile obdrží všechna data vytvořit pomocí vlastnosti responseText ostrově data XML s odpovědí. Jak pravděpodobně víte, odpověď z webové služby je ve formátu XML. Jsem I v tomto případě vrací objekt Microsoft ADO.NET DataSet.

V další části tohoto bloku kódu volání funkce odpovídající název objektu DataSet vrácených z webové služby pomocí příkazu switch. Budete přejít do kódu pro tyto funkce podrobně o něco později.

Nyní Podívejme se na kód, který skutečně provádí požadavek 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);
Proměnná szUrl obsahuje adresu URL, která je použita k volání webové služby z důvodu srozumitelnosti. Mám if prohlášení, že všechny parametry, které jsou předány jako hodnotu řetězce dotazu tacks. Ve vašem prostředí můžete přidat parametry do obálky protokolu SOAP. V obou případech bude pracovat správně.

Dále je volána metoda open objektu XMLHTTP. Používal jsem první tři argumenty pro metodu otevřené; Metoda, adresu URL a logická hodnota, která určuje, zda je asynchronní volání.
Důležité Pokud provádíte asynchronní volání, jak jsem zde, musíte nastavit funkci zpětného volání prostřednictvím vlastnosti onreadystatechanged .

Po nastavení typu obsahu v hlavičce požadavku odeslat žádost jako použití řetězcové proměnné, které jsem dříve zobrazí obálka protokolu SOAP.

Jsme nyní jste pryč přes všechny kód, který provádí požadavek XMLHTTP. Nyní Pojďme se se podívat na kód, který zpracovává rozhraní v prohlížeči a odezva na volání webové služby, která zpracovává.

Nejprve se podíváme na funkce, která je volána, když se stránka poprvé načte.
function getCategories()
{

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

  }
První věc, která v této funkci udělat je vytvořit proměnnou pro uložení getDataFromWSfunkce podpisu. I tomu, že přechod k volání window.setTimeout na konci této funkce můžete volat getDataFromWS funkce. Účelem tohoto přístupu je umožnit uživateli zobrazit stav, při čekání na dokončení volání webové služby. Všimněte si, že jsem I změna innerText DIV zobrazí se zpráva s oznámením, že se načítají data. GetDataFromWS funkce prostřednictvím volání window.setTimeout naplánujte a nastavit spuštění v jeden milisekund.

Zpracování odpovědi webové služby

Mějte na paměti dříve konfigurace funkce zpětného volání při použití vlastnosti onreadystatechanged . Pamatujte také, že obsahuje funkci zpětného volání příkazu switch, která volá určité funkce založené na název objektu DataSet. Náš název objektu DataSet je v tomto případě CategoriesDS. Proto processCategory funkce volaná funkce zpětného volání. Dopřejeme si prohlédněte této funkce naleznete v tématu Jak lze použít k analýze odpověď z webové služby 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";
       
    }

  }
Mějte na paměti, že getDataFromWS funkce načtení XML z odpovědi do objektu objXmlDoc . Ve funkci processCategory I přijmout tento XML a procházení jeho naplnění rozevíracího seznamu kategorie.

První věcí, kterou udělat, je vytvořit objekt IXMLDOMNodeList části XML odpověď. Objekt DataSet, který jsem po návratu z volání webové služby je vrácen jako prvek formátu diffgram a je pouze část tuto odpověď, kterou jsem opravdu zájem o data z objektu DataTable, který jste vložili do objektu DataSet. Můžete dostat do které vytvořením objektu IXMLDOMNodeList z bloku XML, který obsahuje objekt DataTable.

Pokud se podíváte na kód webové služby, zjistíte, že vytvořit objekt DataTable s názvem kategorie a přidejte jej do objektu DataSet. Při vrácení z webové služby XML DataSet je obsažen uvnitř bloku <CategoriesDS>a každý řádek z objektu DataTable je obsažena v oddělených bloků <Categories>, jak je uvedeno v souboru XML.

</Categories></CategoriesDS>Následující soubory jsou k dispozici ke stažení z webu služby Stažení softwaru:
Zmenšit tento obrázekZvětšit tento obrázek
Ke stažení
Stáhněte balíček GetCategories.xml nyní.
Zmenšit tento obrázekZvětšit tento obrázek
Ke stažení
Stáhněte balíček WSXMLHTTP.exe nyní.Další informace o tom, jak stahovat soubory Microsoft Support, získáte v následujícím článku znalostní báze Microsoft Knowledge Base:
119591 Jak získat soubory podpory společnosti Microsoft ze serverů služeb online
Soubor neobsahuje viry. Společnost Microsoft použila aktuální antivirový software, který byl k dispozici k datu zveřejnění souborů. Soubor je uložen na zabezpečených serverech, které neumožňují neoprávněné změny souborů.

Chcete-li získat XML blok, který obsahuje tento objekt DataTable, použít následující kód:
objNodeList = objXmlDoc.getElementsByTagName("Categories");
Tento příkaz vrátí IXMLDOMNodeList objekt, který obsahuje každý uzel <Categories>. I potom iterovat přes tento seznam použití smyčce for.</Categories>
// 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";
       
    }
Již vím, že každý uzel <Categories>bude mít dva uzly, které je potřeba: <ID>uzel a uzel <CategoryName>. Proto první věc, kterou udělat, je vytvořit nový IXMLDOMNodeList a naplní podřízené uzly aktuálního <Categories>uzel.</Categories> </CategoryName> </ID> </Categories>
dataNodeList = objNodeList[i].childNodes;
Pak použít metodu zboží přístup oba uzly, které je třeba naplnit Tento rozevírací seznam. První uzel obsahuje pole CategoryID z databáze a druhý uzel obsahuje pole CategoryName z databáze. Vytvoření nového objektu možnost , nastavte NázevKategorietext, nastavte hodnotu na pole CategoryIDa přidat do drpCategory rozevíracího seznamu. Kód, který se používá v zbývající funkce používá stejnou metodu přebírat data z XML odpověď nutná a k vyplnění části stránky.

Poznámka: Vzhledem k tomu, že jsme se zabývají malé množství dat v tomto poli, pomocí modelu DOM je skvělým způsobem, jak data, která musíme vysunout. Zabýváte byly s velkým množstvím dat, můžete místo toho použít XSLT.

Jak je práce

Nyní, když jste na něž se krupičnaté podrobnosti o všechny informace o tom, jak funguje, je čas přejít přes použití součástí ukázkové soubory zobrazit práci pro sebe.

Nasazení webových služeb

Nasadit službu technologie ASP.NET, stačí rozbalit vzorku připojené webové služby do kořenového adresáře serveru WWW. Potom bude nutné spustit kód pro DynaProducts.asmx a změnit připojovací řetězec. Přinejmenším bude nutné zadat heslo správce systému. Po provedení této změny, znovu zkompilujte webovou službu.

Nasazení souboru HTML

Soubor HTML obsahuje proměnnou s názvem szUrl obsahuje adresu URL webové služby. Zjistíte, tato proměnná ve funkci getDataFromWS funkce v dolní. Je třeba změnit adresu URL pro webovou službu, která je zavedena výše.

Poté, co jste nainstalovali webové služby a soubor ve formátu HTML, vyhledejte soubor HTML. Jakmile se načte, rozevíracího seznamu Kategorie obsazen první XMLHTTP požadavek na webovou službu. Po které naplněna, vyberte kategorii chcete vykázat při dalším požadavku XMLHTTP, který naplníte rozevírací seznam produktů. Produkt výběrem z rozevíracího seznamu produktů naplní tabulku s údaji o výrobku.

Všimněte si, že stránka neodesílá data zpět během některé z těchto požadavků XMLHTTP. To je krása XMLHTTP žádostí. Pokud jsem provedla na velké stránky, stránky by také zachována jeho polohu rolování bez "blikat" na uživatele. Pokud dotaz, to je některé položky poměrně výkonné!

Jedna další věc: v tomto článku byl použit XMLHTTP dotazu webové služby. I může stejným způsobem využívají ji provést požadavek na stránku ASPX nebo stránku ASP. Existuje mnoho možností jak můžete umístit tuto technologii používat. Doufám, že je užitečné XMLHTTP v budoucí vývoj webových aplikací.
Jako vždy, atmosféru volného odeslat nápady na témata, které má řešit v budoucnosti sloupce nebo znalostní báze Microsoft Knowledge Base pomocí Požádejte o ni formulář.

Vlastnosti

ID článku: 893659 - Poslední aktualizace: 28. června 2013 - Revize: 8.0
Informace v tomto článku jsou určeny pro produkt:
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
Klíčová slova: 
kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMtcs
Strojově přeložený článek
DŮLEŽITÉ: Tento článek je přeložen pomocí softwaru na strojový překlad Microsoft. Nepřesný či chybný překlad lze opravit prostřednictvím technologie Community Translation Framework (CTF). Microsoft nabízí strojově přeložené, komunitou dodatečně upravované články, a články přeložené lidmi s cílem zajistit přístup ke všem článkům v naší znalostní bázi ve více jazycích. Strojově přeložené a dodatečně upravované články mohou obsahovat chyby ve slovníku, syntaxi a gramatice. Společnost Microsoft není odpovědná za jakékoliv nepřesnosti, chyby nebo škody způsobené nesprávným překladem obsahu nebo jeho použitím našimi zákazníky. Více o CTF naleznete na http://support.microsoft.com/gp/machine-translation-corrections/cs.
Projděte si také anglickou verzi článku: 893659

Dejte nám zpětnou vazbu

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com