AJAX调用方式总结(3)

长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深。

实例三：使用$.ajax实现获取后台数据，后台返回数据格式为text，json，xml三种类型

$.ajax()

定义：ajax()方法通过远程HTTP请求载入信息 

语法：Jquery.ajax([settings])

常用参数[settings]--用于配置Ajax的键值对请求

url：必须，请求发送的地址

type: 请求方式

data：可选，发送到服务器的数据

success：可选，请求成功时运行的函数

1).data：包含结果的数据

2).status:包含请求的状态

3).jqXHR:包含XmlHttpRequest对象

dataType：服务器响应的数据类型，默认将智能判断

其余参数详情参见：http://www.w3school.com.cn/jquery/ajax_ajax.asp

1>.test格式 --获取时间的时，分，秒

后台代码：

public partial class textData : System.Web.UI.Page  
   {  
       protected void Page_Load(object sender, EventArgs e)  
       {  
           string hour = DateTime.Now.Hour.ToString();  
           string minute = DateTime.Now.Minute.ToString();  
           string second = DateTime.Now.Second.ToString();  
 
           string textStr = hour + "/" + minute + "/" + second;  
 
           Response.Write(textStr);  
 
           Response.End();  
       }  
   } 

前台获取代码：

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>  
<script type="text/javascript">  
    $(function () {  
        $("#btnText").click(function () {  
            $.ajax({  
                url: "textData.aspx",  
                type: "get",  
                dataType: "text",  
                success: textSucceed,  
                error: Error  
            });  
        });  
 
    });  
 
    //成功  
    function textSucceed(result) {  
        $("#tbShow").val(result);  
    }  
 
    //错误函数  
    function Error() {  
        alert("Error!!!");  
    }  
</script> 

2>.Json格式 --获取时间的时，分，秒

我们需要在后台返回Json格式的数据，添加一个dll链接库，类似.Net中处理Json数据的API ，如图：

Json格式后台代码：

Json后台  
 //添加引用  
 using Newtonsoft.Json;  
 namespace AJAX.Json  
 {  
     public partial class jsonData : System.Web.UI.Page  
     {  
         protected void Page_Load(object sender, EventArgs e)  
         {  
             string hour = DateTime.Now.Hour.ToString();  
             string minute = DateTime.Now.Minute.ToString();  
             string second = DateTime.Now.Second.ToString();  
   
             //匿名类型  
             var time = new { h = hour, m = minute, s = second };  
   
             //转Json格式  
             var jsonStr = JsonConvert.SerializeObject(new[] { time });  
   
             Response.Write(jsonStr);  
   
             Response.End();  
         }  
     }  
 } 

Json格式前台代码：

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $("#btnJson").click(function () {  
            $.ajax({  
                url: "jsonData.aspx",  
                type: "get",  
                dataType: "json",  
                success: jsonSuccess,  
                error: Error  
            });  
        });  
 
        //成功  
        function jsonSuccess(result) {  
            //[{h:10,m:20,s:30}]  
            //key:数组元素下标-此时为0  
            //value:{ h:10,m:20,s:30 }  
            $.each(result, function (key, value) {  
                var h = value.h;  
                var m = value.m;  
                var s = value.s;  
                $("#tbShow").val(h + ":" + m + ":" + s);  
            });  
        }  
         
        //错误函数  
        function Error() {  
            alert("Error!!!");  
        }  
    </script> 

3>.xml格式--获取用户名，出生年月

Xml格式后台代码：

//添加引用  
using System.Xml;  
 
namespace AJAX.Ajax_Xml  
{  
    public partial class XmlData : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            string name = "zld";  
            string birth = "1990-1-8";  
 
            //第一种：直接字符串拼接  
            string xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><root><Name>" + name + "</Name><Birth>" + birth + "</Birth></root>";  
 
            //第二种：XmlDocument创建  
 
            //创建文档  
            XmlDocument xmlDocument = new XmlDocument();  
            //文档头声明  
            XmlDeclaration xd = xmlDocument.CreateXmlDeclaration("1.0","utf-8",null);  
            xmlDocument.AppendChild(xd);  
 
            //添加根节点  
            XmlElement root = xmlDocument.CreateElement("root");  
            xmlDocument.AppendChild(root);  
 
            //给根节点添加子节点  
            XmlElement node1 = xmlDocument.CreateElement("Name");  
            node1.InnerText = name;  
            root.AppendChild(node1);  
 
            XmlElement node2 = xmlDocument.CreateElement("Birth");  
            node2.InnerText = birth;  
            root.AppendChild(node2);  
 
            //获取节点元素  
            string xmlStr2 = xmlDocument.OuterXml;  
 
            Response.Write(xmlStr2);  
            Response.End();  
 
        }  
    }  
} 

Xml格式前台代码：

<script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            $("#btnXml").click(function () {  
                $.ajax({  
                    url: "XmlData.aspx",  
                    type: "get",  
                    dataType: "xml",  
                    success: Success,  
                    error: function (result) {  
                        alert("相应内容非xml格式！");  
                    }  
                });  
            });  
        });  
 
        function Success(xmlResult) {  
            //获取返回结果  
            var result = xmlResult;  
            //找寻根节点并循环遍历  
            $(result).find('root').each(function (key) {  
                //获取子节点名为Name的值  
                var name = $(this).children("Name").text();  
                //获取子节点名为Birth的值  
                var birth = $(this).children("Birth").text();  
                $("#tbShow").val(name + ":" + birth);  
            });  
        }  
    </script>