AJAX调用方式总结

本文转载自查看原文 2012-08-22 20:06 15555 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         }

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

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

实例化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         }

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

载入绑定

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         }

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

省份变化绑定

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             }

前台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>

实例二：利用$.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         }

前台获取时间

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>

html

实例三：使用$.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     }

前台获取代码：

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>.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 }

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>

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 }

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

实例四：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 }

在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>

好了，这样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          }

这样整个项目就完成了，接下去贴效果：

调用前：

调用后：

实例五[补充内容]：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 }

效果图：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 3：前端ajax调用接口方式 Jquery ajax调用webservice总结 jQuery方式实现ajax接口调用 jquery ajax几种书写方式的总结 ajax data属性传值的方式总结 javascript链式调用实现方式总结 java调用http接口的几种方式总结 java调用http接口的几种方式总结 js post get ajax 调用接口传值 json方式 Java调用WebService方法总结(9,end)--Http方式调用WebService