AJAX调用方式总结

发布时间：2020-12-16 01:53:32 所属栏目：百科来源：网络整理

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

最近用了近两天的时间对AJAX的知识进行了一个梳理，觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX，怎么使用AJAX，这样我总觉得太理论化了，接受起来会有一定的难度...所以，本篇博客的另一个主旨是：从实例入手，由浅到深.....好了，直接开始入手吧...在之前的一篇文章中讲解了《原生态AJAX来获取数据》的一个小实例，从“原生态”就可以看出，就是AJAX的最基础的形态了....

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

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

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

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

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

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

实例化XmlHttpRequest对象 2 varxhr= null;
3functionCreateXhr(){
4 if(window.ActiveXObject)
5{
try
7{
8xhr= newActiveXObject( Microsoft.XMLHTTP ");
9}
10 catch(e)
11{
14xhr= Msxml2.XMLHTTP 15}
16 17{
18xhr= 20}
21}
if(window.XMLHttpRequest){
23xhr= newXMLHttpRequest();
24}
25
returnxhr;
27}

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

载入绑定省份 functiongetLoadProv(){
3CreateXhr();
4xhr.onreadystatechange=WatchState;
5xhr.open( get getProvCity.aspx?provid=1&time= newDate());
6xhr.send( null);
7}
8
监听载入绑定时状态 functionWatchState(){
if(xhr.readyState== 4&&xhr.status== 200){
1,**|2,**&1,##|2,## 13 varresult=xhr.responseText;
varprovs=result.split( ' ')[ 0].split( ');
varcitys=result.split( 1].split( 省份下拉框清空 document.forms[ 0].prov.length= 0;
19
20 绑定省份框 21 for( vari= 0;i<provs.length;i++){
varprov=provs[i].split( , 实例化一个选项 24 varop= newOption();
25op.value=prov[ 0];
26op.text=prov[ 1];
27document.forms[ 0].prov.options.add(op);
28}
29
30 城市下拉框清空 0].city.length= 32
33 绑定城市框 34 varj= 0;j<citys.length;j++){
varcity=citys[j].split( 37op.value=city[ 38op.text=city[ 39document.forms[ 0].city.options.add(op);
40}
41}
42}

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

获取城市 functionGetCity(){
3
获取省份框选中的值 varprovId=document.forms[ 0].prov.value;
6
7CreateXhr();
8xhr.onreadystatechange=UpdateCity;
9xhr.open( getProvCity.aspx?provid= "+provId+ &time= 10xhr.send( 11}
12
修改城市下拉框内容 functionUpdateCity(){
19 20
25op.value=city[ 26op.text=city[ 29}

前台html代码：

1<body>
2<formid= form1 "runat= server ">
3<div>
4< selectid= prov "onchange= GetCity(); 5</ select>
6< city 7</ 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,success(data,jqXHR),dataType)

参数

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

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

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

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

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

3).jqXHR:包含XmlHttpRequest对象

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

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

stringtime= Get time 6{
7time= Get: "+Request.QueryString[ 8}
Post if(Request.Form[ 12time= Post: "+Request.Form[ 13}
14
15Response.Write(time+ 现在： "+DateTime.Now.ToString());
16Response.End();
17}

1<scriptsrc= ../Scripts/jquery-1.8.0.js "type= text/javascript "></script>
2<scripttype= 3$(function(){
参数：直接在页面之后加？拼加 $( #btnGet ").click(function(){
6$. get( data.aspx?time= newDate(),Succeed);
7});
参数：使用键值来表示需要传递的参数 #btnPost 11$.post( data.aspx newDate()},128)">12});
13});
15functionSucceed(result){
16$( #tbShow ").val(result);
17}
18</script>

实例三：使用$.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 
     classtextData:System.Web.UI.Page 
     
     2{ 
     
     3 
     protected 
     voidPage_Load( 
      
     4{ 
     
     5 
     stringhour=DateTime.Now.Hour.ToString(); 
     
     6 
     stringminute=DateTime.Now.Minute.ToString(); 
     
     7 
     stringsecond=DateTime.Now.Second.ToString(); 
     
     8 
     
     9 
     stringtextStr=hour+ 
     " 
     / 
     "+minute+ 
     "+second; 
     
     10 
     
     11Response.Write(textStr); 
     
     12 
     
     13Response.End(); 
     
     14} 
     
     15}

前台获取代码：

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

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

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

Json格式后台代码：

添加引用 2 usingNewtonsoft.Json;
3
4 namespaceAJAX.Json
5{
classjsonData:System.Web.UI.Page
7{
8 9{
10 11 12 14 匿名类型 15 vartime= new{h=hour,m=minute,s=second};
16
转Json格式 18 varjsonStr=JsonConvert.SerializeObject( new[]{time});
19
20Response.Write(jsonStr);
21
22Response.End();
23}
25}

Json格式前台代码：

3$( #btnJson 4$.ajax({
5url: jsonData.aspx 6type: 7dataType: json 8success:jsonSuccess,128)">9error:Error
10});
13 functionjsonSuccess(result){
[{h:10,m:20,s:30}]
key:数组元素下标-此时为0
value:{h:10,s:30} $.each(result,function(key,value){
19 varh=value.h;
20 varm=value.m;
vars=value.s;
22$( ").val(h+ : "+m+ "+s);
23});
25
26 27 28alert( 29}
30</script>

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

Xml格式后台代码：

usingSystem.Xml;
namespaceAJAX.Ajax_Xml
classXmlData:System.Web.UI.Page
stringname= zld ";
stringbirth= 1990-1-8 第一种：直接字符串拼接 stringxmlStr= <?xmlversion="1.0"encoding="utf-8"?><root><Name> "+name+ </Name><Birth> "+birth+ </Birth></root> 第二种：XmlDocument创建
创建文档 XmlDocumentxmlDocument= newXmlDocument();
文档头声明 XmlDeclarationxd=xmlDocument.CreateXmlDeclaration( 1.0 utf-8 null);
22xmlDocument.AppendChild(xd);
23
24 添加根节点 25 XmlElementroot=xmlDocument.CreateElement( root 26xmlDocument.AppendChild(root);
27
28 给根节点添加子节点 29 XmlElementnode1=xmlDocument.CreateElement( Name 30node1.InnerText=name;
31root.AppendChild(node1);
32
33XmlElementnode2=xmlDocument.CreateElement( Birth 34node2.InnerText=birth;
35root.AppendChild(node2);
36
37 获取节点元素 38 stringxmlStr2=xmlDocument.OuterXml;
39
40Response.Write(xmlStr2);
41Response.End();
42
43}
44}
45}

Xml格式前台代码：

#btnXml XmlData.aspx xml 9success:Success,128)">10error:function(result){
11alert( 相应内容非xml格式！ 12}
13});
15});
17functionSuccess(xmlResult){
获取返回结果 varresult=xmlResult;
找寻根节点并循环遍历 $(result).find( ' ').each(function(key){
获取子节点名为Name的值 23 varname=$( this).children( ").text();
获取子节点名为Birth的值 varbirth=$( 26$( ").val(name+ "+birth);
27});
28}
29</scri

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

首先贴上模块图：

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

namespaceajaxwcf
3[ServiceContract(Namespace= "")]
4[AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
public classStudentService
7 要使用HTTPGET，请添加[WebGet]特性。(默认ResponseFormat为WebMessageFormat.Json)
要创建返回XML的操作，
请添加[WebGet(ResponseFormat=WebMessageFormat.Xml)]，
并在操作正文中包括以下行:
WebOperationContext.Current.OutgoingResponse.ContentType="text/xml"; [OperationContract]
获取学生数据 publicList<Student>GetStudents()
15{
stringsqlConn=ConfigurationManager.ConnectionStrings[ SqlConn "].ConnectionString;
17SqlConnectionconn= newSqlConnection(sqlConn);
18SqlDataAdapterda= newSqlDataAdapter( select*fromAJAX_Tab 19DataSetds= newDataSet();
20da.Fill(ds);
21List<Student>Stulis= newList<Student>();
22DataTabledt=ds.Tables[ 23Studentstudent= foreach(DataRowrow indt.Rows)
25{
26student= newStudent();
27student.Sname=row[ sname 28student.Sage=row[ sage 29student.Sadd=row[ sadd 31Stulis.Add(student);
32}
33
returnStulis;
35}
36}
数据契约 [DataContract]
40 classStudent
41{
42 private stringsname;
43
44[DataMember]
45 stringSname
46{
47 get{ returnsname;}
48 set{sname=value;}
49}
50 stringsage;
51
52[DataMember]
53 stringSage
54{
55 returnsage;}
56 set{sage=value;}
57}
58 stringsadd;
59
60[DataMember]
61 stringSadd
62{
63 returnsadd;}
64 set{sadd=value;}
65}
66}
67}

在web.config中进行配置，上代码：

1<system.serviceModel>
2<behaviors>
3<endpointBehaviors>
4<behaviorname= ajaxwcf.StudentServiceAspNetAjaxBehavior 5<enableWebScript/>
6</behavior>
7</endpointBehaviors>
8<serviceBehaviors>
9<behaviorname= MyServiceTypeBehaviors 10<serviceMetadatahttpGetEnabled= true "/>
11</behavior>
12<behaviorname= "">
13<serviceMetadatahttpGetEnabled= 14<serviceDebugincludeExceptionDetailInFaults= false 15</behavior>
16</serviceBehaviors>
17</behaviors>
18<serviceHostingEnvironmentaspNetCompatibilityEnabled= "
19multipleSiteBindingsEnabled= 20<services>
21<servicename= ajaxwcf.StudentService "behaviorConfiguration= 22<endpointaddress= ""behaviorConfiguration= 23binding= webHttpBinding "contract= 24</service>
25</services>
26</system.serviceModel>

好了，这样wcf就配置好了，接下去就是页面端的调用了，贴上ajax_wcf.aspx前台页面代码：

1<scripttype= 载入WCF functionloadWCF(){
varstudent= newStudentService();
5arr=student.GetStudents(succeededCallback,filedCallback);
6}
成功 functionsucceededCallback(result,userContext,methodName){
vararr= newArray();
10arr=result;
动态创建表格信息并赋值 vartable=document.getElementById( ajaxTab 0;i<arr.length;i++){
vartr=document.createElement( tr vartd1=document.createElement( td 16td1.innerHTML=arr[i].Sname;
17
vartd2=document.createElement( 19td2.innerHTML=arr[i].Sage;
vartd3=document.createElement( 22td3.innerHTML=arr[i].Sadd;
23
24
25tr.appendChild(td1);
26tr.appendChild(td2);
27tr.appendChild(td3);
28
29table.appendChild(tr);
30}
31}
失败 functionfiledCallback(error,128)">35alert( Error! 36}

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

调用前：

调用后：

实例五[补充内容]：Json格式数据的打包和解包方式

在打包和解包中，我们仍旧用到了上面提及的Json数据API，同样要先添加引用，由于代码都有了对应的注释，不再多做文字的赘述，直接贴上代码和效果吧：

代码：

namespaceJson打包解包方式
classProgram
static voidMain( string[]args)
stringname= zld intage= 23;
stringaddr= nb 10
----------------------匿名打包------------------- 创建匿名类型 vartemClass= new{Name=name,Age=age,Addr=addr};
15Console.WriteLine( ----------通过匿名打包------------ 打包成单个Json对象 varjsonStr1=JsonConvert.SerializeObject(temClass);
18
19Console.WriteLine( 打包单个对象后:n{0} 20Console.WriteLine();
打包成Json数组 varjsonStr2=JsonConvert.SerializeObject( new[]{temClass,temClass});
25Console.WriteLine( 打包Json数组后：n{0} 26Console.WriteLine();
27
----------------------匿名解包------------------- //
Console.WriteLine( ----------通过匿名解包------------ 匿名解包 vartemClass2=JsonConvert.DeserializeAnonymousType(jsonStr1,temClass);
32Console.WriteLine( 匿名解包后：nName={0},Age={1},Addr={2} 33Console.WriteLine();
提取局部信息 vartemClass3=JsonConvert.DeserializeAnonymousType(jsonStr1,Addr=addr});
37Console.WriteLine( 匿名解包局部信息后:nName={0},Addr={1} 38Console.WriteLine();
39
解包成数组对象【jsonStr2：数组对象】 41 vartemClass4=JsonConvert.DeserializeAnonymousType(jsonStr2,255)">new[]{temClass});
数组foreach循环遍历 43 foreach( varitem intemClass4)
44{
45Console.WriteLine( 匿名解包为数组后:nName={0},item.Name,item.Age,item.Addr);
46}
47Console.WriteLine();
48
49 ----------------------通过类打包------------------- 实例化一个类对象 51 MyObjmo= newMyObj(){Name=name,128)">52
53Console.WriteLine( ----------通过类打包------------ 54 单个对象打包 vartemClass5=JsonConvert.SerializeObject(mo);
56Console.WriteLine( 类打包后：n{0} 57Console.WriteLine();
58
59 打包成集合(数组泛型) 60 vartemClass6=JsonConvert.SerializeObject( new[]{mo,mo});
61Console.WriteLine( 类打包成数组后：n{0} 62Console.WriteLine();
63
vartemClass7=JsonConvert.SerializeObject( newList<MyObj>{mo,128)">65Console.WriteLine( 类打包成泛型后：n{0} 66Console.WriteLine();
67
68Console.WriteLine( ----------通过类解包------------ 69
70 vartemClass8=JsonConvert.DeserializeObject<MyObj>(temClass5);
71Console.WriteLine( 类解包单个对象后：nName={0},temClass8.Name,temClass8.Age,temClass8.Addr);
72Console.WriteLine();
73
74 vartemClass9=JsonConvert.DeserializeObject<List<MyObj>>(temClass6);
75 foreach(MyObjitem intemClass9)
76{
77Console.WriteLine( 类解包泛型后：nName={0},128)">78}
79
80Console.ReadKey();
81
82}
83}
84
85 定义一个类型 86 classMyObj
87{
88 stringName{ get; set;}
89 intAge{ 90 stringAddr{ 91}
92}

效果图：

转载;http://www.cnblogs.com/holyknight-zld/archive/2012/08/22/ajaxSummary.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!