前台JavaScript访问后台的C#代码

最近由于项目需要，需要在前台调用后台的方法。

其实说白了，其实这个就是构造XMLHttpRequest，然后将其传到后台。

XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。

尽管现在网上有很多比较成熟的框架，我后面的程序也会使用框架，但是有一个简单的了解，也对自己的编程有所帮助。

一、XMLHttpRequest中的Get方法

我借用网上一个现成的例子，我稍加修改之所以没有另外写，是因为我觉得他写得已经很好了。

这个例子很简单，一个对话框和一个按钮，

前台代码：

        var req; //定义变量，用来创建xmlhttprequest对象
         function creatReq() // 创建xmlhttprequest,ajax开始
         {
             var txt = document.getElementById("txtMes").value;
             var url = "AjaxGetMethodServer.aspx?s=" + txt; //要请求的服务端地址
             if (window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
             {
                 req = new XMLHttpRequest();
             }
             else if (window.ActiveXObject) //IE浏览器用activexobject对象创建
             {
                 req = new ActiveXObject("Microsoft.XMLHttp"); 
              // req = new ActiveXObject("Msxml2.XMLHTTP"); //IE7下需要这么写
             }

             if (req) //成功创建xmlhttprequest
             {
                 req.open("GET", url, true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
                 req.onreadystatechange = callback; //指定回调函数
                 req.send(null); //发送请求
             }
         }

         function callback() //回调函数，对服务端的响应处理，监视response状态
         {
             if (req.readyState == 4) //请求状态为4表示成功
             {
                 if (req.status == 200) //http状态200表示OK
                 {
                     Dispaly(); //所有状态成功，执行此函数，显示数据
                 }
                 else //http返回状态失败
                 {
                     alert("服务端返回状态" + req.statusText);
                 }
             }
             else //请求状态还没有成功，页面等待
             {
                 document.getElementById("hello").innerHTML = "数据加载中" + req.readyState;
             }
         }

         function Dispaly() //接受服务端返回的数据，对其进行显示
         {
             document.getElementById("hello").innerHTML = req.responseText;
         }

服务器端代码：

protected void Page_Load(object sender, EventArgs e)
        {
            string s = Request.QueryString["s"] == null ? "None" : Request.QueryString["s"].ToString();
            Thread.Sleep(1000);
            Response.Write(“Hello ”+s);
            Response.End();
        }

说明：

1、前台页面上的某个事件调用creatReq() 之后，初始化一个服务器地址url和xmlhttprequest对象req，注意在初始化的时候，对于不同的浏览器初始化过程不同，这个url指向的就是服务器端的页面，注意，Page_Load中要有Response.End()，可以在url中传递参数;

2、指定了req的回调函数callback()之后，就发送本次的请求。

3、req.readyState标明的是这次请求的状态，每次状态改变都会调用回调函数，当req.readyState 的值为4的时候，表明现在是"已加载"状态；此时，响应已经被完全接收(req.readyState值所代表的不同意思可以上网查找，这里不再赘述)。

4、callback()函数调用Dispaly()，在页面上进行显示。

二、XMLHttpRequest中的Post方法

Post方式传递参数的方法和Get不同，其实Http协议的传递方式无非这两种，这里也没有什么特别。

客户端代码：

var XmlHttpObject;
    function StateEvent() {
        if (XmlHttpObject.readyState == 4) {
            if (XmlHttpObject.status == 200) {
                var txt = document.getElementById('msg');
                txt.innerHTML = XmlHttpObject.responseText
            }
        }
    }

    function CreateXmlHttp() {
        if (window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            return new XmlHttpRequest();
        }
    }

    function Start() {
        var name = document.getElementById('txtName').value;
        var sex = document.getElementById('txtSex').value;
        var age = document.getElementById('txtAge').value;
        var ParamString = 'name='+name+'&sex='+sex+'&age='+age;
        XmlHttpObject = CreateXmlHttp();
        XmlHttpObject.onreadystatechange = StateEvent;
        XmlHttpObject.open("post", "AjaxPostMethodServer.aspx", true);
        XmlHttpObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); //设置服务器响应请求体参数
        XmlHttpObject.send(ParamString);
    }

服务器端代码：

protected void Page_Load(object sender, EventArgs e)
        {
            string msg = string.Format("姓名：{0} </br>性别：{1} </br>年龄：{2} </br>" ,Request.Form["name"].ToString() , Request.Form["sex"].ToString() , Request.Form["age"].ToString());
            Response.Write(msg);
            Response.End();
        }

说明：其实过程基本相同，只是在构造请求的过程有所差别。

三、使用AjaxPro.2.dll

前面说了，网上很多现成的框架，让我们编写代码比较轻松，例如我要介绍的这个AjaxPro.2.dll

先看一下介绍：

AjaxPro也就是AJAX.NET (Professional),
它是ASP.NET平台上著名的AJAX框架，诞生于2005年2月（虽然正式命名为AJAX.NET则是在两个月之后），作者为Michael Schwarz。同年10月，Michael为AJAX.NET提供了更丰富的功能（主要是安全性方面），并将其改名为AJAX.NET Professional。AJAX.NET提供的最主要的（也是唯一）的功能就是异步调用服务器端方法，可谓非常纯粹的“基于数据”的AJAX使用方式。这个框架是一个个人作品，有支持.NET 1.1和2.0的版本，它并不属于微软官方，目前已经停止更新。 微软官方的AJAX组件是 Atlas 也叫 ASP.NET AJAX

现在有两个版本：

ajaxpro.dll 是用于.net1.1的
ajaxpro.2.dll 是用于.net 2.0的
功能是一样的，只是适用的.NET Framework 的版本不同而已。

要想使用这个控件，基本步骤有三：

1、添加AjaxPro.dll应用。

2、配置web.config，添加一个Http处理程序，如下：
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>；
所有的="ajaxpro/*.ashx"请求都交给AjaxPro.2.dll处理。

3、在Page_Load()中注册该页面。

然后就可以使用了。

说了这么多废话，现在给出一个例子，大家就明了了。

客户端代码：

function Start() {
        var txt = document.getElementById('txtmsg').value;
        var items = JavaScript.AjaxTest.AjaxPro2Test.GetChild(txt).value;  // 通过Ajax调用后台代码
        alert(items);
    }

服务器端代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxTest.AjaxPro2Test));
        }

        [AjaxPro.AjaxMethod]
        public string GetChild(string n)
        {
            return string.Format( "this is {0}'s Child",n);
        }

说明一下：

1、JavaScript是解决方案的名称，JavaScript.AjaxTest是命名空间，AjaxPro2Test是页面的名字，GetChild()是方法。

2、用户控件中的注册和方法不支持。

转载于:https://www.cnblogs.com/baby_shark/archive/2009/04/19/1439180.html