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 @H_403_61@// @H_403_61@首先获取传递过来的参数值 @H_403_61@
6 @H_403_61@ stringprovId=Request.QueryString[ "].ToString();
7
8 @H_403_61@查询所有城市 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 @H_403_61@字符串拼接,为了前台获取时可以切分获取对应数据,用'|'来隔离各个省份 18 @H_403_61@resultProv+= | "+ string.Format( {0},{1} ",id,provName);
19}
20reader.Close();
21
22 @H_403_61@根据省份框的ID来获取对应的城市名 23 stringsqlcity= @H_403_61@select*fromCitywhereProid='{0}' 24sqlDataReaderreadercity=DbHelpersql.ExecuteReader(sqlcity);
25 stringresultCity= 26 while(readercity.Read())
27{
28 stringcityId=readercity[ 29 stringcityName=readercity[ 2].ToString();
30
31 @H_403_61@同样用字符串拼接用'|'来隔离同一省份的各个城市
32 @H_403_61@resultCity+= 33}
34
35 @H_403_61@去除第一个'|',并且在最后拼接上'&'来区分省份和城市
36 @H_403_61@resultProv=resultProv.Substring( 1)+ & 37
38 @H_403_61@最后的结果形式为【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= @H_
403_61@Msxml2.XMLHTTP 15}
16 17{
18xhr= 20}
21}
if(window.XMLHttpRequest){
23xhr= newXMLHttpRequest();
24}
25
returnxhr;
27}
页面载入时,实现省份框以及第一个省份对应的城市框的绑定代码

