如何从客户端 JavaScript 调用 .NET Web 服务使用 InternetExplorer 和 MSXML

如果您有根据用户输入 HTML 窗体上的选项对想要提供列表， 可通过使用对 MSXML 和 JavaScript 提供功能使此交互式。 针对本文, 我们将说明创建 Web 服务， 使它作为对用户可从选择列表呈现新闻复制到 <SELECT> 元素。
 
创建存储过程以获取所需数据
 
创建 Web 服务中第一步是以创建存储过程， 将提取数据， 需要根据用户已键入到表单参数。 如果数据库提供 XML 功能, 通常最好能够利用此功能。 在本示例, 我使用 FORXMLEXPLICIT 来呈现 XML， 将作为最终 HTML， 客户将呈现。 如果您的数据库平台不支持此功能, 此操作或者进行客户端使用 MSXML 或使用 System.Xml 中类服务器上。
 

CREATE PROCEDURE dbo.WebServiceProc (@param VARCHAR(4)) AS
  SELECT  1 AS Tag,
          NULL AS Parent,
          NULL AS [SELECT!1],
          '10' AS [SELECT!1!SIZE],
         'selectList' AS [SELECT!1!ID],
         'font-family:Verdana;font-size:XX-Small;100%;' AS [SELECT!1!STYLE],
         NULL AS [OPTION!2]
  UNION ALL
  SELECT  2 AS Tag,
          1 AS Parent,
          NULL AS [SELECT!1],
          NULL AS [SELECT!1!SIZE],
          NULL AS [SELECT!1!ID],
          NULL AS [SELECT!1!STYLE],
          MyDatabase.dbo.MyTable.MyListItem AS [OPTION!2]
  FROM    MyDatabase.dbo.MyTable
  WHERE   MyDatabase.dbo.MyTable.MyParameter = @param
  ORDER BY [OPTION!2]
  FOR XML EXPLICIT

 
此存储过程, 使用 SQL Server 2000, 将输出类似以下内容：
<SELECT SIZE="10" ID="mySelectObject" STYLE="font-family:Verdana;font-size:XX-Small;100%"><OPTION>Option 1</OPTION><OPTION>Option 2</OPTION></SELECT>
 
因为它是有效的 HTML 正如您看到, 此 XML, 客户机上直接使用。
创建 Web 服务
下一步是以创建 Web 服务， 要消耗。 为您如果是使用 SQL Server 2000, 大部分的工作已经完成。 如果没有, 然后可能需要使用数据， 将数据库返回以形成它到 XML， 您可通过回客户端。 项目中首先, 应创建新 Web 服务。 然后, 以下 C# 代码将返回 XML， 您需要在客户端以呈现此 SELECT 对象：
 

[WebMethod]

public XmlDocument GetSelectObject(string param) {
  XmlDocument xmlReturnDocument = new XmlDocument();
  using (SqlConnection connMyConnection = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"])) {
    using (SqlCommand cmdWebServiceProc= new SqlCommand("MyDatabase.dbo.WebServiceProc", connMyConnection)) {
      cmdWebServiceProc.CommandType = CommandType.StoredProcedure;
      cmdWebServiceProc.Parameters.Add("@pram", SqlDbType.VarChar, 4).Value = param;
      try {
        connMyConnection.Open();
        XmlTextReader xtrSelectXml= (XmlTextReader)cmdWebServiceProc.ExecuteXmlReader();
        xmlReturnDocument.Load(xtrSelectXml);
      } catch (SqlException ex) {
        // error handling elided for clarity
      }
    }
  }
  return xmlReturnDocument;
}

 
现在您已经创建 Web 服务, 它应该能够测试使用与 .NET 框架提供了浏览器界面。
创建客户端脚本
既然我们让 Web 服务来调用, 我们可以实现客户端脚本。 首先是所有, HTML 代码中您可以创建 div 我们将在其中插入 SELECT 元素， 我们正在创建：
<div id="divWebServiceResults" />
当我创建客户端脚本使 Web 服务调用, 时我想向用户提供反馈以便它们将理解为什么浏览器不响应对于片刻或被执行两, 以及某些操作。 不但是, InternetExplorer 不 re-render 页以便我们要创建函数， 显示用户不得不分解, 我们调用首先, 输入， 然后计划实际处理 Web 服务调用调用次如函数返回, 直到它显示：

function getWebServiceResults() {
  var divFeatures = document.getElementById("divWebServiceResults");
  divFeatures.innerHTML = "<SELECT size='10' id='selectList' style='font-family:Verdana;font-size:XX-Small;100%;'>" +
                          "<OPTION>Please wait while I load data</OPTION>" +
                          "</SELECT>";
  window.setTimeout(getWebServiceResultsAfterInit, 1);
}
 

