Şu anda çevrimdışısınız; İnternet'in yeniden bağlanması bekleniyor

XMLHTTP kullanarak dinamik sayfa güncelleştirmeleri

Ö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.

893659
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.
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.

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

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 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;				}			}
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:
Karşıdan yüklemeGetCategories.xml paketini şimdi karşıdan yükle.
Karşıdan yüklemeWSXMLHTTP.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.

NotBiz 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.

Uyarı: Bu makalenin çevirisi otomatik olarak yapılmıştır

Özellikler

Makale No: 893659 - Son İnceleme: 03/21/2013 10:04:00 - Düzeltme: 7.0

  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
  • kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMttr
Geri bildirim