Actualizações de página dinâmica utilizando XMLHTTP

Traduções de Artigos Traduções de Artigos
Artigo: 893659 - Ver produtos para os quais este artigo se aplica.
Coluna de voz de suporte do ASP.NET

Actualizações de página dinâmica utilizando XMLHTTP

Para personalizar esta coluna às suas necessidades, pretendemos convidá-lo para submeter as suas ideias sobre tópicos que interessam problemas que pretende ver e corrigida no futuro artigos da Base de dados de conhecimento e de colunas de voz de suporte. Pode submeter ideias e comentários utilizando a Pedir formulário. Existe também uma hiperligação para o formulário na parte inferior desta coluna.
Expandir tudo | Reduzir tudo

Nesta página

INTRODUÇÃO

É uma das minhas formas favoritas de estudar a capacidade de utilização de aplicação de Web ver a minha esposa navegar num Web site. Ela pode tornar a forma à volta da Internet bastante melhoras, mas ela sabe pouco o baixo nível sobre os aspectos técnicos (o que ela chama "a coisas aborrecida") que certifique que funcione tudo.

Numa noite recente, posso foi a assistir a minha esposa Estude uma aplicação de comércio electrónico de um grandes os ambos os sexos. Ela foi pormenorizar num produto listar utilizando pendentes múltiplos, cada um, alimentação de fora a selecção efectuada anteriormente. Tal como ela clicado um item de cada pendente, a página é registado para obter dados para o próximo pendente. A experiência foi frustrante para ela porque a respectiva impressão foi que foi a demorar muito tempo devido efectua o post.

O nível de frustração ela estava com poderia ter sido facilmente atenuado pelos programadores da aplicação se XMLHTTP apenas utilizados para obter os dados em vez de voltar a registar. Que é o que é coluna deste mês sobre. Posso mostrar-lhe como utilizar XMLHTTP para actualizar uma parte de uma página Web com dados de um serviço Web do Microsoft ASP.NET sem efectuar um post novamente. Isto vai ser realmente fresco! Confie-me.

Descrição geral

Funciona XMLHTTP enviando um pedido para o servidor Web do cliente e devolver um grupo de dados XML. Dependendo da estrutura de XML que é recebida, pode utilizar XSLT ou XML DOM para manipular e associar partes da página para que os dados. Esta é uma técnica muito poderosa.

Nota A Microsoft oferece um comportamento de serviço Web para o Internet Explorer que efectua chamadas assíncronas para serviços Web do ASP.NET, rápida e fácil. No entanto, este comportamento não é suportado e não é a melhor forma de actualizar uma página de modo assíncrono. Em vez disso, deve utilizar XMLHTTP!

No exemplo que irá trabalhar através desta coluna, faço três chamadas de serviço Web para um serviço Web do ASP.NET através de XMLHTTP. O serviço Web vai consultar a base de dados Adamastor do SQL Server local e irá devolver um conjunto de dados para o cliente sob a forma de um diffgram XML. Será, em seguida, utilizar o XML DOM para analisar dados XML e actualizar dinamicamente partes da minha página. Tudo isto será efectuado sem uma mensagem novamente.

O serviço Web

O serviço Web que vai utilizar é o nome DynaProducts. É um serviço ASP.NET Web básico, que é escrito no c# e que contém os seguintes três métodos.
  • GetCategories ? devolve um DataSet que contém todas as categorias na tabela categorias.
  • GetProducts ? devolve um DataSet que contém todos os produtos da categoria que são transmitidos para o método.
  • GetProductDetails ? devolve um DataSet que contém detalhes sobre o produto cuja ProductID é passado para o método.

A página HTML

A primeira coisa que pode atingir sobre este exemplo é que a página que estou a actualizar embora o serviço Web do ASP.NET não é uma página ASP.NET. É apenas uma página HTML normal. No entanto, adicionar um montante justo do total de JavaScript do lado do cliente para a página e é esse script que efectua chamadas para o serviço Web.

