最近用了近两天的时间对AJAX的知识进行了一个梳理,觉得是时候对AJAX的相关知识点做个总结了.....这当然也就是本篇博客的主旨了....我也不是很赞成用长篇大论来讲述什么是AJAX,怎么使用AJAX,这样我总觉得太理论化了,接受起来会有一定的难度...所以,本篇博客的另一个主旨是:从实例入手,由浅到深.....好了,直接开始入手吧...在之前的一篇文章中讲解了《原生态AJAX来获取数据》的一个小实例,从“原生态”就可以看出,就是AJAX的最基础的形态了....
实例一:省份-城市的联级下拉框
利用AJAX来获取数据实现联级下拉框,当省份下拉框的选项发生变化时,城市的选项对应变化,效果如图:
我们首先来实现后台,先将数据准备好了在实现前台获取数据,【考虑:当我们页面登录的时候,我们需要获取的数据】:1).省份框中的省份;2).因为登录时省份框的第一项选中,所以还需要第一个省份所对应的城市名,好了,需求知道了,代码就好写了,直接贴上后台代码:
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}
后台代码其实很简单,就是根据传过来的参数从数据库获取对应的数据,但是这里我们把获取到得数据最后都用字符串拼接起来了,而且是有规律的拼接,这是为什么呢?其实在注释上已经讲明了,就是为了方便前台获取对应的数据了,因为我们是使用后台返回文本形式的数据,这就是为什么我们拼接字符串了。。
接下来我们来实现前台,前台主要的任务就是获取后台返回的数据,并实现绑定......也是分块贴上代码
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}
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}
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}
2<formid= form1 "runat= server ">
3<div>
4< selectid= prov "onchange= GetCity(); 5</ select>
6< city 7</ 8</div>
9</form>
10</body>
$.get():
语法:$(selector).get(url,data,success(response,status,xhr),dataType)
参数
url:必须,请求发送的地址。
data:可选,发送到服务器的数据。
success:可选,请求成功时运行的函数
1).response:包含结果的数据
2).status:包含请求的状态
3).xhr:包含XmlHttpRequest对象
dataType:服务器响应的数据类型,默认将智能判断
$.post()
语法:$(selector).post(url,success(data,jqXHR),dataType)
参数
url:必须,请求发送的地址。
data:可选,发送到服务器的数据。
success:可选,请求成功时运行的函数
1).data:包含结果的数据
2).status:包含请求的状态
3).jqXHR:包含XmlHttpRequest对象
dataType:服务器响应的数据类型,默认将智能判断
由于实例相当简单,直接上所有代码:
7time= Get: "+Request.QueryString[ 8}
Post if(Request.Form[ 12time= Post: "+Request.Form[ 13}
14
15Response.Write(time+ 现在: "+DateTime.Now.ToString());
16Response.End();
17}
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>
<formid= ">
<div>
<inputtype= text "id= tbShow "/>
<inputtype= button btnGet "value= get方法 btnPost post方法 btnAjax ajax方法 "/>
</div>
</form>
</body>
$.ajax()
语法: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格式--获取时间的时,分,秒
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<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 ,如图:
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}
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>
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}
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
首先贴上模块图:
首先定义好数据契约和操作契约,贴上StudentService.svc代码:
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}
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>
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,同样要先添加引用,由于代码都有了对应的注释,不再多做文字的赘述,直接贴上代码和效果吧:
代码:
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
原文链接:https://www.f2er.com/ajax/163009.html