经典ASP环境下如何让JS函数AddOne执行服务端数据库Num自增操作

经典ASP的服务端代码仅在服务器解析页面时执行，前端JS是在用户浏览器端运行的，二者不能直接跨上下文调用，必须通过无刷新HTTP请求对接服务端处理逻辑，具体改造步骤如下：

1. 独立编写服务端计数处理页 #

新建一个仅用于执行数据库自增逻辑的ASP页面（比如命名为CountUpdate.asp），不需要对外展示任何可见内容，核心逻辑是接收前端传的文件名参数，执行数据库更新：

<%
' 空参数直接终止执行，避免无意义的数据库连接
If Trim(Request.QueryString("NF")) = "" Then Response.End

Dim NF, Cnn, rs, strConn
' 转义单引号，避免特殊字符触发SQL错误
NF = Replace(Trim(Request.QueryString("NF")), "'", "''")

Set Cnn = Server.CreateObject("ADODB.Connection")
Set rs = Server.CreateObject("ADODB.Recordset")
strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Session("globalDB") & "db.MDB"

Cnn.Open strConn
rs.Open "SELECT FileNameMP4, Num FROM TableNum WHERE FileNameMP4='" & NF & "'", Cnn, 3, 3

' 匹配到记录才执行更新，避免记录不存在时报错
If Not rs.EOF Then
  rs("Num") = rs("Num") + 1
  rs.Update
End If

' 及时释放资源，避免Access数据库被锁
rs.Close
Set rs = Nothing
Cnn.Close
Set Cnn = Nothing

Response.Write "done"
%>

2. 改造前端AddOne函数 #

替换原来的alert逻辑，用老站点兼容性最好的原生无刷新请求调用上面的处理页，不需要引入任何外部JS库，完全适配经典ASP站点常用的老IE环境：

function AddOne(NF) {
  // 兼容老IE的XMLHttpRequest初始化
  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  // 对参数做URL编码，避免特殊字符破坏请求格式
  xhr.open("GET", "CountUpdate.asp?NF=" + encodeURIComponent(NF), true);
  xhr.send();
}

3. 原有动态链接代码的小优化 #

原来生成A标签的逻辑不需要大改，只需要在输出文件名时做一次编码处理，避免文件名包含空格、单引号等特殊字符破坏HTML结构：

' 确认V变量为转义后的双引号值即可
response.write "<A href='HSVideo.asp?FileName=" & Server.URLEncode(FileName) & "' " &_
  "onclick=" & V & "return hs.htmlExpand(this,{objectType:'iframe', preserveContent:false, width:670, height:570})" & V & " " &_
  "onmouseup=" & V & "AddOne('" & Server.URLEncode(FileName) & "')" & V & ">" &_
  "&nbsp;ADD ONE&nbsp;</A>"

踩坑注意事项 #

• 禁止在前端JS代码块里直接嵌入<%%>的ASP代码，浏览器无法识别服务端标签，嵌进去也只会被当作文本输出，完全不会执行。
• 所有从前端传过来的参数必须做转义处理，避免SQL注入或者特殊字符导致的请求异常。
• 数据库操作完成后必须及时关闭连接、释放对象，否则Access数据库很容易出现.ldb锁文件残留、无法写入的问题。
• 当前绑定的onmouseup触发逻辑和Highslide的onclick弹出逻辑无冲突：点击时先触发Highslide弹出层，鼠标松开时触发计数请求，不会打断原有交互。

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