Vamos observar o primeiro fragmento de código a partir da página 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);
	  }
}
Este é o maior segmento de código a partir da página e pretende ir mesmo pormenorizadamente pelo que vai compreender o que está a decorrer.

Na parte superior deste bloco de script, criei duas variáveis: objHttp e objXmlDoc. Estas são as variáveis que irá utilizar para o meu objecto XML DOM e o meu objecto XMLHTTP. Imediatamente após o que é a definição de função para a função getDataFromWS . Esta é a função que é responsável por efectuar a chamada do lado do cliente para o serviço Web. Demora os seguintes argumentos: quatro, dois dos quais são opcionais:
  • methodName ? o nome do método a chamar-se no serviço Web.
  • dataSetName ? o nome do DataSet que é devolvido pelo serviço da Web.
  • wsParamValue ? o valor do parâmetro que é transmitido ao serviço Web, se aplicável. (Opcional)
  • wsParamName ? o nome do parâmetro que é transmitido ao serviço Web, se aplicável. (Opcional)
Vamos dividir a função de getDataFromWS em partes e descrevem cada uma delas. Aqui é o primeiro fragmento:
// 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");
Este bloco de código cria o objecto XMLHTTP e o objecto de documento XML. Em seguida, posso começar a criar o envelope 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>";
No presente código, eu estou atribuir o envelope SOAP da uma variável de cadeia para que pode transmiti-las para o serviço Web. É realmente bastante fácil descobrir como formatar o envelope SOAP para o serviço Web. Basta procurar para o serviço Web e clique em um dos métodos para ver um envelope SOAP para esse método. Por exemplo, eis o que vejo quando navegar para o método de GetCategories do wsXMLHTTP de serviço Web que criei para este artigo:

Reduzir esta imagemExpandir esta imagem
Envelope.png


ASP.NET indica como o envelope SOAP deve ser formatado para uma solicitação POST HTTP e um GET de HTTP. No exemplo apresentado neste artigo, que irá utilizar HTTP POST.

Por isso até ao momento, tão boa. Agora vamos observar a secção seguinte do código.
// 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 é efectuado um pedido através de XMLHTTP, o objecto XMLHTTP utiliza uma propriedade readyState para controlar o estado do pedido. Quando todos os dados tiver sido recebida voltar do serviço Web, a propriedade readyState muda para um valor de 4. A propriedade onreadystatechange para o objecto XMLHTTP permite-lhe configurar uma função de chamada de retorno que será chamada quando a propriedade readyState . Assegurando que os dados foram recebidos na sua totalidade, posso pode manter de actuar nesses dados até eu estar preparado.

Após ter sido recebido todos os dados, criar um grupo de dados XML com a resposta utilizando a propriedade responseText . Como provavelmente sabe, a resposta de um serviço Web está no formato XML. Neste caso, estou devolver o um Microsoft ADO.NET DataSet.

A secção seguinte deste bloco de código utiliza uma instrução switch para chamar a função adequada com base no nome do DataSet que é devolvido do serviço Web. Posso ir para o código para essas funções em detalhe um pouco mais tarde.

Agora vamos observar o código que efectua realmente a pedido do 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);
A variável szUrl contém o URL que é utilizado para chamar o serviço Web, por razões de clareza. Em seguida, de ter um se instrução que tacks em quaisquer parâmetros que são transmitidos como um valor de cadeia de consulta . No seu ambiente, poderá adicionar os parâmetros para o envelope SOAP. De qualquer forma funcionará perfeitamente.

O método open do objecto XMLHTTP é chamado seguinte. Utilizei os primeiros três argumentos para o método open; o método, o URL e um valor booleano que especifica se é ou não a chamada assíncrona.
Importante Se estiver a efectuar uma chamada assíncrona como estou aqui, tem de configurar uma função de chamada de retorno através da propriedade onreadystatechanged .

Depois de definir o cabeçalho do pedido para o tipo de conteúdo, é enviar o pedido como um envelope SOAP utilizando a variável de cadeia que é povoada anteriormente.

Agora vamos tiver acedido através de todo o código que efectua o pedido XMLHTTP. Agora vamos observe o código que processa a interface no browser e a que processa a resposta do serviço Web.

