Aggiornamenti a pagina dinamica utilizza XMLHTTP

IMPORTANTE: il presente articolo è stato tradotto tramite un software di traduzione automatica di Microsoft ed eventualmente revisionato dalla community Microsoft tramite la tecnologia CTF (Community Translation Framework) o da un traduttore professionista. Microsoft offre articoli tradotti manualmente e altri tradotti automaticamente e rivisti dalla community con l’obiettivo di consentire all'utente di accedere a tutti gli articoli della Knowledge Base nella propria lingua. Tuttavia, un articolo tradotto automaticamente, anche se rivisto dalla community, non sempre è perfetto. Potrebbe contenere errori di vocabolario, di sintassi o di grammatica. Microsoft declina ogni responsabilità per imprecisioni, errori o danni causati da una traduzione sbagliata o dal relativo utilizzo da parte dei clienti. Microsoft aggiorna frequentemente il software e gli strumenti di traduzione automatica per continuare a migliorare la qualità della traduzione.

Clicca qui per visualizzare la versione originale in inglese dell’articolo: 893659
Colonna ASP.NET Support Voice

Aggiornamenti a pagina dinamica utilizza XMLHTTP

Per personalizzare questa colonna in base alle esigenze, desideriamo invitati a inviare le proprie idee sugli argomenti di interesse e sui problemi che si desiderano visualizzare la soluzione nei futuri articoli della Knowledge Base e Support Voice. È possibile inviare idee e commenti e suggerimenti tramite il Richiesti modulo. È inoltre disponibile un collegamento al modulo nella parte inferiore della colonna.
INTRODUZIONE
Uno dei mie modi preferiti come di studiare l'utilizzabilità di applicazione Web è guardare mia moglie spostarsi all'interno di un sito Web. Possibile fare molto bene in suo modo su Internet, ma poco di basso SA aspetti tecnici (cosa chiama "tutto ciò scialbi") che la rendono tutte le funzioni.

Un recente sera, che stavo osservando mia moglie consultare un'applicazione di e-commerce da uno ai ragazzi di grandi dimensioni. Lei è stata drill-down in un prodotto elenco mediante l'utilizzo di più elenchi a discesa ognuna delle quali alimentazione dalla selezione effettuata in precedenza. Come ha fatto clic su un elemento in ogni elenco a discesa, la pagina viene inviata nuovamente per ottenere i dati per il successivo a discesa. È stata l'esperienza frustrante per suo conto perché l'impressione è stata impiegava molto tempo a causa di esegue il post.

Il livello di frustrazione che si erano verificati Impossibile hanno stato facilmente risolto dagli sviluppatori dell'applicazione se utilizzati solo XMLHTTP per recuperare i dati invece di postback. Che è la novità sull'articolo di questo mese. Viene illustrato come utilizzare XMLHTTP per aggiornare una parte di una pagina Web con i dati di un servizio Web di Microsoft ASP.NET senza eseguire un postback. Si sta per essere davvero interessante! Fidatevi di me.

Panoramica generale

XMLHTTP funziona inviando una richiesta al server Web dal client e restituzione di un'isola di dati XML. A seconda della struttura del XML che viene ricevuto, è possibile utilizzare XSLT o DOM XML per modificarlo e associare parti della pagina ai dati. Si tratta di una tecnica estremamente potente.

Nota.Microsoft fornisce un comportamento del servizio Web per Internet Explorer che effettua chiamate asincrone ai servizi Web ASP.NET semplice e rapido. Tuttavia, questo comportamento non è supportato e non è il modo migliore per aggiornare una pagina in modo asincrono. È invece consigliabile utilizzare XMLHTTP!

Nell'esempio che ci lavorerò tramite in questo articolo si farà tre chiamate al servizio Web a un servizio Web ASP.NET mediante XMLHTTP. Il servizio Web viene eseguita una query al database Northwind nel locale di SQL Server e restituirà un DataSet al client sotto forma di un diffgram XML. Verrà quindi utilizzare il modello DOM XML per analizzare i dati XML e aggiornare dinamicamente parti della pagina. Tutto ciò avverrà senza un postback.

Il servizio Web

