AJAX调用方式总结

最近用了近两天的时间对AJAX的知识进行了一个梳理，觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深.....好了，直接开始入手吧

专注于为中小企业提供成都网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业信州免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了超过千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

实例一：省份-城市的联级下拉框 

利用AJAX来获取数据实现联级下拉框，当省份下拉框的选项发生变化时，城市的选项对应变化，效果如图：

我们首先来实现后台，先将数据准备好了在实现前台获取数据，【考虑：当我们页面登录的时候，我们需要获取的数据】： 1).省份框中的省份; 2).因为登录时省份框的第一项选中，所以还需要第一个省份所对应的城市名，好了，需求知道了，代码就好写了，直接贴上后台代码：

 
 
 
 
    
  
  
  
  
  1. protected void Page_Load(object sender, EventArgs e) 
    2. 
  
  
  
  
  2.         { 
    3. 
  
  
  
  
  3.             if (Request.QueryString["provid"] != null) 
    4. 
  
  
  
  
  4.             { 
    5. 
  
  
  
  
  5.                 //首先获取传递过来的参数值 
    6. 
  
  
  
  
  6.                 string provId = Request.QueryString["provid"].ToString(); 
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.                 //查询所有城市 
    9. 
  
  
  
  
  9.                 string sqlprov = "select * from Provice"; 
    10. 
  
  
  
  
  10.                 SqlDataReader reader = DbHelperSQL.ExecuteReader(sqlprov); 
    11. 
  
  
  
  
  11.                 string resultProv = ""; 
    12. 
  
  
  
  
  12.                 while (reader.Read()) 
    13. 
  
  
  
  
  13.                 { 
    14. 
  
  
  
  
  14.                     string id = reader[0].ToString(); 
    15. 
  
  
  
  
  15.                     string provName = reader[1].ToString(); 
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.                     //字符串拼接，为了前台获取时可以切分获取对应数据，用 '|' 来隔离 各个省份 
    18. 
  
  
  
  
  18.                     resultProv += "|" + string.Format("{0},{1}", id, provName); 
    19. 
  
  
  
  
  19.                 } 
    20. 
  
  
  
  
  20.                 reader.Close(); 
    21. 
  
  
  
  
  21. 
  
  
  
  
  22.                 //根据省份框的ID来获取对应的城市名 
    23. 
  
  
  
  
  23.                 string sqlcity =string.Format("select * from City where Proid='{0}'",provId); 
    24. 
  
  
  
  
  24.                 SqlDataReader readercity = DbHelperSQL.ExecuteReader(sqlcity); 
    25. 
  
  
  
  
  25.                 string resultCity = ""; 
    26. 
  
  
  
  
  26.                 while (readercity.Read()) 
    27. 
  
  
  
  
  27.                 { 
    28. 
  
  
  
  
  28.                     string cityId = readercity[1].ToString(); 
    29. 
  
  
  
  
  29.                     string cityName = readercity[2].ToString(); 
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.                     //同样用字符串拼接 用 '|' 来隔离 同一省份 的各个城市 
    32. 
  
  
  
  
  32.                     resultCity += "|" + string.Format("{0},{1}", cityId, cityName); 
    33. 
  
  
  
  
  33.                 } 
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.                 //去除第一个 '|' ,并且在最后拼接上 '&' 来区分省份和城市 
    36. 
  
  
  
  
  36.                 resultProv = resultProv.Substring(1) + "&"; 
    37. 
  
  
  
  
  37. 
  
  
  
  
  38.                 //最后的结果形式为【id,省份名|id2,省份名2|....&id,城市名|id2,城市名2|.....】 
    39. 
  
  
  
  
  39.                 string result = resultProv + resultCity.Substring(1); 
    40. 
  
  
  
  
  40. 
  
  
  
  
  41.                 Response.Write(result); 
    42. 
  
  
  
  
  42.                 Response.End(); 
    43. 
  
  
  
  
  43.             } 
    44. 
  
  
  
  
  44.         }
    45.

