XMLHTTP を使用した動的ページ更新

XMLHTTP を使用した動的ページ更新

この列をニーズに合わせてカスタマイズするには、興味のあるトピックや、今後のサポート技術情報の記事やサポートボイスの列で対処したい問題に関するアイデアを送信して欲しいと思います。 [質問する] フォームを使用して、アイデアや フィードバックを送信 できます。 この列の下部には、フォームへのリンクも表示されます。

一般的な概要

XMLHTTP は、クライアントから Web サーバーに要求を送信し、XML データ島を返します。 受信する XML の構造に応じて、XSLT または XML DOM を使用して操作し、ページの一部をそのデータにバインドすることができます。 これは非常に強力な手法です。

NoteMicrosoft では、Web サービスの動作をInternet Explorer Web サービスへの非同期呼び出ASP.NETを迅速かつ簡単に行う機能を提供しています。 ただし、この動作はサポートされていません。ページを非同期に更新する最適な方法ではありません。 代わりに XMLHTTP を使用する必要があります。


この列で作業する例では、XMLHTTP を通じて 3 つの Web サービス呼び出しを ASP.NET Web サービスに対して行います。 Web サービスはローカル コンピューターで Northwind データベースに対してクエリを実行しSQL Server XML 差分の形式で DataSet をクライアントに返します。 次に、XML DOM を使用して XML データを解析し、ページの一部を動的に更新します。 このすべては、投稿を取り戻さずに行われます。

Web サービス

使用する Web サービスは DynaProducts という名前です。 これは、C# ASP.NET記述され、次の 3 つの方法を含む Web サービスの基本的な機能です。

• GetCategories – Categories テーブルのすべてのカテゴリを含む DataSet を返します。
  

• GetProducts – メソッドに渡されるカテゴリのすべての製品を含む DataSet を返します。
  

• GetProductDetails – ProductID がメソッドに渡される製品の詳細を含む DataSet を返します。
  

HTML ページ

このサンプルについて最初に気が付く可能性があるのは、ASP.NET Web サービスが最新のページではない場合に更新ASP.NETです。 通常の HTML ページです。 ただし、ページにかなり多くのクライアント側 JavaScript を追加しました。Web サービスの呼び出しを行うスクリプトです。



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);
  }
}

これはページの最大のコードの一部であり、詳細に説明して、何が起こっているのかを理解したいと思います。



このスクリプト ブロックの上部で、objHttp と objXmlDoc という 2 つの変数を作成しました。 XMLHTTP オブジェクトと XML DOM オブジェクトに使用する変数は次のとおりです。 その直後に getDataFromWS 関数の関数定義を指定します。 これは、Web サービスのクライアント側呼び出しを行う責任がある関数です。 次の 4 つの引数を受け取ります。2 つの引数は省略可能です。

• methodName – Web サービスで呼び出すメソッドの名前。
  

• dataSetName – Web サービスによって返される DataSet の名前。
  

• wsParamValue – Web サービスに渡されるパラメーターの値 (該当する場合)。 (省略可能)
  

• wsParamName – Web サービスに渡されるパラメーターの名前 (該当する場合)。 (省略可能)
  

getDataFromWS 関数を分割し、それぞれについて説明します。 最初のスニペットは次のとおりです。

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

このコード ブロックによって、XMLHTTP オブジェクトと XML Document オブジェクトが作成されます。 次に、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>";

このコードでは、SOAP エンベロープを文字列変数に割り当て、Web サービスに渡します。 実際には、Web サービス用に SOAP エンベロープの書式を設定する方法を簡単に見つけることができます。 Web サービスを参照し、そのメソッドの SOAP エンベロープを表示する方法のいずれかをクリックします。 たとえば、この記事で作成した wsXMLHTTP Web サービスの GetCategories メソッドを参照するときに表示される情報を次に示します

。 ASP.NET では

、HTTP POST と HTTP GET に対して SOAP エンベロープを書式設定する方法について説明します。 この記事で示す例では、HTTP POST を使用します。



今のところ大丈夫です。 では、コードの次のセクションを見てみます。

// 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 を介して要求が行われた場合、XMLHTTP オブジェクトは readyState プロパティを使用して要求の状態を追跡します。 すべてのデータを Web サービスから受信すると、readyState プロパティは値 4 に変更されます。 XMLHTTP オブジェクトの onreadystatechange プロパティを使用すると、readyState プロパティが変更された場合に呼び出されるコールバック関数を設定できます。 データ全体を確実に受信することで、準備が整うまで、そのデータに対する処理を続け続けできます。



すべてのデータを受信したら、responseText プロパティを使用して、応答を含む XML データ 島を作成します。 ご存知のように、Web サービスからの応答は XML 形式です。 この場合は、Microsoft データ セットまたは DataSet ADO.NET返します。



このコード ブロックの次のセクションでは、Switch ステートメントを使用して、Web サービスから返される DataSet の名前に基づいて適切な関数を呼び出します。 これらの関数のコードについては、後で詳しく説明します。


次に、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);