Il servizio Web da utilizzare è denominato DynaProducts. È un servizio Web ASP.NET di base che è scritto in C# e che contiene tre metodi seguenti.
  • GetCategories – restituisce un DataSet che contiene tutte le categorie nella tabella categorie.
  • GetProducts – restituisce un DataSet che contiene tutti i prodotti della categoria vengono passati al metodo.
  • GetProductDetails – restituisce un DataSet che contiene i dettagli sul prodotto con ProductID viene passato al metodo.

La pagina HTML

La prima cosa che potrebbe colpisce in questo esempio è che la pagina che sta aggiornando tuttavia il servizio Web ASP.NET non è una pagina ASP.NET. È solo una pagina HTML standard. Tuttavia, ho aggiunto una notevole quantità di script JavaScript del lato client alla pagina ed è lo script che effettua le chiamate al servizio Web.

Esaminiamo il primo frammento di codice dalla pagina 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);	  }}
Questa è la parte più grande di codice dalla pagina e si desidera passare su di esso in dettaglio in modo comprenderete cosa sta succedendo.

Nella parte superiore di questo blocco di script, ho creato due variabili: objHttp e objXmlDoc. Queste sono le variabili che si utilizzerà per l'oggetto XMLHTTP e l'oggetto DOM XML. Subito dopo che è la definizione della funzione per la funzione getDataFromWS . Questa è la funzione che è responsabile della chiamata al lato client al servizio Web. Assume i seguenti quattro argomenti, due dei quali sono facoltativi:
  • methodName : il nome del metodo da chiamare nel servizio Web.
  • NomeDataset : il nome del DataSet restituito dal servizio Web.
  • wsParamValue : il valore del parametro che viene passato al servizio Web, se applicabile. (Facoltativo)
  • wsParamName : il nome del parametro che viene passato al servizio Web, se applicabile. (Facoltativo)
Esaminiamo suddividere la funzione getDataFromWS in parti e analizzare ciascuna di esse. Ecco il primo frammento di codice:
// 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");
Questo blocco di codice crea l'oggetto XMLHTTP e l'oggetto del documento XML. Successivamente, inizio creazione della busta 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>";
In questo codice, sto assegnazione SOAP envelope a una variabile di stringa in modo che è possibile passare al servizio Web. È molto semplice da individuare come formattare la busta SOAP del servizio Web. È sufficiente cercare il servizio Web e fare clic su uno dei metodi per vedere un envelope SOAP per il metodo. Ad esempio, ecco che cosa viene visualizzato quando si visita il metodo GetCategories di servizio Web è stato creato il wsXMLHTTP per questo articolo:

Envelope.PNG

ASP.NET indica la modalità di formattazione SOAP envelope per HTTP POST e HTTP GET. Nell'esempio presentato in questo articolo, si utilizzerà HTTP POST.

Così gonfie vele. Ora esaminiamo la successiva sezione di codice.
// Set up the postobjHttp.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;				}			}
Quando viene effettuata una richiesta tramite XMLHTTP, l'oggetto XMLHTTP utilizza una proprietà readyState per tenere traccia dello stato della richiesta. Quando tutti i dati sono stati ricevuti dal servizio Web, la proprietà readyState cambia in un valore pari a 4. La proprietà onreadystatechange per l'oggetto XMLHTTP consente di impostare una funzione di callback che verrà chiamata quando la proprietà readyState cambia. Assicurando che i dati sono stati ricevuti nella sua interezza, posso mantenere agendo su tali dati fino a quando non sono pronto.

Una volta ricevuti tutti i dati, creare un'isola di dati XML con la risposta tramite la proprietà responseText . Come è probabilmente noto, la risposta da un servizio Web è in formato XML. Restituita in questo caso, un Microsoft ADO.NET DataSet.

Nella sezione successiva di questo blocco di codice utilizza un'istruzione switch per chiamare la funzione appropriata in base al nome del DataSet restituito dal servizio Web. Presenterò il codice per tali funzioni in dettaglio più avanti.

Ora esaminiamo il codice che effettivamente esegue la richiesta 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);
La variabile szUrl contiene l'URL utilizzato per chiamare il servizio Web per motivi di chiarezza. Ho quindi un'istruzione if istruzione tacks su tutti i parametri vengono passati come un valore di stringa di query . Nell'ambiente, è possibile aggiungere i parametri per la busta SOAP. In entrambi i casi continuerà a funzionare correttamente.

