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}

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

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

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

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

获取城市 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代码

实例二:利用$.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:服务器响应的数据类型,默认将智能判断

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

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>
<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格式获取时间的时,分,秒

我们需要在后台返回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>.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<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前台页面代码

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

调用前:

调用后:

实例五[补充内容]: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)">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 定义一个类型 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

原文链接:https://www.f2er.com/ajax/163009.html

猜你在找的Ajax相关文章