変数 szUrl には、わかりやすくするために Web サービスの呼び出しに使用される URL が含まれている。 次に、QueryString 値として渡されるパラメーターに取り組む if ステートメントを作成します。 使用している環境では、SOAP エンベロープにパラメーターを追加できます。 どちらの方法でも問題ありません。



XMLHTTP オブジェクトの開いているメソッドは次に呼び出されます。 最初の 3 つの引数を open メソッドに使用しました。呼び出しが非同期かどうかを指定するメソッド、URL、ブール値。
重要 ここで非同期呼び出しを行う場合は、onreadystatechanged プロパティを使用してコールバック関数を設定する必要があります。

コンテンツ タイプの要求ヘッダーを設定した後、先ほど入力した文字列変数を使用して、SOAP エンベロープとして要求を送信します。



XMLHTTP 要求を作成するコードのすべてについて説明しました。 次に、ブラウザーでインターフェイスを処理し、Web サービス呼び出しからの応答を処理するコードを見てみます。

最初に、ページが最初に読み込まれるときに呼び出される関数を確認します。

function getCategories()
{

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

  }

この関数で最初に行うのは、getDataFromWS の関数署名を格納する変数を作成する方法です。 この操作を行うには、この関数の最後に window.setTimeout を呼び出して getDataFromWS 関数を呼び出します。 この方法の目的は、Web サービスの呼び出しが完了するのを待っている間にユーザーに状態を表示する方法です。 DIV の内側のテキストを変更して、データが取得されたことを示すメッセージを表示します。 次に、window.setTimeout 呼び出しを通じて getDataFromWS 関数をスケジュールし、1 ミリ秒で実行する設定をします。

Web サービス応答の処理

前に、onreadystatechanged プロパティを使用してコールバック関数を構成しました。 また、コールバック関数には、DataSet 名に基づいて特定の関数を呼び出すスイッチ ステートメントが含まれているのも覚えておいてください。 この場合、DataSet 名は CategoriesDS です。 そのため、processCategory 関数はコールバック関数から呼び出されます。 この関数を見て、XML DOM を使って 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";

    }

  }

getDataFromWS 関数は、応答から objXmlDoc オブジェクトに XML を読み込んだことを覚えておいてください。 processCategory 関数では、その XML を解析して [カテゴリ] ドロップダウンを設定します。



最初に、XML 応答の一部を使用して IXMLDOMNodeList オブジェクトを作成します。 Web サービス呼び出しから返す DataSet は差分として返され、その応答の最も関心のある部分は、DataSet に挿入したデータテーブルのデータのみです。 データテーブルを含む XML ブロックから IXMLDOMNodeList オブジェクトを作成すると、このオブジェクトにアクセスできます。



Web サービスのコードを確認すると、Categories という名前の DataTable を作成し、DataSet に追加します。 Web サービスから XML を返す場合、DataSet は <CategoriesDS> ブロック内に格納され、DataTable の各行は、次の XML ファイルに示すように個別の <カテゴリ> ブロックに含まれます。

Microsoft ダウンロード センターから次のファイルをダウンロードできます。
ダウンロードGetCategories.xmlダウンロードします。
今すぐWSXMLHTTP.exeダウンロードします。Microsoft サポート ファイルをダウンロードする方法の詳細については、次の記事番号をクリックして、Microsoft サポート技術情報の記事を表示してください。

119591 Microsoft がウイルスについてこのファイルをスキャンしたオンライン サービスから Microsoft サポート
ファイルを取得する方法。 配布ファイルはセキュリティで保護されたサーバー上に置かれており、権限のない第三者が無断でファイルを変更できないようになっています。 配布ファイルはセキュリティで保護されたサーバー上に置かれており、権限のない第三者が無断でファイルを変更できないようになっています。


その DataTable を含む XML ブロックを取得するには、次のコードを使用します。

objNodeList = objXmlDoc.getElementsByTagName("Categories");

これにより、Categories オブジェクトとノードの各列を含む IXMLDOMNodeList <返>されます。 次に、for ループを使用してそのリストを反復処理します。

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

    }

各 <Categories> ノードには、<ID> ノードと <CategoryName ノードの 2 つのノードが必要>しています。 そのため、最初に新しい IXMLDOMNodeList を作成し、現在のカテゴリ ノードの子ノードを<します>します。

dataNodeList = objNodeList[i].childNodes;

次に、item メソッドを使用して、ドロップダウンに設定する必要があるノードの両方にアクセスします。 最初のノードにはデータベースの CategoryID フィールドが、2 番目のノードにはデータベースの CategoryName フィールドが含まれている。 新しい Option オブジェクトを作成し、テキストを CategoryName に設定し、値を CategoryID に設定して、drpCategory ドロップダウンに追加します。 残りの関数で使用されるコードは、XML 応答から必要なデータを取得し、ページの一部を入力するために同じメソッドを使用します。

ここでは少量のデータを扱っていますが、DOM を使用すると、必要なデータを引き出す便利な方法です。 大量のデータを扱っていた場合は、XSLT を使用することもできます。

すべての作業を行う方法

ここでは、この機能の詳細について説明しました。ここでは、含まれているサンプル ファイルを使用して、自分で動作を確認する方法について説明します。