Viene chiamato il metodo open dell'oggetto XMLHTTP. Ho utilizzato i primi tre argomenti del metodo open; il metodo, l'URL e un valore booleano che specifica se la chiamata è asincrona.
Importante Se si effettua una chiamata asincrona come eccomi qui, è necessario impostare una funzione di callback mediante la proprietà onreadystatechanged .

Dopo l'intestazione della richiesta per il tipo di contenuto è impostata, inviare la richiesta come un envelope SOAP utilizzando la variabile di stringa riempita in precedenza.

Siamo ora passati in tutto il codice che effettua la richiesta XMLHTTP. Ora Divertiamoci a esaminare il codice che gestisce l'interfaccia nel browser e che gestisce la risposta dalla chiamata al servizio Web.

Innanzitutto esamineremo la funzione che viene chiamata al primo caricamento della pagina.
function getCategories(){  var func = "getDataFromWS('GetCategories', 'CategoriesDS')";  document.all.lblCategoryDropdown.innerText = "Please wait while data is retrieved...";  window.setTimeout(func, 1);  }
La prima cosa che faccio in questa funzione è creare una variabile per memorizzare la firma della funzione per getDataFromWS. Farlo in quanto verrà chiamata setTimeout alla fine di questa funzione per chiamare la funzione getDataFromWS . Lo scopo di questo approccio è per consentire di visualizzare lo stato all'utente durante l'attesa del completamento della chiamata del servizio Web. Si noti che sto cambiando innerText di un DIV per visualizzare un messaggio che indica che vengono recuperati i dati. Quindi programmare la funzione getDataFromWS tramite la chiamata setTimeout e impostare l'esecuzione di un millisecondo.

Elaborazione della risposta del servizio Web

Ricordare precedente che utilizzata la proprietà onreadystatechanged per configurare una funzione di callback. È importante ricordare che la funzione di callback contiene un'istruzione switch che chiama una funzione specifica in base al nome del DataSet. In questo caso, il nome del DataSet è CategoriesDS. Pertanto, la funzione processCategory verrà chiamata dalla funzione di callback. Divertiamoci esaminare tale funzione per vedere come utilizzare il modello DOM XML per analizzare la risposta dal servizio Web.
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";           }  }
Tenere presente che la funzione getDataFromWS caricato XML dalla risposta nell'oggetto objXmlDoc . Nella funzione processCategory , accettano i dati XML e analizzare attraverso di esso per popolare l'elenco a discesa categoria.

La prima operazione da fare è creare un oggetto IXMLDOMNodeList utilizzando parte della risposta XML. Il DataSet restituita dalla chiamata al servizio Web viene restituito come diffgram, e l'unica parte della risposta che mi interessano realmente è data dal DataTable che ho inserito nel DataSet. È possibile trasferire al che mediante la creazione di un oggetto IXMLDOMNodeList dal blocco XML che contiene l'oggetto DataTable.

Se si esamina il codice per il servizio Web, noterete che ho creato un oggetto DataTable denominato categorie e aggiungerla al DataSet. Quando il codice XML viene restituito dal servizio Web, il DataSet è contenuto all'interno di un blocco di <CategoriesDS>e ogni riga dal DataTable è contenuto all'interno di blocchi separati di <Categories>come illustrato nel file XML riportato di seguito.

</Categories></CategoriesDS>I seguenti file sono disponibili per il download da MicrosoftArea download:
DownloadDownload del pacchetto GetCategories.xml.
DownloadDownload del pacchetto WSXMLHTTP.exe.Per ulteriori informazioni su come scaricare file di supporto Microsoft, fare clic sul seguente numero di articolo per visualizzare l'articolo della Microsoft Knowledge Base:
119591 Come ottenere file di supporto Microsoft dai servizi online
Microsoft ha analizzato questo file per individuare eventuali virus. Microsoft ha utilizzato il software antivirus più recente disponibile nella data in cui il file è stato registrato. Il file è archiviato su un server con protezione avanzata che consentono di impedire modifiche non autorizzate al file.

