ASP.NET中AJAX的异步加载（Demo演示）

程序员文章站 2022-06-17 14:54:58

此次的demo是一个页面，页面上有两行字，然后后面用ajax，使用一个下拉框去替换第一行文字[/code]第一个是被替换的网页<...

此次的demo是一个页面，页面上有两行字，然后后面用ajax，使用一个下拉框去替换第一行文字[/code]

第一个是被替换的网页

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
    var xmlhttprequest;
    function createxmlhttprequest() {
      if (window.activexobject) {
        xmlhttprequest = new activexobject("microsoft.xmlhttp");//ie浏览器
      } else {
        xmlhttprequest = new window.xmlhttprequest();//谷歌等浏览器
      }
    }

    function sendrequest() {
      createxmlhttprequest();//获取对象
      xmlhttprequest.onreadystatechange = function () {
        if (xmlhttprequest.readystate == 4) {
          if (xmlhttprequest.status == 200) {
            document.getelementbyid("divcontent").innerhtml = xmlhttprequest.responsetext;
          }
        }
      };
      xmlhttprequest.open("post", "depthandler.ashx", true);
      xmlhttprequest.send(null);
    }

  </script>
  <!--<script type="text/javascript">
    var xmlhttprequest;
    function createxmlhttprequest() {
      if (window.activexobject) {
        xmlhttprequest = new activexobject("microsoft.xmlhttp");//ie浏览器
      } else {
        xmlhttprequest = new window.xmlhttprequest();//谷歌等浏览器
      }
    }
    //请求数据
    function sendrequest() {
      createxmlhttprequest();
      xmlhttprequest.onreadystatechange = function () {
        if (xmlhttprequest.readstate == 4) {
          if (xmlhttprequest.status == 200) {
            document.getelementbyid("divcontent").innerhtml = xmlhttprequest.responsetext;
          }
        }
      }
      xmlhttprequest.open("post", "depthandler.ashx", true);

      xmlhttprequest.send(null);
    }
  </script>-->
</head>
<body>
  <div>
    <div id="divcontent">
       
      <p style="color:red">这里显示部门信息</p>
    </div>
    <script type="text/javascript">sendrequest()</script>
    <div>
      <p style="color:red">这里显示部门信息结束了</p>
    </div>
  </div>
</body>
</html>

第二个是一个类

using system;
using system.collections.generic;
using system.linq;
using system.web;

namespace webapplication2
{
  public class dept
  {
    public int id { get; set; }

    public string deptname { get; set; }
  }
}

然后是一个一般处理程序

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading;
using system.web;

namespace webapplication2
{
  /// <summary>
  /// depthandler 的摘要说明
  /// </summary>
  public class depthandler : ihttphandler
  {

    public void processrequest(httpcontext context)
    {
      //这里的ajax进行了三秒的延迟
      thread.sleep(3000);
      list<dept> depts = new list<dept>
      {
        new dept(){id=1,deptname="财务部"},
        new dept(){id=2,deptname="研发部"},
        new dept(){id=3,deptname="市场部"}
      };
      stringbuilder sb = new stringbuilder();
      sb.appendline("<select>");
      foreach (var item in depts)
      {
        sb.appendline($"<option id = {item.id}>{item.deptname}</option>");
      }
        
      sb.appendline("</select>");
      context.response.contenttype = "text/plain";
      context.response.write(sb);


    }

    public bool isreusable
    {
      get
      {
        return false;
      }
    }
  }
}

效果图

ajax有三秒的延迟加载

前三秒

ASP.NET中AJAX的异步加载（Demo演示）