AJAX调用方式总结
最近用了近两天的时间对AJAX的知识进行了一个梳理，觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深.....好了，直接开始入手吧...在之前的一篇文章中讲解了《原生态AJAX来获取数据》的一个小实例，从“原生态”就可以看出，就是AJAX的最基础的形态了....
实例一：省份-城市的联级下拉框
利用AJAX来获取数据实现联级下拉框，当省份下拉框的选项发生变化时，城市的选项对应变化，效果如图：
我们首先来实现后台，先将数据准备好了在实现前台获取数据，【考虑：当我们页面登录的时候，我们需要获取的数据】： 1).省份框中的省份; 2).因为登录时省份框的第一项选中，所以还需要第一个省份所对应的城市名，好了，需求知道了，代码就好写了，直接贴上后台代码：
省份-城市联级下拉框后台
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 if (Request.QueryString["provid"] != null)
4 {
5 //首先获取传递过来的参数值
6 string provId = Request.QueryString["provid"].ToString();
7
8 //查询所有城市
9 string sqlprov = "select * from Provice";
10 SqlDataReader reader = DbHelperSQL.ExecuteReader(sqlprov);
11 string resultProv = "";
12 while (reader.Read())
13 {
14 string id = reader[0].ToString();
15 string provName = reader[1].ToString();
16
17 //字符串拼接，为了前台获取时可以切分获取对应数据，用 '|' 来隔离 各个省份
18 resultProv += "|" + string.Format("{0},{1}", id, provName);
19 }
20 reader.Close();
21
22 //根据省份框的ID来获取对应的城市名
23 string sqlcity =string.Format("select * from City where Proid='{0}'",provId);
24 SqlDataReader readercity = DbHelperSQL.ExecuteReader(sqlcity);
25 string resultCity = "";
26 while (readercity.Read())
27 {
28 string cityId = readercity[1].ToString();
29 string cityName = readercity[2].ToString();
30
31 //同样用字符串拼接 用 '|' 来隔离 同一省份 的各个城市
32 resultCity += "|" + string.Format("{0},{1}", cityId, cityName);
33 }
34
35 //去除第一个 '|' ,并且在最后拼接上 '&' 来区分省份和城市
36 resultProv = resultProv.Substring(1) + "&";
37
38 //最后的结果形式为【id,省份名|id2,省份名2|....&id,城市名|id2,城市名2|.....】
39 string result = resultProv + resultCity.Substring(1);
40
41 Response.Write(result);
42 Response.End();
43 }
44 }
2 {
3 if (Request.QueryString["provid"] != null)
4 {
5 //首先获取传递过来的参数值
6 string provId = Request.QueryString["provid"].ToString();
7
8 //查询所有城市
9 string sqlprov = "select * from Provice";
10 SqlDataReader reader = DbHelperSQL.ExecuteReader(sqlprov);
11 string resultProv = "";
12 while (reader.Read())
13 {
14 string id = reader[0].ToString();
15 string provName = reader[1].ToString();
16
17 //字符串拼接，为了前台获取时可以切分获取对应数据，用 '|' 来隔离 各个省份
18 resultProv += "|" + string.Format("{0},{1}", id, provName);
19 }
20 reader.Close();
21
22 //根据省份框的ID来获取对应的城市名
23 string sqlcity =string.Format("select * from City where Proid='{0}'",provId);
24 SqlDataReader readercity = DbHelperSQL.ExecuteReader(sqlcity);
25 string resultCity = "";
26 while (readercity.Read())
27 {
28 string cityId = readercity[1].ToString();
29 string cityName = readercity[2].ToString();
30
31 //同样用字符串拼接 用 '|' 来隔离 同一省份 的各个城市
32 resultCity += "|" + string.Format("{0},{1}", cityId, cityName);
33 }
34
35 //去除第一个 '|' ,并且在最后拼接上 '&' 来区分省份和城市
36 resultProv = resultProv.Substring(1) + "&";
37
38 //最后的结果形式为【id,省份名|id2,省份名2|....&id,城市名|id2,城市名2|.....】
39 string result = resultProv + resultCity.Substring(1);
40
41 Response.Write(result);
42 Response.End();
43 }
44 }
后台代码其实很简单，就是根据传过来的参数从数据库获取对应的数据，但是这里我们把获取到得数据最后都用字符串拼接起来了，而且是有规律的拼接，这是为什么呢？其实在注释上已经讲明了，就是为了方便前台获取对应的数据了，因为我们是使用后台返回文本形式的数据，这就是为什么我们拼接字符串了。。
接下来我们来实现前台，前台主要的任务就是获取后台返回的数据，并实现绑定......也是分块贴上代码
实例化XmlHttpRequest对象 1 //实例化XmlHttpRequest对象
2 var xhr = null;
3 function CreateXhr() {
4 if (window.ActiveXObject)
5 {
6 try
7 {
8 xhr = new ActiveXObject("Microsoft.XMLHTTP");
9 }
10 catch (e)
11 {
12 try
13 {
14 xhr = new ActiveXObject("Msxml2.XMLHTTP");
15 }
16 catch (e)
17 {
18 xhr = null;
19 }
20 }
21 }
22 if (window.XMLHttpRequest) {
23 xhr = new XMLHttpRequest();
24 }
25
26 return xhr;
27 }
2 var xhr = null;
3 function CreateXhr() {
4 if (window.ActiveXObject)
5 {
6 try
7 {
8 xhr = new ActiveXObject("Microsoft.XMLHTTP");
9 }
10 catch (e)
11 {
12 try
13 {
14 xhr = new ActiveXObject("Msxml2.XMLHTTP");
15 }
16 catch (e)
17 {
18 xhr = null;
19 }
20 }
21 }
22 if (window.XMLHttpRequest) {
23 xhr = new XMLHttpRequest();
24 }
25
26 return xhr;
27 }
当页面载入时，实现省份框以及第一个省份对应的城市框的绑定，代码：
载入绑定 1 //载入绑定省份
2 function getLoadProv() {
3 CreateXhr();
4 xhr.onreadystatechange = WatchState;
5 xhr.open("get", "getProvCity.aspx?provid=1&time=" + new Date());
6 xhr.send(null);
7 }
8
9 //监听载入绑定时状态
10 function WatchState() {
11 if (xhr.readyState == 4 && xhr.status == 200) {
12 //1,**|2,**&1,##|2,##
13 var result = xhr.responseText;
14 var provs = result.split('&')[0].split('|');
15 var citys = result.split('&')[1].split('|');
16
17 //省份下拉框清空
18 document.forms[0].prov.length = 0;
19
20 //绑定省份框
21 for (var i = 0; i < provs.length; i++) {
22 var prov = provs[i].split(',');
23 //实例化一个选项
24 var op = new Option();
25 op.value = prov[0];
26 op.text = prov[1];
27 document.forms[0].prov.options.add(op);
28 }
29
30 //城市下拉框清空
31 document.forms[0].city.length = 0;
32
33 //绑定城市框
34 for (var j = 0; j < citys.length; j++) {
35 var city = citys[j].split(',');
36 var op = new Option();
37 op.value = city[0];
38 op.text = city[1];
39 document.forms[0].city.options.add(op);
40 }
41 }
42 }
2 function getLoadProv() {
3 CreateXhr();
4 xhr.onreadystatechange = WatchState;
5 xhr.open("get", "getProvCity.aspx?provid=1&time=" + new Date());
6 xhr.send(null);
7 }
8
9 //监听载入绑定时状态
10 function WatchState() {
11 if (xhr.readyState == 4 && xhr.status == 200) {
12 //1,**|2,**&1,##|2,##
13 var result = xhr.responseText;
14 var provs = result.split('&')[0].split('|');
15 var citys = result.split('&')[1].split('|');
16
17 //省份下拉框清空
18 document.forms[0].prov.length = 0;
19
20 //绑定省份框
21 for (var i = 0; i < provs.length; i++) {
22 var prov = provs[i].split(',');
23 //实例化一个选项
24 var op = new Option();
25 op.value = prov[0];
26 op.text = prov[1];
27 document.forms[0].prov.options.add(op);
28 }
29
30 //城市下拉框清空
31 document.forms[0].city.length = 0;
32
33 //绑定城市框
34 for (var j = 0; j < citys.length; j++) {
35 var city = citys[j].split(',');
36 var op = new Option();
37 op.value = city[0];
38 op.text = city[1];
39 document.forms[0].city.options.add(op);
40 }
41 }
42 }
当省份框的选项发生变化时实现联级变化，代码：
省份变化绑定 1 //获取城市
2 function GetCity() {
3
4 //获取省份框选中的值
5 var provId = document.forms[0].prov.value;
6
7 CreateXhr();
8 xhr.onreadystatechange = UpdateCity;
9 xhr.open("get", "getProvCity.aspx?provid=" + provId + "&time=" + new Date());
10 xhr.send(null);
11 }
12
13 //修改城市下拉框内容
14 function UpdateCity() {
15 if (xhr.readyState == 4 && xhr.status == 200) {
16 var result = xhr.responseText;
17 var citys = result.split('&')[1].split('|');
18 //城市下拉框清空
19 document.forms[0].city.length = 0;
20
21 //绑定城市框
22 for (var j = 0; j < citys.length; j++) {
23 var city = citys[j].split(',');
24 var op = new Option();
25 op.value = city[0];
26 op.text = city[1];
27 document.forms[0].city.options.add(op);
28 }
29 }
2 function GetCity() {
3
4 //获取省份框选中的值
5 var provId = document.forms[0].prov.value;
6
7 CreateXhr();
8 xhr.onreadystatechange = UpdateCity;
9 xhr.open("get", "getProvCity.aspx?provid=" + provId + "&time=" + new Date());
10 xhr.send(null);
11 }
12
13 //修改城市下拉框内容
14 function UpdateCity() {
15 if (xhr.readyState == 4 && xhr.status == 200) {
16 var result = xhr.responseText;
17 var citys = result.split('&')[1].split('|');
18 //城市下拉框清空
19 document.forms[0].city.length = 0;
20
21 //绑定城市框
22 for (var j = 0; j < citys.length; j++) {
23 var city = citys[j].split(',');
24 var op = new Option();
25 op.value = city[0];
26 op.text = city[1];
27 document.forms[0].city.options.add(op);
28 }
29 }
前台html代码：
html 1 <body>
2 <form id="form1" runat="server">
3 <div>
4 <select id="prov" onchange="GetCity();">
5 </select>
6 <select id="city">
7 </select>
8 </div>
9 </form>
10 </body>
2 <form id="form1" runat="server">
3 <div>
4 <select id="prov" onchange="GetCity();">
5 </select>
6 <select id="city">
7 </select>
8 </div>
9 </form>
10 </body>
实例二：利用$.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 {
3 string time = "";
4 //Get
5 if (Request.QueryString["time"]!=null)
6 {
7 time = "Get:"+ Request.QueryString["time"].ToString();
8 }
9 //Post
10 if (Request.Form["time"] != null)
11 {
12 time = "Post:" + Request.Form["time"].ToString();
13 }
14
15 Response.Write(time + " 现在：" + DateTime.Now.ToString());
16 Response.End();
17 }
2 {
3 string time = "";
4 //Get
5 if (Request.QueryString["time"]!=null)
6 {
7 time = "Get:"+ Request.QueryString["time"].ToString();
8 }
9 //Post
10 if (Request.Form["time"] != null)
11 {
12 time = "Post:" + Request.Form["time"].ToString();
13 }
14
15 Response.Write(time + " 现在：" + DateTime.Now.ToString());
16 Response.End();
17 }
前台获取时间 1 <script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
2 <script type="text/javascript">
3 $(function () {
4 //参数：直接在页面之后加？拼加
5 $("#btnGet").click(function () {
6 $.get("data.aspx?time=" + new Date(), Succeed);
7 });
8
9 //参数：使用键值来表示需要传递的参数
10 $("#btnPost").click(function () {
11 $.post("data.aspx", { time: new Date() }, Succeed);
12 });
13 });
14
15 function Succeed(result) {
16 $("#tbShow").val(result);
17 }
18 </script>
2 <script type="text/javascript">
3 $(function () {
4 //参数：直接在页面之后加？拼加
5 $("#btnGet").click(function () {
6 $.get("data.aspx?time=" + new Date(), Succeed);
7 });
8
9 //参数：使用键值来表示需要传递的参数
10 $("#btnPost").click(function () {
11 $.post("data.aspx", { time: new Date() }, Succeed);
12 });
13 });
14
15 function Succeed(result) {
16 $("#tbShow").val(result);
17 }
18 </script>
html<body>
<form id="form1" runat="server">
<div>
<input type="text" id="tbShow"/>
<input type="button" id="btnGet" value="get方法" />
<input type="button" id="btnPost" value="post方法" />
<input type="button" id="btnAjax" value="ajax方法" />
</div>
</form>
</body>
<form id="form1" runat="server">
<div>
<input type="text" id="tbShow"/>
<input type="button" id="btnGet" value="get方法" />
<input type="button" id="btnPost" value="post方法" />
<input type="button" id="btnAjax" value="ajax方法" />
</div>
</form>
</body>
实例三：使用$.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格式 --获取时间的时，分，秒
后台代码：
text后台 1 public partial class textData : System.Web.UI.Page
2 {
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 string hour = DateTime.Now.Hour.ToString();
6 string minute = DateTime.Now.Minute.ToString();
7 string second = DateTime.Now.Second.ToString();
8
9 string textStr = hour + "/" + minute + "/" + second;
10
11 Response.Write(textStr);
12
13 Response.End();
14 }
15 }
2 {
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 string hour = DateTime.Now.Hour.ToString();
6 string minute = DateTime.Now.Minute.ToString();
7 string second = DateTime.Now.Second.ToString();
8
9 string textStr = hour + "/" + minute + "/" + second;
10
11 Response.Write(textStr);
12
13 Response.End();
14 }
15 }
前台获取代码：
text前台 1 <script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
2 <script type="text/javascript">
3 $(function () {
4 $("#btnText").click(function () {
5 $.ajax({
6 url: "textData.aspx",
7 type: "get",
8 dataType: "text",
9 success: textSucceed,
10 error: Error
11 });
12 });
13
14 });
15
16 //成功
17 function textSucceed(result) {
18 $("#tbShow").val(result);
19 }
20
21 //错误函数
22 function Error() {
23 alert("Error!!!");
24 }
25 </script>
2 <script type="text/javascript">
3 $(function () {
4 $("#btnText").click(function () {
5 $.ajax({
6 url: "textData.aspx",
7 type: "get",
8 dataType: "text",
9 success: textSucceed,
10 error: Error
11 });
12 });
13
14 });
15
16 //成功
17 function textSucceed(result) {
18 $("#tbShow").val(result);
19 }
20
21 //错误函数
22 function Error() {
23 alert("Error!!!");
24 }
25 </script>
2>.Json格式 --获取时间的时，分，秒
我们需要在后台返回Json格式的数据，添加一个dll链接库，类似.Net中处理Json数据的API ，如图：
Json格式后台代码：
Json后台 1 //添加引用
2 using Newtonsoft.Json;
3
4 namespace AJAX.Json
5 {
6 public partial class jsonData : System.Web.UI.Page
7 {
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 string hour = DateTime.Now.Hour.ToString();
11 string minute = DateTime.Now.Minute.ToString();
12 string second = DateTime.Now.Second.ToString();
13
14 //匿名类型
15 var time = new { h = hour, m = minute, s = second };
16
17 //转Json格式
18 var jsonStr = JsonConvert.SerializeObject(new[] { time });
19
20 Response.Write(jsonStr);
21
22 Response.End();
23 }
24 }
25 }
2 using Newtonsoft.Json;
3
4 namespace AJAX.Json
5 {
6 public partial class jsonData : System.Web.UI.Page
7 {
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 string hour = DateTime.Now.Hour.ToString();
11 string minute = DateTime.Now.Minute.ToString();
12 string second = DateTime.Now.Second.ToString();
13
14 //匿名类型
15 var time = new { h = hour, m = minute, s = second };
16
17 //转Json格式
18 var jsonStr = JsonConvert.SerializeObject(new[] { time });
19
20 Response.Write(jsonStr);
21
22 Response.End();
23 }
24 }
25 }
Json格式前台代码：
Json前台 1 <script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
2 <script type="text/javascript">
3 $("#btnJson").click(function () {
4 $.ajax({
5 url: "jsonData.aspx",
6 type: "get",
7 dataType: "json",
8 success: jsonSuccess,
9 error: Error
10 });
11 });
12
13 //成功
14 function jsonSuccess(result) {
15 //[{h:10,m:20,s:30}]
16 //key:数组元素下标-此时为0
17 //value:{ h:10,m:20,s:30 }
18 $.each(result, function (key, value) {
19 var h = value.h;
20 var m = value.m;
21 var s = value.s;
22 $("#tbShow").val(h + ":" + m + ":" + s);
23 });
24 }
25
26 //错误函数
27 function Error() {
28 alert("Error!!!");
29 }
30 </script>
2 <script type="text/javascript">
3 $("#btnJson").click(function () {
4 $.ajax({
5 url: "jsonData.aspx",
6 type: "get",
7 dataType: "json",
8 success: jsonSuccess,
9 error: Error
10 });
11 });
12
13 //成功
14 function jsonSuccess(result) {
15 //[{h:10,m:20,s:30}]
16 //key:数组元素下标-此时为0
17 //value:{ h:10,m:20,s:30 }
18 $.each(result, function (key, value) {
19 var h = value.h;
20 var m = value.m;
21 var s = value.s;
22 $("#tbShow").val(h + ":" + m + ":" + s);
23 });
24 }
25
26 //错误函数
27 function Error() {
28 alert("Error!!!");
29 }
30 </script>
3>.xml格式--获取用户名，出生年月
Xml格式后台代码：
xml后台 1 //添加引用
2 using System.Xml;
3
4 namespace AJAX.Ajax_Xml
5 {
6 public partial class XmlData : System.Web.UI.Page
7 {
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 string name = "zld";
11 string birth = "1990-1-8";
12
13 //第一种：直接字符串拼接
14 string xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><root><Name>" + name + "</Name><Birth>" + birth + "</Birth></root>";
15
16 //第二种：XmlDocument创建
17
18 //创建文档
19 XmlDocument xmlDocument = new XmlDocument();
20 //文档头声明
21 XmlDeclaration xd = xmlDocument.CreateXmlDeclaration("1.0","utf-8",null);
22 xmlDocument.AppendChild(xd);
23
24 //添加根节点
25 XmlElement root = xmlDocument.CreateElement("root");
26 xmlDocument.AppendChild(root);
27
28 //给根节点添加子节点
29 XmlElement node1 = xmlDocument.CreateElement("Name");
30 node1.InnerText = name;
31 root.AppendChild(node1);
32
33 XmlElement node2 = xmlDocument.CreateElement("Birth");
34 node2.InnerText = birth;
35 root.AppendChild(node2);
36
37 //获取节点元素
38 string xmlStr2 = xmlDocument.OuterXml;
39
40 Response.Write(xmlStr2);
41 Response.End();
42
43 }
44 }
45 }
2 using System.Xml;
3
4 namespace AJAX.Ajax_Xml
5 {
6 public partial class XmlData : System.Web.UI.Page
7 {
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 string name = "zld";
11 string birth = "1990-1-8";
12
13 //第一种：直接字符串拼接
14 string xmlStr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?><root><Name>" + name + "</Name><Birth>" + birth + "</Birth></root>";
15
16 //第二种：XmlDocument创建
17
18 //创建文档
19 XmlDocument xmlDocument = new XmlDocument();
20 //文档头声明
21 XmlDeclaration xd = xmlDocument.CreateXmlDeclaration("1.0","utf-8",null);
22 xmlDocument.AppendChild(xd);
23
24 //添加根节点
25 XmlElement root = xmlDocument.CreateElement("root");
26 xmlDocument.AppendChild(root);
27
28 //给根节点添加子节点
29 XmlElement node1 = xmlDocument.CreateElement("Name");
30 node1.InnerText = name;
31 root.AppendChild(node1);
32
33 XmlElement node2 = xmlDocument.CreateElement("Birth");
34 node2.InnerText = birth;
35 root.AppendChild(node2);
36
37 //获取节点元素
38 string xmlStr2 = xmlDocument.OuterXml;
39
40 Response.Write(xmlStr2);
41 Response.End();
42
43 }
44 }
45 }
Xml格式前台代码：
Xml前台 1 <script src="../Scripts/jquery-1.8.0.js" type="text/javascript"></script>
2 <script type="text/javascript">
3 $(function () {
4 $("#btnXml").click(function () {
5 $.ajax({
6 url: "XmlData.aspx",
7 type: "get",
8 dataType: "xml",
9 success: Success,
10 error: function (result) {
11 alert("相应内容非xml格式！");
12 }
13 });
14 });
15 });
16
17 function Success(xmlResult) {
18 //获取返回结果
19 var result = xmlResult;
20 //找寻根节点并循环遍历
21 $(result).find('root').each(function (key) {
22 //获取子节点名为Name的值
23 var name = $(this).children("Name").text();
24 //获取子节点名为Birth的值
25 var birth = $(this).children("Birth").text();
26 $("#tbShow").val(name + ":" + birth);
27 });
28 }
29 </scri
2 <script type="text/javascript">
3 $(function () {
4 $("#btnXml").click(function () {
5 $.ajax({
6 url: "XmlData.aspx",
7 type: "get",
8 dataType: "xml",
9 success: Success,
10 error: function (result) {
11 alert("相应内容非xml格式！");
12 }
13 });
14 });
15 });
16
17 function Success(xmlResult) {
18 //获取返回结果
19 var result = xmlResult;
20 //找寻根节点并循环遍历
21 $(result).find('root').each(function (key) {
22 //获取子节点名为Name的值
23 var name = $(this).children("Name").text();
24 //获取子节点名为Birth的值
25 var birth = $(this).children("Birth").text();
26 $("#tbShow").val(name + ":" + birth);
27 });
28 }
29 </scri
实例四：ajax调用wcf获取数据
首先贴上模块图：
首先定义好数据契约和操作契约，贴上StudentService.svc代码：
StudentService.svc 1 namespace ajaxwcf
2 {
3 [ServiceContract(Namespace = "")]
4 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
5 public class StudentService
6 {
7 // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)
8 // 要创建返回 XML 的操作，
9 // 请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
10 // 并在操作正文中包括以下行:
11 // WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
12 [OperationContract]
13 //获取学生数据
14 public List<Student> GetStudents()
15 {
16 string sqlConn = ConfigurationManager.ConnectionStrings["SqlConn"].ConnectionString;
17 SqlConnection conn = new SqlConnection(sqlConn);
18 SqlDataAdapter da = new SqlDataAdapter("select * from AJAX_Tab", conn);
19 DataSet ds = new DataSet();
20 da.Fill(ds);
21 List<Student> Stulis = new List<Student>();
22 DataTable dt = ds.Tables[0];
23 Student student = null;
24 foreach (DataRow row in dt.Rows)
25 {
26 student = new Student();
27 student.Sname = row["sname"].ToString();
28 student.Sage = row["sage"].ToString();
29 student.Sadd = row["sadd"].ToString();
30
31 Stulis.Add(student);
32 }
33
34 return Stulis;
35 }
36 }
37
38 //数据契约
39 [DataContract]
40 public class Student
41 {
42 private string sname;
43
44 [DataMember]
45 public string Sname
46 {
47 get { return sname; }
48 set { sname = value; }
49 }
50 private string sage;
51
52 [DataMember]
53 public string Sage
54 {
55 get { return sage; }
56 set { sage = value; }
57 }
58 private string sadd;
59
60 [DataMember]
61 public string Sadd
62 {
63 get { return sadd; }
64 set { sadd = value; }
65 }
66 }
67 }
2 {
3 [ServiceContract(Namespace = "")]
4 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
5 public class StudentService
6 {
7 // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)
8 // 要创建返回 XML 的操作，
9 // 请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
10 // 并在操作正文中包括以下行:
11 // WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
12 [OperationContract]
13 //获取学生数据
14 public List<Student> GetStudents()
15 {
16 string sqlConn = ConfigurationManager.ConnectionStrings["SqlConn"].ConnectionString;
17 SqlConnection conn = new SqlConnection(sqlConn);
18 SqlDataAdapter da = new SqlDataAdapter("select * from AJAX_Tab", conn);
19 DataSet ds = new DataSet();
20 da.Fill(ds);
21 List<Student> Stulis = new List<Student>();
22 DataTable dt = ds.Tables[0];
23 Student student = null;
24 foreach (DataRow row in dt.Rows)
25 {
26 student = new Student();
27 student.Sname = row["sname"].ToString();
28 student.Sage = row["sage"].ToString();
29 student.Sadd = row["sadd"].ToString();
30
31 Stulis.Add(student);
32 }
33
34 return Stulis;
35 }
36 }
37
38 //数据契约
39 [DataContract]
40 public class Student
41 {
42 private string sname;
43
44 [DataMember]
45 public string Sname
46 {
47 get { return sname; }
48 set { sname = value; }
49 }
50 private string sage;
51
52 [DataMember]
53 public string Sage
54 {
55 get { return sage; }
56 set { sage = value; }
57 }
58 private string sadd;
59
60 [DataMember]
61 public string Sadd
62 {
63 get { return sadd; }
64 set { sadd = value; }
65 }
66 }
67 }
在web.config中进行配置，上代码：
web.config 1 <system.serviceModel>
2 <behaviors>
3 <endpointBehaviors>
4 <behavior name="ajaxwcf.StudentServiceAspNetAjaxBehavior">
5 <enableWebScript />
6 </behavior>
7 </endpointBehaviors>
8 <serviceBehaviors>
9 <behavior name="MyServiceTypeBehaviors">
10 <serviceMetadata httpGetEnabled="true" />
11 </behavior>
12 <behavior name="">
13 <serviceMetadata httpGetEnabled="true" />
14 <serviceDebug includeExceptionDetailInFaults="false" />
15 </behavior>
16 </serviceBehaviors>
17 </behaviors>
18 <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
19 multipleSiteBindingsEnabled="true" />
20 <services>
21 <service name="ajaxwcf.StudentService" behaviorConfiguration="MyServiceTypeBehaviors">
22 <endpoint address="" behaviorConfiguration="ajaxwcf.StudentServiceAspNetAjaxBehavior"
23 binding="webHttpBinding" contract="ajaxwcf.StudentService" />
24 </service>
25 </services>
26 </system.serviceModel>
2 <behaviors>
3 <endpointBehaviors>
4 <behavior name="ajaxwcf.StudentServiceAspNetAjaxBehavior">
5 <enableWebScript />
6 </behavior>
7 </endpointBehaviors>
8 <serviceBehaviors>
9 <behavior name="MyServiceTypeBehaviors">
10 <serviceMetadata httpGetEnabled="true" />
11 </behavior>
12 <behavior name="">
13 <serviceMetadata httpGetEnabled="true" />
14 <serviceDebug includeExceptionDetailInFaults="false" />
15 </behavior>
16 </serviceBehaviors>
17 </behaviors>
18 <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
19 multipleSiteBindingsEnabled="true" />
20 <services>
21 <service name="ajaxwcf.StudentService" behaviorConfiguration="MyServiceTypeBehaviors">
22 <endpoint address="" behaviorConfiguration="ajaxwcf.StudentServiceAspNetAjaxBehavior"
23 binding="webHttpBinding" contract="ajaxwcf.StudentService" />
24 </service>
25 </services>
26 </system.serviceModel>
好了，这样wcf就配置好了，接下去就是页面端的调用了，贴上ajax_wcf.aspx前台页面代码：
ajax_wcf.aspx前台 1 <script type="text/javascript">
2 //载入WCF
3 function loadWCF() {
4 var student = new StudentService();
5 arr = student.GetStudents(succeededCallback, filedCallback);
6 }
7 //成功
8 function succeededCallback(result, userContext, methodName) {
9 var arr = new Array();
10 arr = result;
11 //动态创建表格信息 并赋值
12 var table = document.getElementById("ajaxTab");
13 for (var i = 0; i < arr.length; i++) {
14 var tr = document.createElement("tr");
15 var td1 = document.createElement("td");
16 td1.innerHTML = arr[i].Sname;
17
18 var td2 = document.createElement("td");
19 td2.innerHTML = arr[i].Sage;
20
21 var td3 = document.createElement("td");
22 td3.innerHTML = arr[i].Sadd;
23
24
25 tr.appendChild(td1);
26 tr.appendChild(td2);
27 tr.appendChild(td3);
28
29 table.appendChild(tr);
30 }
31 }
32
33 //失败
34 function filedCallback(error,userContext,methodName) {
35 alert("Error!");
36 }
2 //载入WCF
3 function loadWCF() {
4 var student = new StudentService();
5 arr = student.GetStudents(succeededCallback, filedCallback);
6 }
7 //成功
8 function succeededCallback(result, userContext, methodName) {
9 var arr = new Array();
10 arr = result;
11 //动态创建表格信息 并赋值
12 var table = document.getElementById("ajaxTab");
13 for (var i = 0; i < arr.length; i++) {
14 var tr = document.createElement("tr");
15 var td1 = document.createElement("td");
16 td1.innerHTML = arr[i].Sname;
17
18 var td2 = document.createElement("td");
19 td2.innerHTML = arr[i].Sage;
20
21 var td3 = document.createElement("td");
22 td3.innerHTML = arr[i].Sadd;
23
24
25 tr.appendChild(td1);
26 tr.appendChild(td2);
27 tr.appendChild(td3);
28
29 table.appendChild(tr);
30 }
31 }
32
33 //失败
34 function filedCallback(error,userContext,methodName) {
35 alert("Error!");
36 }
这样整个项目就完成了，接下去贴效果：
调用前：
调用后：
实例五[补充内容]：Json格式数据的打包和解包方式
在打包和解包中，我们仍旧用到了上面提及的Json数据API，同样要先添加引用，由于代码都有了对应的注释，不再多做文字的赘述，直接贴上代码和效果吧：
代码：
Json格式数据打包解包 1 namespace Json打包解包方式
2 {
3 class Program
4 {
5 static void Main(string[] args)
6 {
7 string name = "zld";
8 int age = 23;
9 string addr = "nb";
10
11 //----------------------匿名打包-------------------//
12 //创建匿名类型
13 var temClass = new { Name = name, Age = age, Addr = addr };
14
15 Console.WriteLine("----------通过匿名打包------------");
16 //打包成单个Json对象
17 var jsonStr1 = JsonConvert.SerializeObject(temClass);
18
19 Console.WriteLine("打包单个对象后:\n{0}", jsonStr1);
20 Console.WriteLine();
21
22 //打包成Json数组
23 var jsonStr2 = JsonConvert.SerializeObject(new[] { temClass,temClass });
24
25 Console.WriteLine("打包Json数组后：\n{0}", jsonStr2);
26 Console.WriteLine();
27
28 //----------------------匿名解包-------------------//
29 Console.WriteLine("----------通过匿名解包------------");
30 //匿名解包
31 var temClass2 = JsonConvert.DeserializeAnonymousType(jsonStr1, temClass);
32 Console.WriteLine("匿名解包后：\n Name={0},Age={1},Addr={2}",temClass2.Name,temClass2.Age,temClass2.Addr);
33 Console.WriteLine();
34
35 //提取局部信息
36 var temClass3 = JsonConvert.DeserializeAnonymousType(jsonStr1, new { Name = name, Addr = addr });
37 Console.WriteLine("匿名解包局部信息后: \n Name={0},Addr={1}", temClass3.Name, temClass3.Addr);
38 Console.WriteLine();
39
40 //解包成数组对象【jsonStr2：数组对象】
41 var temClass4 = JsonConvert.DeserializeAnonymousType(jsonStr2, new[] { temClass });
42 //数组 foreach循环遍历
43 foreach(var item in temClass4)
44 {
45 Console.WriteLine("匿名解包为数组后: \n Name={0},Age={1},Addr={2}",item.Name,item.Age,item.Addr);
46 }
47 Console.WriteLine();
48
49 //----------------------通过类打包-------------------//
50 //实例化一个类对象
51 MyObj mo = new MyObj() { Name = name, Age = age, Addr = addr };
52
53 Console.WriteLine("----------通过类打包------------");
54 //单个对象打包
55 var temClass5 = JsonConvert.SerializeObject(mo);
56 Console.WriteLine("类打包后：\n{0}", temClass5);
57 Console.WriteLine();
58
59 //打包成集合(数组 泛型)
60 var temClass6 = JsonConvert.SerializeObject(new[] { mo,mo });
61 Console.WriteLine("类打包成数组后：\n{0}", temClass6);
62 Console.WriteLine();
63
64 var temClass7=JsonConvert.SerializeObject(new List<MyObj>{mo,mo});
65 Console.WriteLine("类打包成泛型后：\n{0}", temClass6);
66 Console.WriteLine();
67
68 Console.WriteLine("----------通过类解包------------");
69
70 var temClass8 = JsonConvert.DeserializeObject<MyObj>(temClass5);
71 Console.WriteLine("类解包单个对象后：\n Name={0},Age={1},Addr={2}", temClass8.Name, temClass8.Age, temClass8.Addr);
72 Console.WriteLine();
73
74 var temClass9 = JsonConvert.DeserializeObject<List<MyObj>>(temClass6);
75 foreach(MyObj item in temClass9)
76 {
77 Console.WriteLine("类解包泛型后：\n Name={0},Age={1},Addr={2}", item.Name, item.Age, item.Addr);
78 }
79
80 Console.ReadKey();
81
82 }
83 }
84
85 //定义一个类型
86 public class MyObj
87 {
88 public string Name { get; set; }
89 public int Age { get; set; }
90 public string Addr { get; set; }
91 }
92 }
2 {
3 class Program
4 {
5 static void Main(string[] args)
6 {
7 string name = "zld";
8 int age = 23;
9 string addr = "nb";
10
11 //----------------------匿名打包-------------------//
12 //创建匿名类型
13 var temClass = new { Name = name, Age = age, Addr = addr };
14
15 Console.WriteLine("----------通过匿名打包------------");
16 //打包成单个Json对象
17 var jsonStr1 = JsonConvert.SerializeObject(temClass);
18
19 Console.WriteLine("打包单个对象后:\n{0}", jsonStr1);
20 Console.WriteLine();
21
22 //打包成Json数组
23 var jsonStr2 = JsonConvert.SerializeObject(new[] { temClass,temClass });
24
25 Console.WriteLine("打包Json数组后：\n{0}", jsonStr2);
26 Console.WriteLine();
27
28 //----------------------匿名解包-------------------//
29 Console.WriteLine("----------通过匿名解包------------");
30 //匿名解包
31 var temClass2 = JsonConvert.DeserializeAnonymousType(jsonStr1, temClass);
32 Console.WriteLine("匿名解包后：\n Name={0},Age={1},Addr={2}",temClass2.Name,temClass2.Age,temClass2.Addr);
33 Console.WriteLine();
34
35 //提取局部信息
36 var temClass3 = JsonConvert.DeserializeAnonymousType(jsonStr1, new { Name = name, Addr = addr });
37 Console.WriteLine("匿名解包局部信息后: \n Name={0},Addr={1}", temClass3.Name, temClass3.Addr);
38 Console.WriteLine();
39
40 //解包成数组对象【jsonStr2：数组对象】
41 var temClass4 = JsonConvert.DeserializeAnonymousType(jsonStr2, new[] { temClass });
42 //数组 foreach循环遍历
43 foreach(var item in temClass4)
44 {
45 Console.WriteLine("匿名解包为数组后: \n Name={0},Age={1},Addr={2}",item.Name,item.Age,item.Addr);
46 }
47 Console.WriteLine();
48
49 //----------------------通过类打包-------------------//
50 //实例化一个类对象
51 MyObj mo = new MyObj() { Name = name, Age = age, Addr = addr };
52
53 Console.WriteLine("----------通过类打包------------");
54 //单个对象打包
55 var temClass5 = JsonConvert.SerializeObject(mo);
56 Console.WriteLine("类打包后：\n{0}", temClass5);
57 Console.WriteLine();
58
59 //打包成集合(数组 泛型)
60 var temClass6 = JsonConvert.SerializeObject(new[] { mo,mo });
61 Console.WriteLine("类打包成数组后：\n{0}", temClass6);
62 Console.WriteLine();
63
64 var temClass7=JsonConvert.SerializeObject(new List<MyObj>{mo,mo});
65 Console.WriteLine("类打包成泛型后：\n{0}", temClass6);
66 Console.WriteLine();
67
68 Console.WriteLine("----------通过类解包------------");
69
70 var temClass8 = JsonConvert.DeserializeObject<MyObj>(temClass5);
71 Console.WriteLine("类解包单个对象后：\n Name={0},Age={1},Addr={2}", temClass8.Name, temClass8.Age, temClass8.Addr);
72 Console.WriteLine();
73
74 var temClass9 = JsonConvert.DeserializeObject<List<MyObj>>(temClass6);
75 foreach(MyObj item in temClass9)
76 {
77 Console.WriteLine("类解包泛型后：\n Name={0},Age={1},Addr={2}", item.Name, item.Age, item.Addr);
78 }
79
80 Console.ReadKey();
81
82 }
83 }
84
85 //定义一个类型
86 public class MyObj
87 {
88 public string Name { get; set; }
89 public int Age { get; set; }
90 public string Addr { get; set; }
91 }
92 }
效果图：
