XMLHTTP kullanarak dinamik sayfa güncelleştirmeleri

Makale çevirileri Makale çevirileri
Makale numarası: 893659 - Bu makalenin geçerli olduğu ürünleri görün.
ASP.NET Destek Sesi sütunu

XMLHTTP kullanarak dinamik sayfa güncelleştirmeleri

Bu sütunun ihtiyaçlarınıza özelleştirmek için Knowledge Base makaleleri ve Destek Sesi sütunu, fikirlerinizi ve görmek istediğiniz konuları ilgilendiren konularda gelecekte ele göndermek için sizi davet etmek istiyoruz. Fikir ve görüşlerinizi kullanarak gönderebilirsiniz. Bunun için sor Form. Bu sütunun alt form için bir bağlantı vardır.
Hepsini aç | Hepsini kapa

Bu Sayfada

GİRİŞ

Web uygulama kullanılabilirliğini çalışmak amacıyla benim sık kullanılan yolları bir Web sitesine gidin my wife izlemek için biridir. Filiz Internet her yönden oldukça iyi yapabilir, ancak kendisi bilir alt düzey hakkında çok az teknik yönleri (ne o "sıkıcı şeyler" çağırır), onu yapın tüm çalışma.

Son bir akşam üzerinde büyük erkek çocuk birinden bir e-ticaret uygulaması tekrar kullanmanıza my wife ı seyretmek. Filiz bir ürünü birden fazla açılır listeleri, her biri daha önce yapılan seçim besleme kullanarak listeleme içine Detaya. Her açılan bir öğe tıklatıldığında kendisi gibi veri için sonraki açılan geri dönmek için sayfanın deftere. Her izlenim sonrası arka nedeniyle uzun zaman ayırdığınız olduğundan deneyimi her için can sıkıcı.

Bunlar yalnızca XMLHTTP geri nakil yerine verileri almak için kullanılan, Filiz yaşayan enerji düzeyi kolayca uygulama geliştiriciler tarafından alleviated. Bu ayın sütun ne hakkında olduğunu olmasıdır. I XMLHTTP tekrar yapmadan bir kısmını bir Web sayfasını bir Microsoft ASP.NET Web hizmetinden veri güncelleştirmek için nasıl kullanılacağını göstereceğiz. Bu gerçekten çok güzel bulunacağını! Bana güvenin.

Genel bakış

XMLHTTP istemciden Web sunucusuna bir istek göndermek ve bir XML veri adası döndürerek çalışır. Alınan XML yapısına bağlı olarak, onu değiştirmek ve bu verileri sayfanın bölümlerini bağlamak için XSLT veya XML DOM kullanabilirsiniz. Bu son derece güçlü bir tekniktir.

Not Microsoft Internet Explorer için zaman uyumsuz ASP.NET Web Hizmetleri hızlı ve kolay çağrılar Web hizmet davranışını sunar. Ancak, bu davranış desteklenmiyor ve sayfanın zaman uyumsuz olarak güncelleştirmek için en iyi yolu değildir. Bunun yerine XMLHTTP kullanmanız gerekir!

Örnekte, ben üzerinden bu sütunda çalışacağım ı bir ASP.NET Web hizmeti aracılığıyla XMLHTTP üç Web hizmeti çağrıları yapar. Web hizmeti yerel SQL Server Northwind veritabanını sorgular ve DataSet XML diffgram biçiminde istemciye döndürür. Ben sonra XML DOM, XML verilerini ayrıştırılmasında kullanın ve sayfamı bölümlerini dinamik olarak güncelleştirebilir. Tüm bu geri post yapılır.

Web hizmeti

DynaProducts adlı Web hizmeti kullanmak. Bu, C# dilinde yazılan ve aşağıdaki üç yöntemi içeren bir temel ASP.NET Web hizmetidir.
  • GetCategories – Categories tablosundaki tüm kategoriler içeren bir DataSet döndürür.
  • GetProducts – yönteme geçirilen tüm ürünleri kategorisi içeren bir DataSet döndürür.
  • GetProductDetails –, ProductID yönteme geçirilen ürün hakkında ayrıntılı bilgi içeren bir DataSet döndürür.

HTML sayfası

Bu örnek hakkında strike ilk şey ı ancak ASP.NET Web hizmeti güncelleştiriyorum sayfası bir ASP.NET sayfası olmasıdır. Sadece normal bir HTML sayfası var. Ancak, istemci tarafı JavaScript adil bir miktarda sayfaya eklediğiniz ve Web hizmeti çağrıları yapan bu komut dosyasıdır.

