XMLHTTP kullanan dinamik sayfa güncelleştirmeleri

XMLHTTP kullanan dinamik sayfa güncelleştirmeleri

Bu sütunu gereksinimlerinize göre özelleştirmek için, sizi ilginizi alan konular ve gelecek Bilgi Bankası makale ve Destek Ses sütunlarında ele almak istediğiniz sorunlar hakkında fikirlerinizi göndermeye davet etmek istiyoruz. Fikirlerinizi ve geri bildiriminizi, Ask For It formunu kullanarak gönderebilirsiniz. Bu sütunun en altında formun bağlantısı da var.

Genel genel bakış

XMLHTTP, istemciden Web sunucusuna istek göndererek ve BIR XML veri adası döndürerek çalışır. Alınan XML'nin yapısına bağlı olarak, XSLT veya XML DOM'sini kullanarak bunu işleyebilirsiniz ve sayfanın bölümlerini bu verilere bebilirsiniz. Bu son derece güçlü bir tekniktir.

NoteMicrosoft, Internet Explorer için Web Hizmeti davranışı sunar ve web hizmetlerini hızlı ve ASP.NET zaman uyumsuz aramalar yapar. Bununla birlikte, bu davranış desteklenmiyor ve sayfayı zaman uyumsuz olarak güncelleştirmenin en iyi yolu değildir. Bunun yerine XMLHTTP kullan gerekir!


Bu sütunda üzerinde çalışacağız örnekte, XMLHTTP aracılığıyla bir web hizmetine ASP.NET arama yaptım. Web hizmeti, yerel SQL Server'daki Northwind veritabanını sorgular ve istemciye XML diffgramı biçiminde bir Veri Kümesi verir. Bundan sonra XML DOM'sini kullanarak bu XML verilerini ayrıştıracak ve sayfamı bölümlerini dinamik olarak güncelleştir yapacağım. Bunların hepsi bir gönderi geri gönderisi olmadan yapılır.

Web hizmeti

Kullanabileceğim Web hizmeti DynaProducts olarak adlandırılmıştır. C# ile ASP.NET ve aşağıdaki üç yöntemi içeren temel bir Web hizmetidir.

• GetCategories – Kategoriler tablosunda tüm kategorileri içeren bir Veri Kümesi döndürür.
  

• GetProducts – Yönteme geçirilen kategorinin tüm ürünlerini içeren bir Veri Kümesi döndürür.
  

• GetProductDetails – ÜrünKimlik Bilgileri yönteme geçirilen ürünle ilgili ayrıntıları içeren bir Veri Kümesi döndürür.
  

HTML sayfası

Bu örnekle ilgili olarak ilk olarak, ASP.NET Web hizmeti yeni bir sayfa değilken güncelleştiriyor ASP.NET. Bu yalnızca normal bir HTML sayfasıdır. Ancak sayfaya oldukça fazla istemci tarafı JavaScript ekledim ve web hizmetine çağrı yapan betik.



ŞIMDI HTML sayfasındaki ilk kod parçacığına 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, sayfada yer alan en büyük kod parçası ve neler olduğunu anlamanız için ayrıntılı olarak bu kodun üzerinden gitmek istiyorum.



Bu betik bloğunda iki değişken oluşturdum: objHttp ve objXmlDoc. BUNLAR, XMLHTTP nesnem ve XML DOM nesnem için kullanabileceğim değişkenlerdir. Hemen sonra getDataFromWS işlevinin işlev tanımı olur. Bu, Web hizmetine istemci tarafı çağrısı yapmakla sorumlu olan işlevdir. Aşağıdaki dört bağımsız değişkeni alır; ikisi isteğe bağlıdır:

• methodName – Web hizmetine çağrı yapmak için kullanılan yöntemin adı.
  

• dataSetName – Web hizmeti tarafından döndürülen Veri Kümesi adı.
  

• wsParamValue – Varsa Web hizmetine geçirilen parametrenin değeridir. (İsteğe bağlı)
  

• wsParamName – Varsa Web hizmetine geçirilen parametrenin adı. (İsteğe bağlı)
  

GetDataFromWS işlevini parçalara dönüştüralım ve her birini tartışalım. İşte ilk parçacık:

// 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 nesnesini ve XML Belgesi nesnesini oluşturur. Ardından SOAP zarfını oluşturmaya başlıyorum.

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

Bu kodda, SOAP zarfını Web hizmetine geçeceğim bir dize değişkenine atiyorum. Aslında Web hizmetiniz için SOAP zarfını biçimlendirmeyi keşfetmek oldukça kolaydır. Web hizmetine göz atabilir ve bu yöntem için SOAP zarfını görmek için yöntemlerden birini tıklatmanız gerekir. Örneğin, bu makale için oluşturduğum wsXMLHTTP Web hizmetinin GetCategories yöntemine göz atarak şöyle görüyorum:ASP.NET, SOAP zarfını http POST ve HTTP GET için nasıl biçimlendireceklerini



söyler. Bu makalede sunulan örnekte, HTTP POST'ı kullanıyor olacak.



Şimdilik fena değil. Şimdi kodun sonraki bölümüne bakalım.

// Set up the post
objHttp.onreadystatechange = function(){

// a readyState of 4means we're ready to use thedata returned byXMLHTTP
if (objHttp.readyState == 4)
{

// getthe return envelope
   varszResponse= objHttp.responseText;

   // loadthe 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 aracılığıyla bir istek geldiğinde, XMLHTTP nesnesi isteğin durumunu izlemek için readyState özelliğini kullanır. Tüm veriler Web hizmetinden geri geldiğinde, readyState özelliği 4 değerine döner. XMLHTTP nesnesinin onreadystatechange özelliği, readyState özelliği değiştirilse çağrılacak bir geri arama işlevi ayarlamaya olanak sağlar. Verilerin tamamının alınamaya hazır olduğundan, hazır olana kadar bu veriler üzerinde hareket etmeye devam olabilirim.



Tüm veriler alındıktan sonra, responseText özelliğini kullanarak yanıtın yer aldığı bir XML veri adası oluşturabilirsiniz. Büyük olasılıkla bildiğiniz gibi, Web hizmetinin yanıtı XML biçimindedir. Bu durumda, Microsoft Veri Kümesi'ADO.NET döndür sürüyorum.



Bu kod bloğunda sonraki bölümde, Web hizmetlerinden döndürülen DataSet adına bağlı olarak uygun işlevi çağıran bir switch deyimi kullanılır. Bu işlevlerin koduna biraz daha sonra ayrıntılı olarak geçeceğim.


Şimdi, XMLHTTP isteğini gerçekleştiren koda bakalı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, netlik adına Web hizmetini aramak için kullanılan URL'yi içerir. Daha sonra, QueryString değeri olarak geçirilen tüm parametrelere bağlı bir eğer deyimim var. Ortamınıza, parametreleri SOAP zarfa eklemek istiyor olabilir. Her iki şekilde de uygun olacaktır.



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

İçerik türü için istek üst bilgisi ayar olduktan sonra, daha önce doldurttum dize değişkensini kullanarak isteği SOAP zarfı olarak gönderiyorum.



XmlHTTP isteği yapan tüm kodun üzerinden geçtik. Şimdi, tarayıcıda arabirimin işleniyor olduğu ve Web hizmeti çağrısından gelen yanıtın işleniyor olduğu koda bakalım.

İlk olarak, sayfa ilk kez yüklenirken çağrılan işleve bakıcaz.

function getCategories()
{

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

  }

Bu işlevde ilk olarak, getDataFromWS için işlev imzasını depolamak için bir değişken oluşturmak istiyorum. Bunu, getDataFromWS işlevini çağıracak şekilde bu işlevin sonundaki window.setTimeout çağrısı yapacağım için yapacağım. Bu yaklaşımın amacı, Web hizmeti aramasını tamamla beklerken durumu kullanıcıya görüntülememe izin vermektir. Verilerin alınıyor olduğunu belirten bir ileti görüntülemek için DIV'in innerText'ini değiştir olduğumu fark ettiysiniz. Ardından getDataFromWS işlevini window.setTimeout çağrısı aracılığıyla zamanlandım ve bir mili saniye içinde çalıştıracak şekilde ayarlandı.

Web hizmeti yanıtı iş işleme

Daha önce geri arama işlevini yapılandırmak için onreadystatechanged özelliğini kullandığım zamanları unutmayın. Ayrıca, geri arama işlevinin DataSet adını temel alan belirli bir işlevi çağıran bir anahtar deyimi içerdiğini de unutmayın. Bu durumda, Veri Kümesi adımız CategoriesDS'tir. Bu nedenle, processCategory işlevi geri çağırma işlevinden çağrılır. Web hizmetinin yanıtını ayrıştırmak için XML DOM'nun nasıl kullanılası olduğunu görmek için bu işleve bir bakalım.

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şlevinin yanıttan XML'yi objXmlDoc nesnesine yüklemiş olduğunu unutmayın. ProcessCategory işlevinde, bu XML'yi alıp Kategori açılan listesini doldurmak için bu XML'yi ayrıştırmak istiyorum.



İlk olarak, XML yanıtının bir kısmını kullanarak bir IXMLDOMNodeList nesnesi oluşturmam gerekir. Web hizmeti aramasını geri döndüren Veri Kümesi bir diffgram olarak döndürülür ve bu yanıtın gerçekten ilgilendiğim tek bölümü Veri Kümesi'ne ekledim DataTable'dan gelen verilerdir. DataTable'ın yer alan XML bloğundan bir IXMLDOMNodeList nesnesi oluşturarak buna ulaşabilirsiniz.



Web hizmetinin koduna bakarsanız, Kategoriler adlı bir Veri Tablosu oluşturarak bunu Veri Kümesi'ne ekleylun. XML Web hizmetlerinden döndürül olduğunda, DataSet bir <CategoriesDS> bloğu içindedir ve DataTable'dan gelen her satır aşağıdaki XML dosyasında gösterildiği gibi ayrı <Kategorileri> bloklarında yer almaktadır.

Aşağıdaki dosyalar Microsoft İndirme Merkezi'nden indirilebilir:
Paketi GetCategories.xml indirin.
Paketi WSXMLHTTP.exe indirin.Microsoft Destek dosyalarını indirme hakkında daha fazla bilgi için, Microsoft Bilgi Bankası'nın makaleyi görüntülemek üzere aşağıdaki makale numarasına tıklayın:

119591 Microsoft destek dosyalarını çevrimiçi hizmetlerden alma Microsoft bu
dosyayı virüsler için taradı. Microsoft, dosyanın kullanıma sunulduğu tarihteki en güncel virüs tarama 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'ın yer alan XML bloğunı almak için aşağıdaki kodu kullanabilirsiniz:

objNodeList = objXmlDoc.getElementsByTagName("Categories");

Bu, her kategori ve kategori düğümünü içeren bir IXMLDOMNodeList <döndürür> döndürür. Daha sonra döngü için kullanarak bu listede yineleriz.

// 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 <Kategorisi> düğümünün ihtiyacım olan iki düğümü olduğunu zaten biliyorum: <Kimliği> düğümü ve <CategoryName> düğümü. Bu nedenle, ilk olarak yeni bir IXMLDOMNodeList oluşturmak ve bunu geçerli kategori kategorileri ve düğümdeki alt <> doldurmaktır.

dataNodeList = objNodeList[i].childNodes;

Daha sonra, açılan listemi doldurmak için ihtiyacım olan düğümlerin her ikisine de erişmek için öğe yöntemini kullandım. İlk düğüm veritabanından CategoryID alanını ve ikinci düğüm de veritabanındaki CategoryName alanını içerir. Yeni bir Option nesnesi oluşturur, metni CategoryName olarak ayarlar, değeri CategoryID olarak ayarlanır ve bunu drpCategory açılan kutusuna eklerim. Kalan işlevlerde kullanılan kod, XML yanıtından gereken verileri çekmek ve sayfanın bölümlerini doldurmak için aynı yöntemi kullanır.

Burada çok az miktarda veriyle karşı karşıyayız, DOM kullanmak ihtiyacımız olan verileri dışarı çekmek için mükemmel bir yol sağlar. Büyük miktarda veriyle ilgileniyorsanız, bunun yerine XSLT kullanmayı seçebilirsiniz.

Bunların hepsi nasıl çalışır?

Artık tüm bunların nasıl çalıştığını ayrıntılı olarak ele alınana göre, şimdi dahil edilen örnek dosyaları kullanarak kendiniz için nasıl kullanabileceğiniz hakkında bilgi edinebilirsiniz.