实际处理发生在回调, 其中我们延迟由 1 毫秒。 此处, 我们要创建 XML 文档和 XML HTTP 对象。 我们可以使用 XML HTTP 来发布到 Web 服务, 和结果存储在该文档。 当我们创建这些对象, 我们来迭代通过数组程序 ID。 对多种原因, Microsoft 已决定要停止使用版本独立程序 ID。 我们希望确保我们使用最新版本, 以便我们要从最新 - 4.0 开始。 我们直到 1.0 我们将然后迭代向后。 如 MSXML 自 Windows 95 OSR 2.5 已随操作系统确保大多数客户将使用此脚本, 工作。 如果客户端使用 Windows 2000, 它们将有默认的 MSXML 2.5。 如果使用 WindowsXP, 然后它们将有安装 MSXML 3.0。 对于参数从当前窗体, 构建我们 SOAP 信封一旦我们有实例此对象, 我们可获取值和提交请求当您浏览到方法 （如果想要查看特定格式对 Web 服务, 其中是只一个 XML 字符串 - ASMX 浏览器界面将提供这）, 对设置其中 （可还进行检查浏览器界面中) 我们请求头将当您浏览到方法 （如果要查看特定格式对 Web 服务, 它是只 - XML 字符串 ASMX 浏览器界面为您提供此), 设置我们请求头其中 （可还进行检查浏览器界面中） 和提交请求。 完成与此调用会异步, HTTP 请求后设置了我们还调用来调用其他函数。
您应当注意这里什么是简单性是使 Web 服务请求。 所有， 您需要做是调用约定, 审阅和生成备份此约定， 符合 HTTP 请求 （这是什么但纯文本）。 通过设置页眉和构建, 某些 XML 来发送 SOAP 请求已完成， 您需要执行。

var objXmlDoc;
var objHttp;
function getWebServiceResultsAfterInit() {
  // Must be using IE for this to work
  if (window.ActiveXObject) {
    // Create the XML Document object
    var bDocument = false;
    var aszDocumentProgIDs = [ "MSXML2.DOMDocument.4.0",
                               "MSXML2.DOMDocument.3.0",
                               "MSXML2.DOMDocument",
                               "MSXML.DOMDocument",
                               "Microsoft.XmlDom" ];
    for (var i=0; !bDocument && i < aszDocumentProgIDs.length; i++) {
      try {
        objXmlDoc = new ActiveXObject(aszDocumentProgIDs[i]);
        bDocument = true;
      } catch (objException) {
        // error handling elided for clarity
      }
    }
    // Create the XML HTTP object
    var bHttp = false;
    var aszHttpProgIDs = [ "MSXML2.XMLHTTP.4.0",
                           "MSXML2.XMLHTTP.3.0",
                           "MSXML2.XMLHTTP",
                           "Microsoft.XMLHTTP" ];
    for (var i = 0; !bHttp && i < aszHttpProgIDs.length; i++) {
      try {
        objHttp = new ActiveXObject(aszHttpProgIDs[i]);
        bHttp = true;
      } catch (objException) {
        // error handling elided for clarity
      }
    }
    // If we failed to create both objects, then throw an exception and return
    if (!bDocument || !bHttp) {
      throw "MSXML not found on your computer.";
      return;
    }
    // Get the parameter
    var oParameter = document.getElementById("textboxParameter");
    var szParameter = oParameter.value;
    // 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>" +
                  "    <GetSelectObject xmlns=\"http://example.org/webservices/\">" +
                  "      <param>" + szParameter + "</param>" +
                  "    </GetSelectObject>" +
                  "  </soap:Body>" +
                  "</soap:Envelope>"
    // Set up the post
    objHttp.onreadystatechange = getWebServiceResultsAfterLoad
    objHttp.open("post", "/MyWebService.asmx");
    objHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
    objHttp.setRequestHeader("SOAPAction", "http://example.org/webservices/GetSelectObject");
    objHttp.send(strEnvelope);
  }
}

 
既然我们已发送请求, 我们只需要等待请求以返回如完成, 和实现我们处理程序以获取结果并输出结果。 我们检查就绪状态以确保它已完成。 若是, 然后我们可查找我们对象, 并插入我们文本。 我们这里, 可利用的实际上我们格式设为有效 HTML, 我们 XML 返回并只可找到 SELECT 标记 （这是我们请求内容的根目录） 并将是我们 div innerHTML 设置该返回。 在此处, 我们实现我们有 SQLServer 执行所有工作来获得结果和格式化它们正确, 使其余的代码只需要转发以及这些结果， 直至最后到达浏览器。 还应注意， 我们执行搜索特定节点。 因为我们正在使用原始 XML, 结果打算内的 XML SOAP 信封, 嵌入而我们希望深入此处到达只结果， 我们希望找到。

 function getWebServiceResultsAfterLoad() {
  if (objHttp.readyState == 4) {
    // Get the return envelope
    var szResponse = objHttp.responseText;
    objXmlDoc.loadXML(szResponse);
    // Get the div object to insert into
    var divWebServiceResults = document.getElementById("divWebServiceResults");
    // Select the 'Select' node and put its XML into the inner HTML
    var nodeSelect = objXmlDoc.getElementsByTagName("SELECT").item(0);
    if (nodeSelect.childNodes.length > 0) {
      divWebServiceResults.innerHTML = nodeSelect.xml;
    } else {
      divWebServiceResults.innerHTML = "<SELECT size='10' id='selectList' style='font-family:Verdana;font-size:XX-Small;100%;'>" +
                                       "<OPTION>No data found for this parameter</OPTION>" +
                                       "</SELECT>";
    }
  }
}