载入绑定省份 @H_403_61@functiongetLoadProv(){
3CreateXhr();
4xhr.onreadystatechange=WatchState;
5xhr.open( get getProvCity.aspx?provid=1&time= newDate());
6xhr.send( null);
7}
8
@H_403_61@监听载入绑定时状态 @H_403_61@functionWatchState(){
if(xhr.readyState== 4&&xhr.status== 200){
@H_403_61@1,**|2,**&1,##|2,## 13 varresult=xhr.responseText;
varprovs=result.split( ' ')[ 0].split( ');
varcitys=result.split( 1].split( 省份下拉框清空 @H_403_61@document.forms[ 0].prov.length= 0;
19
20 @H_403_61@绑定省份框 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 @H_403_61@城市下拉框清空 0].city.length= 32
33 @H_403_61@绑定城市框 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}
省份框的项发生变化时实现联级变化代码

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

实例二:利用$.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 @H_403_61@time 6{
7time= Get: "+Request.QueryString[ 8}
@H_403_61@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(){
@H_
403_61@参数:直接在页面之后加?拼加 @H_403_61@$( #btnGet ").click(function(){
6$. get( data.aspx?time= newDate(),Succeed);
7});
@H_403_61@参数:使用键值来表示需要传递的参数 @H_403_61@#btnPost 11$.post( data.aspx newDate()},128)">12});
13});
15functionSucceed(result){
16$( #tbShow ").val(result);
17}
18</script>
<body>
<formid= ">
<div>
<inputtype= text "id= tbShow "/>
<inputtype= button btnGet "value= get方法 btnPost post方法 btnAjax 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格式--获取时间的时,分,秒

后台代码

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}

前台获取代码

2>.Json格式@H_403_61@获取时间的时,分,秒

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

Json格式后台代码

添加引用 2 @H_403_61@ usingNewtonsoft.Json;
3
4 namespaceAJAX.Json
5{
classjsonData:System.Web.UI.Page
7{
8 9{
10 11 12 14 @H_403_61@匿名类型 15 vartime= new{h=hour,m=minute,s=second};
16
@H_403_61@转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 @H_
403_61@functionjsonSuccess(result){
@H_403_61@[{h:10,m:20,s:30}]
@H_403_61@key:数组元素下标-此时为0
@H_403_61@value:{h:10,s:30} @H_403_61@$.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创建
@H_
403_61@创建文档 @H_403_61@XmlDocumentxmlDocument= newXmlDocument();
@H_403_61@文档头声明 @H_403_61@XmlDeclarationxd=xmlDocument.CreateXmlDeclaration( 1.0 utf-8 null);
22xmlDocument.AppendChild(xd);
23
24 @H_403_61@添加根节点 25 @H_403_61@XmlElementroot=xmlDocument.CreateElement( root 26xmlDocument.AppendChild(root);
27
28 @H_403_61@给根节点添加子节点 29 @H_403_61@XmlElementnode1=xmlDocument.CreateElement( Name 30node1.InnerText=name;
31root.AppendChild(node1);
32
33XmlElementnode2=xmlDocument.CreateElement( Birth 34node2.InnerText=birth;
35root.AppendChild(node2);
36
37 @H_403_61@获取节点元素 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){
@H_403_61@获取返回结果 varresult=xmlResult;
@H_403_61@找寻根节点并循环遍历 @H_403_61@$(result).find( ' ').each(function(key){
@H_403_61@获取子节点名为Name的值 23 varname=$( this).children( ").text();
@H_403_61@获取子节点名为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 @H_
403_61@要使用HTTPGET,请添加[WebGet]特性。(默认ResponseFormat为WebMessageFormat.Json)
@H_403_61@要创建返回XML的操作,
@H_403_61@请添加[WebGet(ResponseFormat=WebMessageFormat.Xml)],
@H_403_61@并在操作正文中包括以下行:
@H_403_61@WebOperationContext.Current.OutgoingResponse.ContentType="text/xml"; @H_403_61@[OperationContract]
@H_403_61@获取学生数据 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}
@H_403_61@数据契约
@H_403_61@[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<service
MetadatahttpGetEnabled= 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 @H_403_61@functionloadWCF(){
varstudent= newStudentService();
5arr=student.GetStudents(succeededCallback,filedCallback);
6}
@H_403_61@成功 @H_403_61@functionsucceededCallback(result,userContext,methodName){
vararr= newArray();
10arr=result;
@H_403_61@动态创建表格信息并赋值 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}
@H_403_61@失败 @H_403_61@functionfiledCallback(error,128)">35alert( Error! 36}
这样整个项目就完成了,接下去贴效果

调用前:

调用后:

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

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

代码

namespaceJson打包解包方式
classProgram
static voidMain( string[]args)
stringname= zld intage= 23;
stringaddr= nb 10
@H_
403_61@----------------------匿名打包------------------- @H_403_61@创建匿名类型 vartemClass= new{Name=name,Age=age,Addr=addr};
15Console.WriteLine( ----------通过匿名打包------------ 打包成单个Json对象 varjsonStr1=JsonConvert.SerializeObject(temClass);
18
19Console.WriteLine( 打包单个对象后:\n{0} 20Console.WriteLine();
@H_403_61@打包成Json数组
varjsonStr2=JsonConvert.SerializeObject( new[]{temClass,temClass});
25Console.WriteLine( 打包Json数组后:\n{0} 26Console.WriteLine();
27
@H_403_61@----------------------匿名解包-------------------
@H_403_61@//
@H_403_61@Console.WriteLine( ----------通过匿名解包------------ 匿名解包 vartemClass2=JsonConvert.DeserializeAnonymousType(jsonStr1,temClass);
32Console.WriteLine( 匿名解包后:\nName={0},Age={1},Addr={2} 33Console.WriteLine();
@H_403_61@提取局部信息
vartemClass3=JsonConvert.DeserializeAnonymousType(jsonStr1,Addr=addr});
37Console.WriteLine( 匿名解包局部信息后:\nName={0},Addr={1} 38Console.WriteLine();
39
@H_403_61@解包成数组对象【jsonStr2:数组对象】
41 vartemClass4=JsonConvert.DeserializeAnonymousType(jsonStr2,255)">new[]{temClass});
@H_403_61@数组foreach循环遍历 43 foreach( varitem intemClass4)
44{
45Console.WriteLine( 匿名解包为数组后:\nName={0},item.Name,item.Age,item.Addr);
46}
47Console.WriteLine();
48
49 @H_403_61@----------------------通过类打包-------------------
@H_403_61@实例化一个类对象 51 @H_403_61@MyObjmo= newMyObj(){Name=name,128)">52
53Console.WriteLine( ----------通过类打包------------ 54 @H_403_61@单个对象打包 vartemClass5=JsonConvert.SerializeObject(mo);
56Console.WriteLine( 类打包后:\n{0} 57Console.WriteLine();
58
59 @H_403_61@打包成集合(数组泛型)
60 vartemClass6=JsonConvert.SerializeObject( new[]{mo,mo});
61Console.WriteLine( 类打包成数组后:\n{0} 62Console.WriteLine();
63
vartemClass7=JsonConvert.SerializeObject( newList<MyObj>{mo,128)">65
Console.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 @H_403_61@定义一个类型
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

猜你在找的Ajax相关文章