HTML sayfasından ilk kod parçacığı bakalım.
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);
	  }
}
Bu kod sayfasından en büyük parçası ve neler olduğunu anlamak böylece üzerine ayrıntılı olarak gitmek istiyor.

Bu komut dosyası bloğu üstünde iki değişken oluşturdum: objHttp ve objXmlDoc. Bu benim XMLHTTP nesnesi ve benim XML DOM nesnesi için kullanacağı değişkenlerdir. GetDataFromWS işlevi için işlev tanımında olan hemen sonra. Bu Web hizmeti istemci tarafı çağrısı yapmaktan sorumlu işlevdir. İkisi de isteğe bağlı dört bağımsız değişken aşağıdaki alır:
  • methodName – Web hizmetinde çağrılacak yöntemin adı.
  • dataSetName – Web hizmet tarafından döndürülen veri kümesinin adı.
  • wsParamValue – varsa Web hizmetine geçirilen parametre değeri. (İsteğe bağlı)
  • wsParamName – varsa Web hizmetine geçirilen parametre adı. (İsteğe bağlı)
Diyelim ki getDataFromWS işlevi parçalara bölmek ve her biri açıklanmaktadır. İlk kod parçası aşağıdadır:
// 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");
Bu kod blo?u, XMLHTTP nesnesi ve XML belge nesnesi oluşturur. Ardından, SOAP Zarfı oluşturma ı başlar.
// 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>";
Böylece Web hizmeti geçirebilirsiniz bu kodda ı SOAP Zarfı bir dize değişkenine atama. Web hizmeti için SOAP zarfının biçimlendirmek nasıl bulmak aslında oldukça kolaydır. Yalnızca Web hizmeti bulun ve bu yöntem için bir SOAP Zarfı görmek için bu yöntemlerden birini tıklatın. Örneğin, işte bu makale için oluşturduğum Web hizmeti wsXMLHTTP GetCategories yöntemi için göz atarken ne görüyorum:

Bu resmi kapatBu resmi aç
Envelope.PNG


ASP.NET, SOAP Zarfı bir HTTP GET ve HTTP POST için nasıl biçimlendirilmesi gerektiğini bildirir. Bu makalede sunulan örnekte HTTP POST ı kullanacak.

Bu nedenle şu ana kadar bu nedenle iyi. Şimdi kodu sonraki kısmına bakalım.
// 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;

				}
			}
XMLHTTP bir istek yapıldığında, XMLHTTP nesnesinin readyState özelliği isteğin durumunu izlemek için kullanır. Tüm verilerin aldığı zaman Web hizmetinden readyState özelliğinin değerini 4olarak değiştirir. Onreadystatechange özelliği XMLHTTP nesnesinin readyState özelliği değiştiğinde çağrılır, bir geri arama işlevi ayarlamanıza olanak sağlar. Hazır olduğum kadar sağlayarak verileri tam olarak teslim alındığını, bu verilerin üzerinde işlem dan engelleyebilirim.

Tüm veri alınan sonra ben bir XML veri adası ile yanıt responseText özelliğini kullanarak oluşturun. Büyük olasılıkla bildiğiniz gibi bir Web hizmetinden gelen yanıt XML biçimindedir. Bu durumda, bir Microsoft ADO.NET DataSet döndüren.

Bu kod bloğu, sonraki bölümde bir switch ifadesi Web hizmetinden döndürülen veri kümesi adını temel alarak uygun işlevini çağırmak için kullanır. Bu işlevler ayrıntılı biraz sonra kodu içine gideceğiz.

Artık XMLHTTP isteği gerçekleştiren koda bir göz atalım.
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);
Değişken szUrl olması için Web hizmetini çağırmak için kullanılan URL içerir. Sonra sahip olduğum bir if deyimi, sorgu dizesi değeri olarak geçirilen parametreleri üzerinde tacks. Ortamınızda, SOAP zarfının parametreleri eklemek isteyebilirsiniz. Her iki durumda da düzgün çalışır.

XMLHTTP nesnesinin Aç yöntemini sonraki denir. İlk üç bağımsız open yöntemi için kullandığım; yöntem, URL ve zaman uyumsuz çağrı olup olmadığını belirten bir Boole değeri.
Önemli Burada olduğum gibi bir zaman uyumsuz çağrı yapıyorsanız, onreadystatechanged özelliği aracılığıyla bir geri arama işlevi ayarlamanız gerekir.

İçerik türü için istek üstbilgisi ayarladıktan sonra ben önceden doldurulan dize değişkeni kullanarak bir SOAP Zarfı isteği gönderebilirim.

