适用于 ASP.NET 的 AJAX

• 下载源代码 - 13.8 Kb
• 下载演示项目 - 13.8 Kb

简介 - 什么是 AJAX？

AJAX，即异步 JavaScript 和 XML，是一种使用 JavaScript 和 XML 与 Web 服务器通信而无需刷新网页的便捷方式。您可以访问 此网页 以获取有关 AJAX 的更多信息；它包含一个很好的链接列表。

为什么使用 AJAX？

有几个原因可以使用 AJAX 代替传统的表单提交。首先，它非常轻量级：与其将所有表单信息发送到服务器并获取所有渲染后的 HTML，不如仅发送服务器处理所需的数据，并仅获取客户端处理所需的内容。轻量级意味着快速。使用 AJAX 的第二个原因是（如上链接中的徽标所示）AJAX 很酷。

在 ASP.NET 中使用 AJAX

尽管 AJAX 是一种使用 JavaScript 的客户端技术，但客户端-服务器交互非常重要。

Adam Vandenberg 编写了一个不错的 JavaScript 封装器 用于 AJAX。他的封装器甚至执行缓存，但此处不会讨论。他的封装器在代码示例和项目文件中使用。

使用代码

代码中有四个重要部分需要查看

1. HTML

   有两个表单元素将与 AJAX 交互。输入按钮“btn1”将调用 AJAX 代码，该代码将进行服务器调用并填充选择元素“select1”。

   <select id="select1"></select>
   <input id="btn1" value="Fill Select" type="button" 
          onclick="getOptions();">

2. 调用 AJAX 的 JavaScript。

   函数 getOptions() 将完成主要工作。

   // Create the Request object (the AJAX wrapper)
   
   var request = new Request();
   // Change this to fit your environment
   
   var url = "https:///ajax/";
   function getOptions()
   {
       // Call the AJAX
   
       // Notice the second parameter is actually a function to handle the 
       // response
   
       request.GetNoCache(url + "requests/getOptions.aspx",
       function(result)
       {
           if (result.readyState!=ReadyState.Complete)
               return;               
           if (result.status==HttpStatus.OK && result.responseText != "")
           {
               // If the request was successfull and returned data
   
               var vals = result.responseText.split("~");
               for (i=0; i<vals.length; i++)
               {
                   var pair = vals[i].split("|");
                   var op = new Option(pair[1], pair[0], false, false);
                   var sel = document.getElementById("select1");
                   sel.options[sel.length] = op;
               }
               alert("Remember that the new values in form" + 
                     " element 'select1' are not in viewstate." + 
                     " Code appropriately.");
           }
           else
           {
               // Handle the failure condition
   
               alert('Get options failed.');
           }
       }
       )
   }

3. ASPX 文件。

   重要的是，aspx 文件仅从代码隐藏返回字符串（XML）数据。

   <%@ Page language="c#"
               Codebehind="getOptions.aspx.cs"
               AutoEventWireup="false"
               Inherits="ajax.requests.getOptions" %>
   <%=result%>

4. 代码隐藏。

   protected string result = string.Empty;
   private void Page_Load(object sender, System.EventArgs e)
   {
       for (int i=0; i<10; i++)
       {
           result += i.ToString() + "|option " + i.ToString() + "~";
       }
       // to drop the last '~'
   
       result = result.Substring(0, result.Length - 1); 
   }

下一步

正如您所见，让轻量级的 AJAX 组件与 ASP.NET 交互非常容易。我知道您在想什么：“史蒂夫，等一下：我以为您必须使用 XML 才能使用 AJAX？” 从示例中可以看出，返回的字符串是管道和波浪线分隔的字符串。您不必使用 XML。在很多地方，XML 将非常有用，但使用这种实现方式，它不是必需的。