Per ottenere il blocco XML che contiene l'oggetto DataTable, è possibile utilizzare il codice riportato di seguito:
objNodeList = objXmlDoc.getElementsByTagName("Categories");
Restituisce un oggetto IXMLDOMNodeList che contiene ogni nodo <Categories>. Quindi di scorrere tale elenco utilizzando un ciclo 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";           }
So già che ogni nodo <Categories>avrà due nodi è necessario: i nodi di <ID>e <CategoryName>. Pertanto, la prima cosa da fare è creare un nuovo IXMLDOMNodeList e popolarlo con i nodi figlio dell'oggetto corrente <Categories>nodo.</Categories> </CategoryName> </ID> </Categories>
dataNodeList = objNodeList[i].childNodes;
Quindi possibile utilizzare il metodo item per accedere a entrambi i nodi è necessario popolare l'elenco a discesa. Il primo nodo contiene il campo IDCategoria dal database e il secondo nodo contiene il campo CategoryName dal database. I creare un nuovo oggetto di opzione , impostare il testo su CategoryName, impostare il valore IDCategoriae aggiungerlo all'elenco a discesa drpCategory . Il codice utilizzato nelle funzioni rimanenti utilizza lo stesso metodo per estrarre i dati necessari dalla risposta XML e compilare alcune parti della pagina.

Nota.Poiché in questione con piccole quantità di dati, utilizzando il modello DOM è un ottimo metodo per estrarre i dati che necessari. Se trattasse di una grande quantità di dati, è possibile invece utilizzare XSLT.

Come affinché tutto funzioni

Ora che ho trattato i dettagli del tutto questo funzionamento, è opportuno esaminare come è possibile utilizzare i file di esempio inclusi per verificarne il funzionamento per se stessi.

Distribuzione del servizio Web

Per distribuire il servizio Web ASP.NET, semplicemente decomprimere l'esempio di servizio Web allegato nella directory principale del server Web. È quindi necessario aprire il codice per DynaProducts.asmx e modificare la stringa di connessione. O almeno, è necessario immettere la password SA. Dopo aver effettuato tale modifica, è necessario ricompilare il servizio Web.

Distribuzione del file HTML

Il file HTML contiene una variabile denominata szUrl che contiene un URL del servizio Web. Questa variabile è disponibile nella funzione getDataFromWS nella parte inferiore della funzione. Dovete modificare l'URL del servizio Web distribuito in precedenza.

Dopo aver distribuito il servizio Web e il file HTML, individuare il file HTML. Durante il caricamento, l'elenco a discesa categoria verrà popolata dalla prima XMLHTTP request al servizio Web. Una volta che è stato popolato, selezionare una categoria per avviare la successiva richiesta XMLHTTP che popola l'elenco a discesa prodotti. Selezione di un prodotto dall'elenco a discesa prodotti popolerà una tabella con dati relativi al prodotto.

Si noti che la pagina non viene inviato durante una di queste richieste XMLHTTP. È questo il vantaggio di richieste XMLHTTP. Se avessi fatto in una pagina di grandi dimensioni, la pagina verrebbe hanno inoltre gestita la posizione di scorrimento senza "intermittente" all'utente. Se Chiedi conferma, ovvero alcuni abbastanza potenti!

Un'altra cosa: in questo articolo ho utilizzato XMLHTTP per interrogare un servizio Web. Avrei potuto anche semplicemente utilizzare, per effettuare una richiesta per una pagina ASPX o una pagina ASP. Possibilità per come è possibile inserire questa tecnologia da utilizzare sono innumerevoli. Ci auguriamo XMLHTTP utile per il futuro sviluppo di applicazioni Web.
Come sempre, non esitate a inviare idee sugli argomenti che si desidera che in futuro indirizzati colonne o nella Microsoft Knowledge Base utilizzando il Richiesti modulo.

Avviso: questo articolo è stato tradotto automaticamente

Proprietà

ID articolo: 893659 - Ultima revisione: 06/28/2013 05:43:00 - Revisione: 6.0

Microsoft ASP.NET 1.0, Microsoft ASP.NET 1.1

  • kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMtit
Feedback