Aggiornamenti a pagina dinamica utilizza XMLHTTP

Traduzione articoli Traduzione articoli
Identificativo articolo: 893659 - Visualizza i prodotti a cui si riferisce l?articolo.
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.
Espandi tutto | Chiudi tutto

In questa pagina

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 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>";
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:

Riduci l'immagineEspandi l'immagine
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 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;

				}
			}
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 Microsoft Area download:
Riduci l'immagineEspandi l'immagine
Download
Download del pacchetto GetCategories.xml.
Riduci l'immagineEspandi l'immagine
Download
Download 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.

ProprietÓ

Identificativo articolo: 893659 - Ultima modifica: venerdý 28 giugno 2013 - Revisione: 6.0
Le informazioni in questo articolo si applicano a:
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
Chiavi:á
kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMtit
Traduzione automatica articoli
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
LE INFORMAZIONI CONTENUTE NELLA MICROSOFT KNOWLEDGE BASE SONO FORNITE SENZA GARANZIA DI ALCUN TIPO, IMPLICITA OD ESPLICITA, COMPRESA QUELLA RIGUARDO ALLA COMMERCIALIZZAZIONE E/O COMPATIBILITA' IN IMPIEGHI PARTICOLARI. L'UTENTE SI ASSUME L'INTERA RESPONSABILITA' PER L'UTILIZZO DI QUESTE INFORMAZIONI. IN NESSUN CASO MICROSOFT CORPORATION E I SUOI FORNITORI SI RENDONO RESPONSABILI PER DANNI DIRETTI, INDIRETTI O ACCIDENTALI CHE POSSANO PROVOCARE PERDITA DI DENARO O DI DATI, ANCHE SE MICROSOFT O I SUOI FORNITORI FOSSERO STATI AVVISATI. IL DOCUMENTO PUO' ESSERE COPIATO E DISTRIBUITO ALLE SEGUENTI CONDIZIONI: 1) IL TESTO DEVE ESSERE COPIATO INTEGRALMENTE E TUTTE LE PAGINE DEVONO ESSERE INCLUSE. 2) I PROGRAMMI SE PRESENTI, DEVONO ESSERE COPIATI SENZA MODIFICHE, 3) IL DOCUMENTO DEVE ESSERE DISTRIBUITO INTERAMENTE IN OGNI SUA PARTE. 4) IL DOCUMENTO NON PUO' ESSERE DISTRIBUITO A SCOPO DI LUCRO.

Invia suggerimenti

 

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