Biz şimdi tüm XMLHTTP istekte kodu çıkmadığınızı. Şimdi diyelim ki, tarayıcı arabirimi işler ve Web hizmeti çağrısı gelen yanıt, işleme koduna bir göz vardır.

İlk sayfayı ilk yüklediğinde çağrılır işlev şekilde işleyeceğiz.
function getCategories()
{

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

  }
Bu işleve yapmam ilk şey getDataFromWSişlev imzası saklamak için bir değişken oluşturmak olur. Window.setTimeout sonunda getDataFromWS işlevini çağırmak için bu işlev çağrısı gidiyorum çünkü ben bunu. Bu yaklaşımın amacı, Web hizmeti çağrısının tamamlanmasını beklerken durum kullanıcıya görüntülenecek ver sağlamaktır. Ben veri alındığını belirten bir ileti görüntülemek için bir DIV, InnerText değiştirme dikkat edin. I window.setTimeout çağrı getDataFromWS işlev sonra zamanlama ve bir milisaniye içinde çalıştırmak için ayarlayın.

Web hizmeti yanıt işleniyor

Daha önce ben bir geri arama işlevini yapılandırmak için onreadystatechanged özelliği kullanılan unutmayın. Ayrıca geri arama işlevi DataSet adı temel alınarak belirli bir işlev çağıran bir switch ifadesi içeren unutmayın. Bu durumda bizim DataSet adı CategoriesDS olur. Bu nedenle, geri arama işlevini processCategory işlevi çağrılır. Diyelim ki bu işlevi nasıl Web hizmetinden gelen yanıt çözümlenecek XML DOM kullanmak görmek için bir göz vardır.
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 işlevi XML yanıtı objXmlDoc nesnesine yüklenmiş olduğunu unutmayın. ProcessCategory işlevinde ı bu XML alabilir ve kategori açılan doldurmak için arkasını ayrıştırılamıyor.

Yapmam gereken ilk şey, XML yanıtı parçası kullanarak bir IXMLDOMNodeList nesnesi oluşturmak olur. I döndüren Web hizmeti çağrısı DataSet bir diffgram döndürülür ve yalnızca gerçekten ilgi olduğum bu yanıtı verileri DataSet nesnesine ekledim DataTable bölümüdür. İçin IXMLDOMNodeList nesnesinin DataTable içeren XML bloğundan oluşturarak alabilirim.

Web hizmeti için kod bakarsanız, DataSet nesnesine ekleyin ve kategoriler adlı bir DataTable oluşturmak olduğunu görürsünüz. Web hizmetinden döndürülen XML DataSet <CategoriesDS>bloğu içinde yer alır ve XML dosyası aşağıda gösterildiği gibi DataTable her satır ayrı <Categories>blokları içinde yer alır.

</Categories></CategoriesDS>Aşağıdaki dosyalar Microsoft'tan karşıdan yüklenebilir. Yükleme Merkezi:
Bu resmi kapatBu resmi aç
Karşıdan yükleme
GetCategories.xml paketini şimdi karşıdan yükle.
Bu resmi kapatBu resmi aç
Karşıdan yükleme
WSXMLHTTP.exe paketini şimdi karşıdan yükle.Support dosyalarını karşıdan yükleme hakkında daha fazla bilgi için Microsoft Bilgi Bankası'ndaki makaleyi görüntülemek üzere aşağıdaki makale numarasını tıklatın:
119591 Microsoft destek dosyaları çevrimiçi hizmetlerden nasıl alınır
Microsoft bu dosyada virüs taraması yapmıştır. Microsoft, dosyanın yüklendiği tarihte kullanılabilir olan en güncel virüs algılama yazılımını kullanmıştır. Dosya, üzerinde herhangi bir yetkisiz değişiklik yapılmasını engellemeye yardım eden geliştirilmiş güvenliğe sahip sunucularda depolanır.

Bu DataTable nesnesini içeren XML blok almak için ben şu kodu kullanın:
objNodeList = objXmlDoc.getElementsByTagName("Categories");
Bu <Categories>her düğüm içeren bir IXMLDOMNodeList nesnesi döndürür. Ben bu listeyi kullanarak, sonra yineleme bir for döngüsü.</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";
       
    }
