使用jquery实现ajax请求示例

使用jquery实现ajax请求示例：

前台页面Default.aspx代码：

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="AjaxHandler._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn1").click(function () {
            getText();
        });
        $("#btn2").click(function () {
            getJson();
        });
        $("#btn3").click(function () {
            getXml();
        });
    });

    function getText() {
        $.ajax({
            url:"/WebService/WebService.ashx",
            type:"POST",
            data:{Action:"getText",UserName:$("#txt1").val()},
            dataType:"text",
            success: function (result) {
                $("#divRes").text("text："+result);
            },
            error:function(ex){
                alert(ex);
            }
        });
    }

    function getJson() {
        $.ajax({
            url: "/WebService/WebService.ashx",
            type: "POST",
            data: { Action: "getJson", TableName: $("#txt2").val() },
            dataType: "json",
            success: function (result) {
                CreateHtmlByJson(result);
            },
            error: function (ex) {
                alert(ex);
            }
        });
    }

    function getXml() {
        $.ajax({
            url: "/WebService/WebService.ashx",
            type: "POST",
            data: { Action: "getXml", TableName: $("#txt2").val() },
            dataType: "text",
            success: function (result) {
                CreateHtmlByXml(result);
            },
            error: function (ex) {
                alert(ex);
            }
        });
    }

    function CreateHtmlByJson(json) {
        var data = eval(json);
        var jsonstr = "json："+JsonToStr(json);
        var html = "<p/><table><tr><th>客户ID</th><th>客户名称</th><th>客户手机</th></tr>";
        for (var i = 0; i < data.length; i++) {
            html += "<tr>";
            html += "<td>"+data[i].CustomerId+"</td>";
            html += "<td>" + data[i].CustomerName + "</td>";
            html += "<td>" + data[i].CustomerTel + "</td>";
            html += "</tr>";
        }
        html += "</table>";
        $("#divRes").html(jsonstr);
        $("#divTable").html(html);
    }

    function CreateHtmlByXml(xml) {
        var html ="<p/><table><tr><th>客户ID</th><th>客户名称</th><th>客户手机</th></tr>";
        $(xml).find('Customer').each(function () {
            html += "<tr>";
            html += "<td>" + $(this).children("CustomerId").text() + "</td>";
            html += "<td>" + $(this).children("CustomerName").text() + "</td>";
            html += "<td>" + $(this).children("CustomerTel").text() + "</td>";
            html += "</tr>"
        });
        html += "</table>";
        $("#divRes").text("xml："+xml);
        $("#divTable").html(html);
    }

    function JsonToStr(o) {
        var arr = [];
        var fmt = function (s) {
            if (typeof s == 'object' && s != null) return JsonToStr(s);
            return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
        }
        for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
        return '{' + arr.join(',') + '}';
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <input id="btn1" type="button" value="获取text"/>：<input id="txt1" type="text" value="Jack" /><p />
    <input id="btn2" type="button" value="获取json"/>：<input id="txt2" type="text" value="Customer" /><p />
    <input id="btn3" type="button" value="获取xml"/>
    <div id="divRes"></div>
    <div id="divTable"></div>
</asp:Content>

被请求的URL页WebService.ashx.cs的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using AjaxHandler.Entity;
using System.Web.Script.Serialization;
using System.Web.SessionState;//使用Session时需要引用

namespace AjaxHandler.WebService
{
    /// <summary>
    /// WebService 的摘要说明
    /// </summary>
    public class WebService : IHttpHandler, IRequiresSessionState //使用Session时需要继承IRequiresSessionState接口
    {
        public HttpContext context { get; set; }

        public void ProcessRequest(HttpContext context)
        {
            this.context = context;

            switch (context.Request["Action"].ToString())
            {
                case "getText":
                    getText();
                    break;
                case "getJson":
                    getJson();
                    break;
                case "getXml":
                    getXml();
                    break;

            }
            context.Response.End();
        }

        public void getText()
        {
            var userName = context.Request["UserName"].ToString();
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello "+userName);
        }

        public void getJson()
        {
            var tableName = context.Request["TableName"].ToString();
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json=jss.Serialize(Customer.getAllCustomers());
            context.Response.ContentType = "application/json";//如果是json，这一句可以不要
            context.Response.Write(json);//输出的必须为json格式
        }

        public void getXml()
        {
            var tableName = context.Request["TableName"].ToString();
            string xml = Customer.CutomerToXml();
            //如果要是返回的响应为xml,返回的字符串必须是可以被解析的xml文档格式。
            context.Response.ContentType = "application/xml";
            context.Response.Write(xml);
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

相关类Customer.cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Xml.Serialization;

namespace AjaxHandler.Entity
{
    public class Customer
    {
        public int CustomerId { get; set; }

        public string CustomerName { get; set; }

        public string CustomerTel { get; set; }

        public static List<Customer> getAllCustomers()
        {
            List<Customer> customers = new List<Customer>();
            for (int i = 0; i < 5; i++)
            {
                Customer c = new Customer();
                c.CustomerId = i + 1;
                c.CustomerName = "客户" + (i + 1).ToString();
                c.CustomerTel = "1892589361" + i.ToString();
                customers.Add(c);
            }
            return customers;
        }

        public static string CutomerToXml()
        {
            List<Customer> customers = getAllCustomers();
            StringWriter sw = null;
            using (sw = new StringWriter())
            {
                XmlSerializer xz = new XmlSerializer(customers.GetType());
                xz.Serialize(sw, customers);
            }
            return sw.ToString();
        }
    }
}