Vamos primeiro observar a função que é chamada quando a página carrega pela primeira vez.
function getCategories()
{

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

  }
A primeira coisa a fazer nesta função é criar uma variável para armazenar a assinatura de função para getDataFromWS. Este procedimento é feito porque Estou indo para chamar window.setTimeout no fim desta função para chamar a função getDataFromWS . Esta abordagem tem por objectivo permitir-me visualizar o estado para o utilizador ao aguardar chamada de serviço Web concluir. Repare estou a alterar innerText de um DIV para apresentar uma mensagem indicando que está a obter dados. Posso agendar, em seguida, a função getDataFromWS através da chamada de window.setTimeout e defini-la para ser executado num milissegundo.

A processar a resposta do serviço Web

Lembre-se anteriormente que utilizado a propriedade onreadystatechanged para configurar uma função de chamada de retorno. Lembre-se também de que a função de chamada de retorno contém uma instrução de parâmetro que chama uma função específica com base no nome do DataSet. Neste caso, o nome de DataSet é CategoriesDS. Por conseguinte, será chamada a função processCategory partir da função de chamada de retorno. Vamos ter uma vista de olhos essa função para ver como utilizar o XML DOM para analisar a resposta do serviço 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";
       
    }

  }
Lembre-se de que a função getDataFromWS carregados XML da resposta para o objecto objXmlDoc . Na função processCategory , posso tomar essa XML e analisar através do mesmo para povoar a pendente categoria.

A primeira coisa a fazer é criar um objecto de IXMLDOMNodeList com a parte da resposta XML. O conjunto de dados que estou a devolver do serviço Web é devolvido como um diffgram e a única parte desta resposta que estou realmente interessado em é os dados do DataTable que eu ter inserido no DataSet. Pode aparece para que, criando um objecto de IXMLDOMNodeList do bloco XML que contém o DataTable.

Se observar o código para o serviço Web, verá que criar uma DataTable com o nome categorias e adicioná-lo para o conjunto de dados. Quando o XML é devolvido do serviço Web, o conjunto de dados está contido dentro de um bloco de <CategoriesDS>e cada linha do DataTable está contida nos blocos de <Categories>separados tal como é mostrado no ficheiro XML abaixo.

</Categories></CategoriesDS>Os ficheiros seguintes estão disponíveis para transferência a partir do Microsoft Centro de transferências:
Reduzir esta imagemExpandir esta imagem
Transferir
Transferir o pacote GetCategories.xml agora.
Reduzir esta imagemExpandir esta imagem
Transferir
Transferir o pacote WSXMLHTTP.exe agora.Para mais informações sobre como transferir ficheiros do Microsoft Support, clique no número de artigo seguinte para visualizar o artigo na Microsoft Knowledge Base:
119591 Como obter o Microsoft support files from online services
A Microsoft procedeu vírus neste ficheiro. A Microsoft utilizou o software de detecção de vírus mais actual, que estava disponível na data em que o ficheiro foi publicado. O ficheiro é armazenado em servidores com segurança melhorada, que ajudam a impedir quaisquer alterações não autorizadas ao ficheiro.

Para obter o bloco XML que contém esse DataTable, posso utilizar o seguinte código:
objNodeList = objXmlDoc.getElementsByTagName("Categories");
Isto devolve um objecto de IXMLDOMNodeList que contém cada nó <Categories>. , Em seguida, iterar essa lista utilizando um 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";
       
    }
Eu já saiba qual que cada nó <Categories>terá dois nós que é necessário: o nó de <ID>e o nó <CategoryName>. Por conseguinte, a primeira coisa a fazer é criar um novo IXMLDOMNodeList e preenchê-la com os nós subordinados da corrente <Categories>nó.</Categories> </CategoryName> </ID> </Categories>
dataNodeList = objNodeList[i].childNodes;
Em seguida, posso utilizar o método item para aceder a ambos os nós que é necessário para povoar a pendente. O primeiro nó contém o campo CódigoDaCategoria da base de dados e o segundo nó contém o campo NomeDaCategoria da base de dados. Posso criar um novo objecto de opção , definir o texto para o NomeDaCategoria, defina o valor de CódigoDaCategoriae adicioná-lo ao drpCategory pendente. O código utilizado nas restantes funções utiliza o mesmo método para extrair os dados necessários da resposta XML e preencher partes da página.