Her <Categories>düğümü gereken iki düğüm olduğunu biliyorum zaten: <ID>ve <CategoryName>düğümlerini. Bu nedenle, yeni bir IXMLDOMNodeList oluşturmak ve alt düğümlerin geçerli ile doldurmak yapmam gereken ilk şey olup <Categories>düğümü.</Categories> </CategoryName> </ID> </Categories>
dataNodeList = objNodeList[i].childNodes;
Sonra Item yöntemini hem benim açılan doldurmak için gereken düğümleri erişim için kullanıyorum. İlk düğümü, veritabanından CategoryID alanı ve ikinci düğüm veritabanı alanından CategoryName alanını içerir. Ben yeni bir seçenek nesnesi oluşturmak, metin CategoryNameolarak ayarlamak, için CategoryIDdeğerini ayarlayın ve drpCategory için açılan ekleyin. Kalan işlevlerinde kullanılan kod, XML yanıtı gereken veri almasına ve sayfanın bölümlerini doldurmak için aynı yöntemi kullanır.

Not Biz küçük miktarlarda veri burada ile ilgili bu yana DOM kullanarak ihtiyacımız veri çekmek için bir yoludur. Büyük miktarda veri ile ilgili XSLT kullanmayı seçebilirsiniz.

Tüm çalışması nasıl

Tüm bu nasıl çalıştığını gritty ayrıntılarını ele alınan, kendiniz için iş görmek için dahil edilen örnek dosyaları nasıl kullanabileceğinizi gitmek için zamanı.

Web hizmetini dağıtma

ASP.NET Web hizmeti dağıtmak için basitçe bağlı Web hizmet örnek Web sunucunuzun kök dizinine ayıklayın. Bağlantı dizesini değiştirin ve DynaProducts.asmx için kod açmak gerekir. Az, SA parolasını girmeniz gerekir. Bu değişikliği yaptıktan sonra Web hizmeti yeniden derleyin.

HTML dosyasını dağıtma

HTML dosyasını Web hizmeti için bir URL içeren szUrl adlı bir değişken içerir. Bu değişken, işlev altına getDataFromWS işlevinde bulacaksınız. Yukarıda dağıtılan Web hizmetinin URL'sini değiştirmek gerekir.

Hem Web hem de HTML dosyasını dağıtmış sonra HTML dosyasına göz atın. Yüklediğinde, kategori açılır Web hizmetine ilk XMLHTTP isteği tarafından doldurulur. Doldurulan sonra yaslanıp ürünleri açılan dolduran sonraki XMLHTTP isteği için bir kategori seçin. Bir ürün ürünler açılır listesinden seçerek bu ürün hakkında veri içeren bir tablo dolduracaktır.

Sayfa geri herhangi biri bu XMLHTTP isteklerini sırasında deftere nakletmez dikkat edin. Güzelliği, XMLHTTP isteklerini olmasıdır. Bu büyük bir sayfada yeterli, sayfa ayrıca kaydırma konumunu "kullanıcısı yanıp sönen olmadan" tutulan. Bana sor, güçlü oldukça bazı şeyler olur!

Daha fazla bir şey: Bu makalede, XMLHTTP Web hizmetini sorgulamak için kullandım. I gibi kolayca bir ASPX sayfası veya bir ASP sayfası için istek yapmak için kullanmış. Bu teknolojiyi kullanmak için nasıl koyabilirsiniz olanaklar sonsuzdur. Umarım XMLHTTP gelecekte Web uygulama geliştirme yararlı bulabilirsiniz.
Her zaman, fikir fikirler istediğiniz konularda göndermek ücretsiz gelecekteki sütunları olarak veya kullanarak Microsoft Knowledge Base'de bulunan Bunun için sor Form.

Özellikler

Makale numarası: 893659 - Last Review: 21 Mart 2013 Perşembe - Gözden geçirme: 7.0
Bu makaledeki bilginin uygulandığı durum:
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
Anahtar Kelimeler: 
kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMttr
Machine-translated Article
ÖNEMLİ: Bu makale, bir kişi tarafından çevrilmek yerine, Microsoft makine-çevirisi yazılımı ile çevrilmiştir. Microsoft size hem kişiler tarafından çevrilmiş, hem de makine-çevrisi ile çevrilmiş makaleler sunar. Böylelikle, bilgi bankamızdaki tüm makalelere, kendi dilinizde ulaşmış olursunuz. Bununla birlikte, makine tarafından çevrilmiş makaleler mükemmel değildir. Bir yabancının sizin dilinizde konuşurken yapabileceği hatalar gibi, makale; kelime dağarcığı, söz dizim kuralları veya dil bilgisi açısından yanlışlar içerebilir. Microsoft, içeriğin yanlış çevrimi veya onun müşteri tarafından kullanımından doğan; kusur, hata veya zarardan sorumlu değildir. Microsoft ayrıca makine çevirisi yazılımını sıkça güncellemektedir.
Makalenin İngilizcesi aşağıdaki gibidir: 893659

Geri Bildirim Ver

 

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