Ajax 异步调用

  Ajax在web开发中用的非常广泛，我用的最多的也就是异步调用。在这里整理一下自己所用到的一些Ajax实例，希望自己在以后的开发中可以很容易的处理类似的问题。

  直接上代码了：

  1.调用无参函数，前台页面可直接调用，返回String字符串

/// <summary>
/// 无参函数，前台页面可直接调用，返回String字符串
/// </summary>
/// <returns></returns>
[WebMethod]
public static string SayHello()
{
    return "Hello My Ajax ......";
}

 

function NoParameter() {
    $.ajax({
        type: "Post",
        url: "Pages/AjaxPost.aspx/SayHello",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert(data.d);
        },
        error: function (err) {
            alert(err);
        }
    });
}

调用无参函数SayHello()：<a href="#" onclick="javascript:NoParameter();">Click Me</a><br />

2.调用无参函数，前台页面可直接调用，返回String字符串

/// <summary>
/// 有参函数，也是用到比较多的，前台传入参数并调用该方法，返回一个String字符串
/// 用到比较多的情况是，传入参数返回bool类型的值，因为前台接受到得Data类型中没有bool
/// (前台接受的参数类型有：text、json、xml、html)类型，所以我们可以讲返回的bool值转换为
/// String类型在前台接收(eg:bool result = true; return result.ToString();)
/// </summary>
/// <param name="str1">参数1</param>
/// <param name="str2">参数2</param>
/// <returns></returns>
[WebMethod]
public static string ReturnStr(string str1, string str2)
{
    return "Question：" + str1 + "\r" +
           " Answer ：" + str2;
}

function GetStr() {
    $.ajax({
       type: "Post",
       url: "Pages/AjaxPost.aspx/ReturnStr",
       data: "{'str1':'what are you doing ?','str2':'study ajax !'}",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (data) {
           alert(data.d);
       },
       error: function (err) {
           alert(err);
        }
    });

调用有参函数ReturnStr()：<a href="#" onclick="javascript:GetStr();">Click Me</a><br />

3.调用有参函数，返回数组

/// <summary>
/// 有参函数，返回数组，在前台遍历就可得到数组值
/// 适用于返回值是多个的时候，这样就可以直接把返回值组装成数组，然后在前台访问数组
/// </summary>
/// <param name="num"></param>
/// <returns></returns>
[WebMethod]
public static ArrayList ReturnArray(string num)
{
    ArrayList al = new ArrayList();
    for (int i = 1; i <= Convert.ToInt32(num); i++)
    {
        al.Add("我是数组元素：" + i);
    }

    return al;
}

function GetArray() {
    var num = $("#<%=txt_Num.ClientID %>").val();
    if (num != "") {
        $.ajax({
            type: "Post",
            url: "Pages/AjaxPost.aspx/ReturnArray",
            data: "{'num':'"+num+"'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#div_Value").html("");
                $(data.d).each(function () {
                    $("#div_Value").append(this + "</br>");
                });
            },
            error: function (err) {
                alert(err);
            }
        });
} else {
    alert("pelease enter num in textbox");
}
   }

调用有参函数ReturnArray()：<asp:TextBox runat="server" ID="txt_Num" Width="30px" ></asp:TextBox><a href="#" onclick="javascript:GetArray();">Click Me</a><br />

4.调用有参函数，返回HashTable

/// <summary>
/// 有参函数，返回HashTable,以键值对的形式返回集合，在前台通过对应的键来访问其值
/// </summary>
/// <param name="key"></param>
/// <param name="value"></param>
/// <returns></returns>
 [WebMethod]
 public static Hashtable GetHashTable(string key ,string value)
 {
     Hashtable hs = new Hashtable();
     hs.Add("曹操", "曹孟德");
     hs.Add("刘备", "刘玄德");
     hs.Add("孙权","孙仲谋");
     hs.Add(key, value);

     return hs;
 }

function GetHashTable() {
     $.ajax({
     type: "Post",
     url: "Pages/AjaxPost.aspx/GetHashTable",
     data: "{ 'key': '关羽', 'value': '关云长' }",
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (data) {
         $("#div_Value").html("");
         $("#div_Value").append( "曹操："+data.d["曹操"]+"</br>"+
                                 "刘备："+data.d["刘备"]+"</br>"+
                                 "孙权："+data.d["孙权"]+"</br>"+
                                 "关羽："+data.d["关羽"]+"</br>");
     },
     error: function (err) {
         alert(err + "err");
     }
     });
}

调用有参函数GetHashTable()：<a href="#" onclick="javascript:GetHashTable();">Click Me</a><br />

5.访问Xml文件

<?xml version="1.0" encoding="utf-8" ?>
<books>
  <book>
    <isbn>CN0001</isbn>
    <name>水浒传</name>
    <author>施耐庵</author>
    <price>120.00</price>
  </book>
  <book>
    <isbn>CN0002</isbn>
    <name>三国演义</name>
    <author>罗贯中</author>
    <price>160.00</price>
  </book>
  <book>
    <isbn>CN0003</isbn>
    <name>西游记</name>
    <author>吴承恩</author>
    <price>115.00</price>
  </book>
  <book>
    <isbn>CN0004</isbn>
    <name>红楼梦</name>
    <author>曹雪芹</author>
    <price>280.00</price>
  </book>
</books>

function GetXmlData() {
    $.ajax({
        url: "XML/MyAjaxTest.xml",
        dataType: 'xml',
        success: function (xml) {
            $("#div_Value").html("");
            $(xml).find("books>book").each(function () {
                $("#div_Value").append("</br>");
                $("#div_Value").append("isbn:" + $(this).find("isbn").text() + "</br>");
                $("#div_Value").append("name:" + $(this).find("name").text() + "</br>");
                $("#div_Value").append("author:" + $(this).find("author").text() + "</br>");
                $("#div_Value").append("price:" + $(this).find("price").text() + "</br>");
            })
        },
        error: function (result, status) {
            alert(status);
        }
    });
}

Ajax访问Xml文件：<a href="#" onclick="javascript:GetXmlData();">Click Me</a><br />

以上内容源于一下blog：

http://blog.csdn.net/huangguiming/article/details/6234853

http://www.cnblogs.com/zhaoyun1016/archive/2010/06/24/1764089.html

自己在学习过程中吧代码整理了下，供参考之用。

完整代码下载地址：http://download.csdn.net/detail/qixing_gan/4367106