Nota Uma vez que a Microsoft está a lidar com pequenas quantidades de dados aqui, utilizar o DOM é uma óptima maneira de separar os dados que é necessário. Se foram lidar com uma grande quantidade de dados, pode optar por utilizar XSLT em vez disso.

Como fazer com que funcione tudo

Agora que I já abrangidos os detalhes abrasivo de como tudo isto funciona, chegou o momento para ir sobre como pode utilizar os ficheiros de exemplo incluído para vê-lo a trabalhar para si.

Implementar o serviço Web

Para implementar o serviço Web do ASP.NET, descompacte simplesmente a amostra de serviço Web anexada para a raiz do servidor Web. Em seguida, será necessário abrir o código para DynaProducts.asmx e altere a cadeia de ligação. Pelo menos, terá de introduzir a palavra-passe do SA. Depois de efectuar essa alteração, recompile o serviço Web.

Implementar o ficheiro HTML

O ficheiro HTML contém uma variável denominada szUrl , que contém um URL para o serviço Web. Poderá encontrar esta variável na função getDataFromWS na parte inferior da função. Terá de alterar para o URL para o serviço Web que implementado acima.

Depois de ter implementado o serviço Web e o ficheiro HTML, procure o ficheiro HTML. Quando é carregado, pendente categoria será preenchida pelo primeiro pedido XMLHTTP ao serviço Web. Uma vez que tenha sido preenchido, seleccione uma categoria não desactivar o pedido de XMLHTTP seguinte povoa pendente produtos. Seleccionar um produto pendente produtos irão povoar uma tabela com dados sobre esse produto.

Repare que a página não registar novamente durante qualquer um destes pedidos de XMLHTTP. Que é a beleza de pedidos XMLHTTP. Se tinha feito isto numa página de grandes dimensões, a página seria também mantiveram sua posição de deslocamento sem "intermitentes" ao utilizador. Se perguntar-me, é que algumas coisas bastante poderosa!

Mais uma coisa: neste artigo, utilizei XMLHTTP para consultar um serviço Web. Poderia apenas tão facilmente utilizei-lo para efectuar um pedido para uma página ASPX ou uma página ASP. As possibilidades de como pode utilizar esta tecnologia a utilizar são intermináveis. Espero que localizar XMLHTTP úteis para o futuro desenvolvimento de aplicações Web.
Como sempre, livre para submeter ideias sobre tópicos que pretende que o funcionamento no futuro corrigida colunas ou na Microsoft Knowledge Base utilizando o Pedir formulário.

Propriedades

Artigo: 893659 - Última revisão: 28 de junho de 2013 - Revisão: 6.0
A informação contida neste artigo aplica-se a:
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
Palavras-chave: 
kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMtpt
Tradução automática
IMPORTANTE: Este artigo foi traduzido por um sistema de tradução automática (também designado por Machine translation ou MT), não tendo sido portanto revisto ou traduzido por humanos. A Microsoft tem artigos traduzidos por aplicações (MT) e artigos traduzidos por tradutores profissionais. O objectivo é simples: oferecer em Português a totalidade dos artigos existentes na base de dados do suporte. Sabemos no entanto que a tradução automática não é sempre perfeita. Esta pode conter erros de vocabulário, sintaxe ou gramática? erros semelhantes aos que um estrangeiro realiza ao falar em Português. A Microsoft não é responsável por incoerências, erros ou estragos realizados na sequência da utilização dos artigos MT por parte dos nossos clientes. A Microsoft realiza actualizações frequentes ao software de tradução automática (MT). Obrigado.
Clique aqui para ver a versão em Inglês deste artigo: 893659

Submeter comentários

 

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