后台代码其实很简单，就是根据传过来的参数从数据库获取对应的数据，但是这里我们把获取到得数据最后都用字符串拼接起来了，而且是有规律的拼接，这是为什么呢？其实在注释上已经讲明了，就是为了方便前台获取对应的数据了，因为我们是使用后台返回文本形式的数据，这就是为什么我们拼接字符串了。。

接下来我们来实现前台，前台主要的任务就是获取后台返回的数据，并实现绑定......也是分块贴上代码

 
 
 
 
    
  
  
  
  
  1. //实例化XmlHttpRequest对象 
    2. 
  
  
  
  
  2.  var xhr = null; 
    3. 
  
  
  
  
  3.         function CreateXhr() { 
    4. 
  
  
  
  
  4.             if (window.ActiveXObject)  
    5. 
  
  
  
  
  5.             { 
    6. 
  
  
  
  
  6.                 try
    7. 
  
  
  
  
  7.                 { 
    8. 
  
  
  
  
  8.                     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    9. 
  
  
  
  
  9.                 } 
    10. 
  
  
  
  
  10.                 catch (e)  
    11. 
  
  
  
  
  11.                 { 
    12. 
  
  
  
  
  12.                     try
    13. 
  
  
  
  
  13.                     { 
    14. 
  
  
  
  
  14.                         xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
    15. 
  
  
  
  
  15.                     } 
    16. 
  
  
  
  
  16.                     catch (e)  
    17. 
  
  
  
  
  17.                     { 
    18. 
  
  
  
  
  18.                         xhr = null; 
    19. 
  
  
  
  
  19.                     } 
    20. 
  
  
  
  
  20.                 } 
    21. 
  
  
  
  
  21.             } 
    22. 
  
  
  
  
  22.             if (window.XMLHttpRequest) { 
    23. 
  
  
  
  
  23.                 xhr = new XMLHttpRequest(); 
    24. 
  
  
  
  
  24.             } 
    25. 
  
  
  
  
  25. 
  
  
  
  
  26.             return xhr; 
    27. 
  
  
  
  
  27.         }
    28.

当页面载入时，实现省份框以及第一个省份对应的城市框的绑定，代码：

 
 
 
 
    
  
  
  
  
  1. //载入绑定省份  
    2. 
  
  
  
  
  2.        function getLoadProv() { 
    3. 
  
  
  
  
  3.            CreateXhr(); 
    4. 
  
  
  
  
  4.            xhr.onreadystatechange = WatchState; 
    5. 
  
  
  
  
  5.            xhr.open("get", "getProvCity.aspx?provid=1&time=" + new Date()); 
    6. 
  
  
  
  
  6.            xhr.send(null); 
    7. 
  
  
  
  
  7.        } 
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.        //监听载入绑定时状态 
    10. 
  
  
  
  
  10.        function WatchState() { 
    11. 
  
  
  
  
  11.            if (xhr.readyState == 4 && xhr.status == 200) { 
    12. 
  
  
  
  
  12.                //1,**|2,**&1,##|2,## 
    13. 
  
  
  
  
  13.                var result = xhr.responseText; 
    14. 
  
  
  
  
  14.                var provs = result.split('&')[0].split('|'); 
    15. 
  
  
  
  
  15.                var citys = result.split('&')[1].split('|'); 
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.                //省份下拉框清空 
    18. 
  
  
  
  
  18.                document.forms[0].prov.length = 0; 
    19. 
  
  
  
  
  19. 
  
  
  
  
  20.                //绑定省份框 
    21. 
  
  
  
  
  21.                for (var i = 0; i < provs.length; i++) { 
    22. 
  
  
  
  
  22.                    var prov = provs[i].split(','); 
    23. 
  
  
  
  
  23.                    //实例化一个选项 
    24. 
  
  
  
  
  24.                    var op = new Option(); 
    25. 
  
  
  
  
  25.                    op.value = prov[0]; 
    26. 
  
  
  
  
  26.                    op.text = prov[1]; 
    27. 
  
  
  
  
  27.                    document.forms[0].prov.options.add(op); 
    28. 
  
  
  
  
  28.                } 
    29. 
  
  
  
  
  29. 
  
  
  
  
  30.                //城市下拉框清空 
    31. 
  
  
  
  
  31.                document.forms[0].city.length = 0; 
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.                //绑定城市框 
    34. 
  
  
  
  
  34.                for (var j = 0; j < citys.length; j++) { 
    35. 
  
  
  
  
  35.                    var city = citys[j].split(','); 
    36. 
  
  
  
  
  36.                    var op = new Option(); 
    37. 
  
  
  
  
  37.                    op.value = city[0]; 
    38. 
  
  
  
  
  38.                    op.text = city[1]; 
    39. 
  
  
  
  
  39.                    document.forms[0].city.options.add(op); 
    40. 
  
  
  
  
  40.                }                 
    41. 
  
  
  
  
  41.            } 
    42. 
  
  
  
  
  42.        }
    43.

