客户端脚本Javascript调用服务端代码的途径

最新推荐文章于 2023-04-21 13:22:27 发布

转载最新推荐文章于 2023-04-21 13:22:27 发布 · 1.4k 阅读

文章标签：

#javascript #脚本 #xmlhttprequest #asp.net #function #ajax框架

ASP.NET 专栏收录该内容

84 篇文章

订阅专栏

本文介绍了一种在ASP.NET中使用Ajax技术实现实时账户验证的方法。通过客户端JavaScript调用服务端的HttpHandler对象，能够即时反馈用户名是否已被占用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://lvzhh.spaces.live.com/blog/cns!A3FF5E9BC63098A6!1046.entry

很多时候，我们需要在客户端脚本中直接调用服务端代码，比如，在用户在某个网站注册新帐号时，输入账号后，为了避免用户输入账户的其他信息提价后才，经过服务端检验后才发现要注册的账号“已经被人注册”，我们在用户输入账户后就应该通过javascrip调用服务端代码来检验账户是否已经被人注册。那怎样做到这一点呢？本系列文章将讲述在ASP.NET中的三种实现javascript调用服务端代码的方法：

通过XMLHttpRequest调用HttpHandler对象
调用Web Service来访问服务端代码
调用页面服务端代码的静态方法

通过XMLHttpRequest调用HttpHandler对象

第一种方法，我们将采用javascript通过浏览器的XMLHttpRequest对象来向位于服务端的HttpHandler类发送请求来调用服务端代码。新建一个ASP.NET Web站点，在站点中添加一个“一般处理程序”，命名为ValidateUserName.ashx，如下图：

点击“添加”，为站点添加了一个ValidateUserName的类，该类将实现ASP.NET的IHttpHandler接口，完成请求的账户岁否存在的判断，示例代码如下：

<%@ WebHandler Language="C#" Class="ValidateUserName" %>

2:

   3: using System;

   4: using System.Web;

   5: using System.Collections.Generic;

6:

   7: public class ValidateUserName : IHttpHandler

   8: {

   9:     private List<string> UsersIsExist()

  10:     {

  11:         List<string> users = new List<string>();

  12:         users.AddRange(new string[] { "lvzhh","lvzhonghua"});

  13:         return users;

  14:     }

  15:     public void ProcessRequest (HttpContext context)

  16:     {

  17:         context.Response.ContentType = "text/xml";

  18:         List<string> userNames = this.UsersIsExist();

  19:         string userName = context.Request.Params["userName"];

  20:         if (userNames.Contains(userName))

  21:         {

  22:             context.Response.Output.Write("<result>true</result>");

  23:         }

  24:         else

  25:         {

  26:             context.Response.Output.Write("<result>false</result>");

  27:         }

  28:     }

  29:     public bool IsReusable

  30:     {

  31:         get { return false; }

  32:     }

  33: }

添加一个UserRegist.aspx，该页面有一个HTML输入标签，输入账户后，客户端自动调用服务端的ValidateUserName类来完成账号的校验，代码如下（建议在做本示例之前看看XMLHttpRequest对象的方法和字段，以及事件）：

: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

   2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head runat="server">

   5:     <title></title>

   6:     <script type="text/javascript" language="javascript">   1:  
   2:         function validateUserName() {
   3:             var xmlHttpReq = init();
   4:             function init() {    //根据不同的浏览器创建不同的XMLHttpRequest对象
   5:                 if (window.XMLHttpRequest) {
   6:                     return new XMLHttpRequest();
   7:                 }
   8:                 else if (window.ActiveXObject) {
   9:                     return new ActiveXObject("Microsoft.XMLHTTP");
  10:                 }
  11:             }
  12:  
  13:             var userName = encodeURIComponent(document.getElementById("userName").value);
  14:             xmlHttpReq.open("GET", "ValidateUserName.ashx?userName=" + userName, true); //打开请求
  15:             xmlHttpReq.onreadystatechange = processRequest; //绑定事件
  16:             xmlHttpReq.send(null);    //发送请求
  17:             
  18:             function processRequest() {
  19:                 if (xmlHttpReq.readyState == 4) {
  20:                     if (xmlHttpReq.status == 200) {
  21:                         processResponse();
  22:                     }
  23:                 }
  24:             }
  25:  
  26:             function processResponse() {
  27:                 var msg = xmlHttpReq.responseXML;
  28:                 var result = msg.getElementsByTagName("result")[0].firstChild.nodeValue;
  29:  
  30:                 if (result == "true") {
  31:                     var validationMessage = document.getElementById("validationMessage");
  32:                     validationMessage.innerHTML = "该账号已经被人使用";
  33:                 }
  34:                 else {
  35:                     var validationMessage = document.getElementById("validationMessage");
  36:                     validationMessage.innerHTML = "该账号可以使用";
  37:                 }
  38:             }
  39:         }
  40:     
</script>

   7: </head>

   8: <body>

   9:     <form id="validationForm" action="ValidateUserName.ashx" method="post">

  10:     <table>

  11:     <tr><td>请输入账号：</td>

  12:         <td><input type="text" size="20" id="userName" name="userName" onchange="validateUserName()" /></td>

  13:         <td><div id="validationMessage" style="color:Red;"></div></td>

  14:     </tr>

  15:     </table>

  16:     </form>

  17: </body>

  18: </html>

利用javascript来调用XMLHttpRequest对象来发送请求为Ajax的数据通讯基础，这里我们通过上面的这个简单的例子其实就体验一下子Ajax的基本原理了。明天我们将使用微软的ASP.NET Ajax框架的ScriptManager服务端控件来为客户端添加Web Service引用，然后通过简单的javascript代码（这种方式根本就不用知道XMLHttpRequest对象，哈哈）来调用Web Service引用，完成对服务端代码的调用。敬请关注。