Ajax 调用本页面后台方法

最新推荐文章于 2021-08-05 15:11:41 发布

感谢一路走过的人

最新推荐文章于 2021-08-05 15:11:41 发布

阅读量535

点赞数

分类专栏： C# asp.net JavaScript 文章标签： ajax xmlhttprequest string function null xhtml

本文链接：https://blog.csdn.net/leejin_521/article/details/7027008

版权

C# asp.net 同时被 2 个专栏收录

113 篇文章 0 订阅

订阅专栏

JavaScript

70 篇文章 0 订阅

订阅专栏

在网上看到好多人利用 AJaxPro、Jquery等Ajax的框架来做这样的功能，但是最近公司的项目不让用框架，JS完全手工写，这让我相当的郁闷。

不过正好再次温习一下JS。

Ajax调用自己页面后台的方法，完全可以利用 XMLHttpRequest来实现，这样其实就相当于一个AjaxPro，下面开始说明：

要实现此功能需要3个东东，1、JS 2、前台页面 3、后台页面（这不是废话吗？呵呵）

开始贴代码

1、JS

我在网上找的一段JS代码，用来封装 AJAX 文件名：ajaxservice.js

var AjaxService = {
    initXmlHttp: function() {
        var activeXTypes = [
            "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
            "MSXML2.XMLHTTP", "MICROSOFT.XMLHTTP.1.0", "MICROSOFT.XMLHTTP.1",
            "MICROSOFT.XMLHTTP"];

var winner = null;

        if (typeof XMLHttpRequest == 'undefined' && typeof ActiveXObject != 'undefined') {
            for (var i = 0; i < activeXTypes.length; i++) {
                var candidate = activeXTypes[i];
                try {
                    new ActiveXObject(candidate);
                    winner = candidate;
                    break;
                } catch (e) {

}
}

            if (winner != null) {
                return new ActiveXObject(winner);
            }
        }

        if (typeof XMLHttpRequest != 'undefined') {
            return new XMLHttpRequest();
        }

return null;
},

    post: function(obj) {
        var xmlhttp = this.initXmlHttp();
        if (xmlhttp == null) return false;
        obj.asyn = obj.asyn == undefined ? false : obj.asyn;
        xmlhttp.open("POST", obj.url, obj.asyn);
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        if (obj.asyn) {
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    obj.succ(xmlhttp);
                }
            }
        }

        var postval = "";
        if (obj.val != undefined) {
            for (var i = 0; i < obj.val.length; i++) {
                postval = postval + encodeURIComponent(obj.val[i]) + "=" + encodeURIComponent(escape(obj.val[i + 1])) + "&";
                i++;
            }
        }

        if (postval.length > 0) {
            postval = postval.substr(0, postval.length - 1);
        }

        obj.val == undefined ? xmlhttp.send(null) : xmlhttp.send(postval);
        if (!obj.asyn)
            obj.succ(xmlhttp);

    },

    get: function(obj) {
        var xmlhttp = this.initXmlHttp();

if (xmlhttp == null) return false;
obj.asyn = obj.asyn == undefined ? false : obj.asyn;

        var getval = "";
        if (obj.val != undefined) {
            for (var i = 0; i < obj.val.length; i++) {
                getval = getval + obj.val[i] + "=" + escape(obj.val[i + 1]) + "&";
                i++;
            }
        }

if (getval.length > 0) {
getval = getval.substr(0, getval.length - 1);

            if (obj.url.indexOf("?") != -1) {
                obj.url = obj.url + "&" + getval;
            }
            else {
                obj.url = obj.url + "?" + getval;
            }

}

        xmlhttp.open("GET", obj.url, obj.asyn);
        if (obj.asyn) {
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    obj.succ(xmlhttp);
                }
            }
        }

        xmlhttp.send(null);
        if (!obj.asyn)
            obj.succ(xmlhttp);
    }
}

2、创建一个 Default.aspx 页面

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="ajaxservice.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function btnDisplayClick() {
            var txtName = document.getElementById("txtName");
            var s_ajaxurl = "Default.aspx";
            AjaxService.post({
                url: s_ajaxurl,
                succ: function (result) {

                    var s_return = result.responseText;
                     document.getElementById("spanName").innerHTML = s_return;

                },
                asyn: true,
                val: ["ajaxmethodtype", "string", "ajaxmethodname", "GetName", "name", txtName.value]
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="text" id="txtName" />
    <input type="button" id="btnDisplay" value="Display" οnclick="btnDisplayClick()" /><br/>
    <span id="spanName"></span>

    </div>
    </form>
</body>
</html>

3、Default.aspx.cs (后台页面) 代码

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Ajax_Default : System.Web.UI.Page
{

#region 公有属性

    /// <summary>
    /// ajax方法类型
    /// 字符串|json字符串|Db操作
    /// </summary>
    public string AjaxMethodType
    {
        get { return this.getUTF8ToString("ajaxmethodtype"); }
    }

    /// <summary>
    /// ajax方法名称
    /// </summary>
    public string AjaxMethodName
    {
        get { return this.getUTF8ToString("ajaxmethodname"); }
    }

#endregion

#region 私有方法

    /// <summary>
    /// 字符格式转换
    /// add by Vincent.Q 10.05.06
    /// </summary>
    /// <param name="param"></param>
    /// <returns></returns>
    public string getUTF8ToString(string param)
    {
        return HttpUtility.UrlDecode(Request.Form[param], System.Text.Encoding.UTF8);
    }

#endregion

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (!string.IsNullOrEmpty(this.AjaxMethodType))
            {
                //返回值
                string s_responsetext = string.Empty;

                //根据ajaxmethodtype和ajaxmethodname分配ajax方法
                switch (this.AjaxMethodType)
                {
                    case "string":
                        string s_string = string.Empty;
                        switch (this.AjaxMethodName)
                        {
                            case "GetName":
                                s_string = this.GetName(this.getUTF8ToString("name")).ToString().ToLower();
                                break;
                            default:
                                break;
                        }
                        s_responsetext = s_string;
                        break;

                    default:
                        break;
                }

if (string.IsNullOrEmpty(s_responsetext))
s_responsetext = "";

                //组装ajax字符串格式,返回调用客户端
                Response.Charset = "UTF-8";
                Response.ContentEncoding = System.Text.Encoding.UTF8;

Response.ContentType = "text/html";
Response.Expires = 0;

                Response.Write(s_responsetext);
                Response.End();

            }
        }

    }

    private string GetName(string name)
    {
        return name;
    }

}

试验成功，木有问题！

感谢一路走过的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax 调用本页面后台方法

在网上看到好多人利用 AJaxPro、Jquery等Ajax的框架来做这样的功能，但是最近公司的项目不让用框架，JS完全手工写，这让我相当的郁闷。不过正好再次温习一下JS。Ajax调用自己页面后台的方法，完全可以利用 XMLHttpRequest来实现，这样其实就相当于一个AjaxPro，下面开始说明：要实现此功能需要3个东东，1、JS 2、前台页面 3、后台页面（
复制链接

扫一扫