当省份框的选项发生变化时实现联级变化，代码：

 
 
 
 
    
  
  
  
  
  1. //获取城市 
    2. 
  
  
  
  
  2. function GetCity() { 
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.     //获取省份框选中的值 
    5. 
  
  
  
  
  5.     var provId = document.forms[0].prov.value; 
    6. 
  
  
  
  
  6. 
  
  
  
  
  7.     CreateXhr(); 
    8. 
  
  
  
  
  8.     xhr.onreadystatechange = UpdateCity; 
    9. 
  
  
  
  
  9.     xhr.open("get", "getProvCity.aspx?provid=" + provId + "&time=" + new Date()); 
    10. 
  
  
  
  
  10.     xhr.send(null); 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. //修改城市下拉框内容 
    14. 
  
  
  
  
  14. function UpdateCity() { 
    15. 
  
  
  
  
  15.     if (xhr.readyState == 4 && xhr.status == 200) { 
    16. 
  
  
  
  
  16.         var result = xhr.responseText; 
    17. 
  
  
  
  
  17.         var citys = result.split('&')[1].split('|'); 
    18. 
  
  
  
  
  18.         //城市下拉框清空 
    19. 
  
  
  
  
  19.         document.forms[0].city.length = 0; 
    20. 
  
  
  
  
  20. 
  
  
  
  
  21.         //绑定城市框 
    22. 
  
  
  
  
  22.         for (var j = 0; j < citys.length; j++) { 
    23. 
  
  
  
  
  23.             var city = citys[j].split(','); 
    24. 
  
  
  
  
  24.             var op = new Option(); 
    25. 
  
  
  
  
  25.             op.value = city[0]; 
    26. 
  
  
  
  
  26.             op.text = city[1]; 
    27. 
  
  
  
  
  27.             document.forms[0].city.options.add(op); 
    28. 
  
  
  
  
  28.         }                 
    29. 
  
  
  
  
  29.     }
    30.

前台html代码：

 
 
 
 
    
  
  
  
  
  1. html 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.          
    6. 
  
  
  
  
  6.          
    7. 
  
  
  
  
  7.          
    8. 
  
  
  
  
  8.          
    9. 
  
  
  
  
  9.      
  •      
  •  

    • #p#

    实例二：利用$.get，$.post方法获取当前时间

    $.get():

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

    语法：$(selector).get(url,data,success(response,status,xhr),dataType)

    参数

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

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

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

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

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

    3).xhr:包含XmlHttpRequest对象

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

    $.post()

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

    语法：$(selector).post(url,data,success(data,status,jqXHR),dataType)

    参数

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

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

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

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

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

    3).jqXHR:包含XmlHttpRequest对象

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

    由于实例相当简单，直接上所有代码：

     
 
 
 
      
  
  
  
  
    1. protected void Page_Load(object sender, EventArgs e) 
      2. 
  
  
  
  
    2.        { 
      3. 
  
  
  
  
    3.            string time = ""; 
      4. 
  
  
  
  
    4.            //Get 
      5. 
  
  
  
  
    5.            if (Request.QueryString["time"]!=null) 
      6. 
  
  
  
  
    6.            { 
      7. 
  
  
  
  
    7.                time = "Get:"+ Request.QueryString["time"].ToString(); 
      8. 
  
  
  
  
    8.            } 
      9. 
  
  
  
  
    9.            //Post 
      10. 
  
  
  
  
    10.            if (Request.Form["time"] != null) 
      11. 
  
  
  
  
    11.            { 
      12. 
  
  
  
  
    12.                time = "Post:" + Request.Form["time"].ToString(); 
      13. 
  
  
  
  
    13.            } 
      14. 
  
  
  
  
    14. 
  
  
  
  
    15.            Response.Write(time + "  现在：" + DateTime.Now.ToString()); 
      16. 
  
  
  
  
    16.            Response.End(); 
      17. 
  
  
  
  
    17.        }
      18.

    前台获取时间

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.      $(function () { 
      4. 
  
  
  
  
    4.          //参数：直接在页面之后加？拼加 
      5. 
  
  
  
  
    5.          $("#btnGet").click(function () { 
      6. 
  
  
  
  
    6.              $.get("data.aspx?time=" + new Date(), Succeed); 
      7. 
  
  
  
  
    7.          }); 
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.          //参数：使用键值来表示需要传递的参数 
      10. 
  
  
  
  
    10.          $("#btnPost").click(function () { 
      11. 
  
  
  
  
    11.              $.post("data.aspx", { time: new Date() }, Succeed); 
      12. 
  
  
  
  
    12.          }); 
      13. 
  
  
  
  
    13.      }); 
      14. 
  
  
  
  
    14. 
  
  
  
  
    15.      function Succeed(result) { 
      16. 
  
  
  
  
    16.          $("#tbShow").val(result); 
      17. 
  
  
  
  
    17.      } 
      18. 
  
  
  
  
    18.  
      19. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. 
  
  
  
  
    2.     
      3. 
  
  
  
  
    3.         
      4. 
  
  
  
  
    4.           
      5. 
  
  
  
  
    5.           
      6. 
  
  
  
  
    6.           
      7. 
  
  
  
  
    7.           
      8. 
  
  
  
  
    8.         
  •     

  • #p#

    实例三：使用$.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格式 --获取时间的时，分，秒

    后台代码：

     
 
 
 
      
  
  
  
  
    1. public partial class textData : System.Web.UI.Page 
      2. 
  
  
  
  
    2.    { 
      3. 
  
  
  
  
    3.        protected void Page_Load(object sender, EventArgs e) 
      4. 
  
  
  
  
    4.        { 
      5. 
  
  
  
  
    5.            string hour = DateTime.Now.Hour.ToString(); 
      6. 
  
  
  
  
    6.            string minute = DateTime.Now.Minute.ToString(); 
      7. 
  
  
  
  
    7.            string second = DateTime.Now.Second.ToString(); 
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.            string textStr = hour + "/" + minute + "/" + second; 
      10. 
  
  
  
  
    10. 
  
  
  
  
    11.            Response.Write(textStr); 
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.            Response.End(); 
      14. 
  
  
  
  
    14.        } 
      15. 
  
  
  
  
    15.    }
      16.

    前台获取代码：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.     $(function () { 
      4. 
  
  
  
  
    4.         $("#btnText").click(function () { 
      5. 
  
  
  
  
    5.             $.ajax({ 
      6. 
  
  
  
  
    6.                 url: "textData.aspx", 
      7. 
  
  
  
  
    7.                 type: "get", 
      8. 
  
  
  
  
    8.                 dataType: "text", 
      9. 
  
  
  
  
    9.                 success: textSucceed, 
      10. 
  
  
  
  
    10.                 error: Error 
      11. 
  
  
  
  
    11.             }); 
      12. 
  
  
  
  
    12.         }); 
      13. 
  
  
  
  
    13. 
  
  
  
  
    14.     }); 
      15. 
  
  
  
  
    15. 
  
  
  
  
    16.     //成功 
      17. 
  
  
  
  
    17.     function textSucceed(result) { 
      18. 
  
  
  
  
    18.         $("#tbShow").val(result); 
      19. 
  
  
  
  
    19.     } 
      20. 
  
  
  
  
    20. 
  
  
  
  
    21.     //错误函数 
      22. 
  
  
  
  
    22.     function Error() { 
      23. 
  
  
  
  
    23.         alert("Error!!!"); 
      24. 
  
  
  
  
    24.     } 
      25. 
  
  
  
  
    25.

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

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

    Json格式后台代码：

     
 
 
 
      
  
  
  
  
    1. Json后台 
      2. 
  
  
  
  
    2.  //添加引用 
      3. 
  
  
  
  
    3.  using Newtonsoft.Json; 
      4. 
  
  
  
  
    4.  namespace AJAX.Json 
      5. 
  
  
  
  
    5.  { 
      6. 
  
  
  
  
    6.      public partial class jsonData : System.Web.UI.Page 
      7. 
  
  
  
  
    7.      { 
      8. 
  
  
  
  
    8.          protected void Page_Load(object sender, EventArgs e) 
      9. 
  
  
  
  
    9.          { 
      10. 
  
  
  
  
    10.              string hour = DateTime.Now.Hour.ToString(); 
      11. 
  
  
  
  
    11.              string minute = DateTime.Now.Minute.ToString(); 
      12. 
  
  
  
  
    12.              string second = DateTime.Now.Second.ToString(); 
      13. 
  
  
  
  
    13.   
      14. 
  
  
  
  
    14.              //匿名类型 
      15. 
  
  
  
  
    15.              var time = new { h = hour, m = minute, s = second }; 
      16. 
  
  
  
  
    16.   
      17. 
  
  
  
  
    17.              //转Json格式 
      18. 
  
  
  
  
    18.              var jsonStr = JsonConvert.SerializeObject(new[] { time }); 
      19. 
  
  
  
  
    19.   
      20. 
  
  
  
  
    20.              Response.Write(jsonStr); 
      21. 
  
  
  
  
    21.   
      22. 
  
  
  
  
    22.              Response.End(); 
      23. 
  
  
  
  
    23.          } 
      24. 
  
  
  
  
    24.      } 
      25. 
  
  
  
  
    25.  }
      26.

    Json格式前台代码：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.         $("#btnJson").click(function () { 
      4. 
  
  
  
  
    4.             $.ajax({ 
      5. 
  
  
  
  
    5.                 url: "jsonData.aspx", 
      6. 
  
  
  
  
    6.                 type: "get", 
      7. 
  
  
  
  
    7.                 dataType: "json", 
      8. 
  
  
  
  
    8.                 success: jsonSuccess, 
      9. 
  
  
  
  
    9.                 error: Error 
      10. 
  
  
  
  
    10.             }); 
      11. 
  
  
  
  
    11.         }); 
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.         //成功 
      14. 
  
  
  
  
    14.         function jsonSuccess(result) { 
      15. 
  
  
  
  
    15.             //[{h:10,m:20,s:30}] 
      16. 
  
  
  
  
    16.             //key:数组元素下标-此时为0 
      17. 
  
  
  
  
    17.             //value:{ h:10,m:20,s:30 } 
      18. 
  
  
  
  
    18.             $.each(result, function (key, value) { 
      19. 
  
  
  
  
    19.                 var h = value.h; 
      20. 
  
  
  
  
    20.                 var m = value.m; 
      21. 
  
  
  
  
    21.                 var s = value.s; 
      22. 
  
  
  
  
    22.                 $("#tbShow").val(h + ":" + m + ":" + s); 
      23. 
  
  
  
  
    23.             }); 
      24. 
  
  
  
  
    24.         } 
      25. 
  
  
  
  
    25.         
      26. 
  
  
  
  
    26.         //错误函数 
      27. 
  
  
  
  
    27.         function Error() { 
      28. 
  
  
  
  
    28.             alert("Error!!!"); 
      29. 
  
  
  
  
    29.         } 
      30. 
  
  
  
  
    30.     
      31.

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

    Xml格式后台代码：

     
 
 
 
      
  
  
  
  
    1. //添加引用 
      2. 
  
  
  
  
    2. using System.Xml; 
      3. 
  
  
  
  
    3. 
  
  
  
  
    4. namespace AJAX.Ajax_Xml 
      5. 
  
  
  
  
    5. { 
      6. 
  
  
  
  
    6.     public partial class XmlData : System.Web.UI.Page 
      7. 
  
  
  
  
    7.     { 
      8. 
  
  
  
  
    8.         protected void Page_Load(object sender, EventArgs e) 
      9. 
  
  
  
  
    9.         { 
      10. 
  
  
  
  
    10.             string name = "zld"; 
      11. 
  
  
  
  
    11.             string birth = "1990-1-8"; 
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.             //第一种：直接字符串拼接 
      14. 
  
  
  
  
    14.             string xmlStr = "" + name + "" + birth + ""; 
      15. 
  
  
  
  
    15. 
  
  
  
  
    16.             //第二种：XmlDocument创建 
      17. 
  
  
  
  
    17. 
  
  
  
  
    18.             //创建文档 
      19. 
  
  
  
  
    19.             XmlDocument xmlDocument = new XmlDocument(); 
      20. 
  
  
  
  
    20.             //文档头声明 
      21. 
  
  
  
  
    21.             XmlDeclaration xd = xmlDocument.CreateXmlDeclaration("1.0","utf-8",null); 
      22. 
  
  
  
  
    22.             xmlDocument.AppendChild(xd); 
      23. 
  
  
  
  
    23. 
  
  
  
  
    24.             //添加根节点 
      25. 
  
  
  
  
    25.             XmlElement root = xmlDocument.CreateElement("root"); 
      26. 
  
  
  
  
    26.             xmlDocument.AppendChild(root); 
      27. 
  
  
  
  
    27. 
  
  
  
  
    28.             //给根节点添加子节点 
      29. 
  
  
  
  
    29.             XmlElement node1 = xmlDocument.CreateElement("Name"); 
      30. 
  
  
  
  
    30.             node1.InnerText = name; 
      31. 
  
  
  
  
    31.             root.AppendChild(node1); 
      32. 
  
  
  
  
    32. 
  
  
  
  
    33.             XmlElement node2 = xmlDocument.CreateElement("Birth"); 
      34. 
  
  
  
  
    34.             node2.InnerText = birth; 
      35. 
  
  
  
  
    35.             root.AppendChild(node2); 
      36. 
  
  
  
  
    36. 
  
  
  
  
    37.             //获取节点元素 
      38. 
  
  
  
  
    38.             string xmlStr2 = xmlDocument.OuterXml; 
      39. 
  
  
  
  
    39. 
  
  
  
  
    40.             Response.Write(xmlStr2); 
      41. 
  
  
  
  
    41.             Response.End(); 
      42. 
  
  
  
  
    42. 
  
  
  
  
    43.         } 
      44. 
  
  
  
  
    44.     } 
      45. 
  
  
  
  
    45. }
      46.

    Xml格式前台代码：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.      
      3. 
  
  
  
  
    3.         $(function () { 
      4. 
  
  
  
  
    4.             $("#btnXml").click(function () { 
      5. 
  
  
  
  
    5.                 $.ajax({ 
      6. 
  
  
  
  
    6.                     url: "XmlData.aspx", 
      7. 
  
  
  
  
    7.                     type: "get", 
      8. 
  
  
  
  
    8.                     dataType: "xml", 
      9. 
  
  
  
  
    9.                     success: Success, 
      10. 
  
  
  
  
    10.                     error: function (result) { 
      11. 
  
  
  
  
    11.                         alert("相应内容非xml格式！"); 
      12. 
  
  
  
  
    12.                     } 
      13. 
  
  
  
  
    13.                 }); 
      14. 
  
  
  
  
    14.             }); 
      15. 
  
  
  
  
    15.         }); 
      16. 
  
  
  
  
    16. 
  
  
  
  
    17.         function Success(xmlResult) { 
      18. 
  
  
  
  
    18.             //获取返回结果 
      19. 
  
  
  
  
    19.             var result = xmlResult; 
      20. 
  
  
  
  
    20.             //找寻根节点并循环遍历 
      21. 
  
  
  
  
    21.             $(result).find('root').each(function (key) { 
      22. 
  
  
  
  
    22.                 //获取子节点名为Name的值 
      23. 
  
  
  
  
    23.                 var name = $(this).children("Name").text(); 
      24. 
  
  
  
  
    24.                 //获取子节点名为Birth的值 
      25. 
  
  
  
  
    25.                 var birth = $(this).children("Birth").text(); 
      26. 
  
  
  
  
    26.                 $("#tbShow").val(name + ":" + birth); 
      27. 
  
  
  
  
    27.             }); 
      28. 
  
  
  
  
    28.         } 
      29. 
  
  
  
  
    29.     

    #p#

    实例四：ajax调用wcf获取数据

    首先贴上模块图：

    首先定义好数据契约和操作契约，贴上StudentService.svc代码：

     
 
 
 
      
  
  
  
  
    1. StudentService.svc 
      2. 
  
  
  
  
    2.  namespace ajaxwcf 
      3. 
  
  
  
  
    3.  { 
      4. 
  
  
  
  
    4.      [ServiceContract(Namespace = "")] 
      5. 
  
  
  
  
    5.      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
      6. 
  
  
  
  
    6.      public class StudentService 
      7. 
  
  
  
  
    7.      { 
      8. 
  
  
  
  
    8.          // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json) 
      9. 
  
  
  
  
    9.          // 要创建返回 XML 的操作， 
      10. 
  
  
  
  
    10.          //     请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]， 
      11. 
  
  
  
  
    11.          //     并在操作正文中包括以下行: 
      12. 
  
  
  
  
    12.          //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml"; 
      13. 
  
  
  
  
    13.          [OperationContract] 
      14. 
  
  
  
  
    14.          //获取学生数据 
      15. 
  
  
  
  
    15.          public List GetStudents() 
      16. 
  
  
  
  
    16.          { 
      17. 
  
  
  
  
    17.              string sqlConn = ConfigurationManager.ConnectionStrings["SqlConn"].ConnectionString; 
      18. 
  
  
  
  
    18.              SqlConnection conn = new SqlConnection(sqlConn); 
      19. 
  
  
  
  
    19.              SqlDataAdapter da = new SqlDataAdapter("select * from AJAX_Tab", conn); 
      20. 
  
  
  
  
    20.              DataSet ds = new DataSet(); 
      21. 
  
  
  
  
    21.              da.Fill(ds); 
      22. 
  
  
  
  
    22.              List Stulis = new List(); 
      23. 
  
  
  
  
    23.              DataTable dt = ds.Tables[0]; 
      24. 
  
  
  
  
    24.              Student student = null; 
      25. 
  
  
  
  
    25.              foreach (DataRow row in dt.Rows) 
      26. 
  
  
  
  
    26.              { 
      27. 
  
  
  
  
    27.                  student = new Student(); 
      28. 
  
  
  
  
    28.                  student.Sname = row[
                新闻标题：AJAX调用方式总结
                
      
                标题链接：http://www.shufengxianlan.com/qtweb/news43/54743.html
            
      
            
      
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
      
            
      
                广告
                
            
      
            
      
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联

    猜你还喜欢下面的内容

    网站建设知识

    同城分类信息

    成都网站制作　　 　企业网站维护　　 　主机租用　　 　手机网站版本　　 　服务器机柜　　 　四川成都展柜定制厂家　　 　达州网站建设　　 　成都定制高级网站建设　　 　一带一路　　 　成都门户网站建设设计方案　　 　网站优化排名推广　　 　成都门窗定制　　 　微信小程序开发　　 　成都免费做网站公司　　 　免备案空间　　 　成都电信光华数据中心　　 　成都网站制作　　 　网络推广外包　　 　成都模版网站建设　　 　广汉锦华