ASP.NET的aspx页面如何用TypeScript替代引用的MicrosoftAjax.js

复杂度与影响范围评估 #

• 轻依赖场景（仅使用$get/$addHandler等工具方法、基础AJAX请求能力）：改动复杂度极低，1~2天即可完成全量替换，影响范围可控，只要把用到的API做对等实现即可。
• 重依赖场景（用到UpdatePanel、PageMethods自动绑定、ASP.NET WebForms客户端控件生命周期、服务器端自动注入的MicrosoftAjax扩展逻辑）：改动复杂度中等，需要先剥离服务器端绑定的客户端逻辑，影响范围覆盖所有使用相关控件的页面，建议先做单页面试点再全量推广。

具体操作步骤 #

步骤1：梳理现有依赖 #

• 全局搜索所有.aspx页面、独立JS文件中调用MicrosoftAjax.js API的代码，列出所有用到的功能清单，常见的高频功能包括：$get/$addHandler等快捷工具、Sys.Net.WebRequest请求、PageMethods调用、更新面板异步刷新逻辑等。
• 标记出必须1:1兼容保留的功能，以及可以直接用原生API替代的冗余功能。

步骤2：配置项目TypeScript编译环境 #

• 如果你用的是Visual Studio，直接在项目根目录右键添加TypeScript JSON配置文件，生成tsconfig.json，基础配置参考：

{
  "compilerOptions": {
    "target": "ES5", // 兼容旧版浏览器，保持和原MicrosoftAjax.js一致的兼容水平
    "outDir": "./Scripts/TSBuild", // 编译后的JS文件输出目录
    "strict": false, // 迁移阶段可以关闭严格校验，降低适配成本
    "esModuleInterop": true
  },
  "include": [ "./Scripts/TS/**/*" ]
}

• 在项目的Scripts目录下新建TS文件夹，存放你编写的TS源码。

步骤3：按功能模块实现TS兼容层 #

你不需要完全重写整个MicrosoftAjax.js，只需要对你用到的功能做对等实现即可，下面是几个常见功能的实现示例：

1. 替代$get元素选择器

function $get(elementId: string): HTMLElement | null {
  return document.getElementById(elementId);
}

2. 替代$addHandler事件绑定

function $addHandler(element: HTMLElement, eventName: string, handler: EventListener): void {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  } else if ((element as any).attachEvent) {
    // 兼容IE低版本
    (element as any).attachEvent(`on${eventName}`, handler);
  }
}

3. 替代Sys.Net.WebRequestAJAX请求

namespace Sys.Net {
  export class WebRequest {
    private _url: string = '';
    private _body: string = '';
    private _headers: Record<string, string> = {};
    private _completeHandler: ((resp: { get_responseData(): string, get_statusCode(): number }) => void) | null = null;

    set_url(url: string) {
      this._url = url;
    }

    set_body(body: string) {
      this._body = body;
    }

    get_headers() {
      return this._headers;
    }

    add_completed(handler: any) {
      this._completeHandler = handler;
    }

    invoke() {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', this._url, true);
      Object.entries(this._headers).forEach(([key, value]) => {
        xhr.setRequestHeader(key, value);
      });
      xhr.onload = () => {
        this._completeHandler?.({
          get_responseData: () => xhr.responseText,
          get_statusCode: () => xhr.status
        })
      };
      xhr.send(this._body);
    }
  }
}

• 如果你用到了PageMethods，直接把后台的WebMethod接口适配为普通HTTP接口，在TS中直接发起请求调用即可，不需要额外实现自动绑定逻辑。

步骤4：替换引用并灰度测试 #

• 先在单个功能简单的测试页面，把原来的<script src="../../Scripts/MicrosoftAjax.js"></script>注释掉，替换为TS编译后的JS引用，比如：<script src="../../Scripts/TSBuild/AjaxPolyfill.js"></script>
• 验证该页面所有原有功能正常后，再逐步替换其他页面，每替换一个页面都做全功能回归测试，避免功能遗漏。

步骤5：全量替换后清理冗余资源 #

• 所有页面都完成替换，且稳定运行一段时间后，就可以彻底移除项目中的MicrosoftAjax.js文件，以及Web.config中和MicrosoftAjax相关的配置项。后续新增功能可以直接用TS开发，也可以逐步开启TS的严格校验规则提升代码质量。

内容的提问来源于stack exchange，提问作者DotNetSpartan