Ajax 之使用 XMLHttp实现简单的异步数据加载

简介:

前一段做项目的时候,要用到异步加载数据的知识。以前没写过这方面的,查了查,可以使用Ajax来完成。有很多现成额Ajax框架,但是总感觉用这些东西之前至少得先把原理弄清楚吧。在者,用那些别人的控件的时候,出个问题调bug就是个令人纠结头疼的事,就是因为自己根本不明白底层到底是怎么回事。。。。

好吧,然后就开始最基础的XMlHttp对象的学习。

这里,暂时抛开令人郁闷的浏览器兼容的问题。免得将过多的精力放在那上边。

说实话,很少写js,这次算是写的比较多的了。

 

什么是Ajax?

W3c说AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),其实或许有些概念性的东西,用的多,自然就明白了。

 

首先说一下自己做的demo吧。

在DataList中(描述不准确,大家应该都明白吧)点击链接,异步加载数据,展示到页面上。

 

在网上找了一些教程,看来不算复杂。

基本思路就是

创建XMlHttp对象,利用XMlHttp对象异步请求某个文件,获取文件内容,触发定义好的事件,改变客户端内容。

那么需要一个显示数据的页面,叫Default.aspx,然后还有一个处理数据的页面,接受参数,返回数据,叫做Data.asxp. ok,这两个就够了。

对于页面代码主要就是 做了一个DataLIst ,后台绑定几个测试用的数据。

其中lblFileData是用来显示数据的,当然显示之前,给出的是友好的提示。注册了一个js事件,用于点击时进行响应,将当前的对象和路径信息传递过去(抽象来说就是 1. 当前对象2. 数据参数信息)

代码如下

1   < asp:Content  ID = " BodyContent "  runat = " server "  ContentPlaceHolderID = " MainContent " > 
2     < asp:DataList  ID = " dlShowData "  runat = " server " > 
3     < ItemTemplate > 
4         < table > 
5         < tr > 
6             < td    class = " title " > 文件编号: < /td > 
7             < td   > <% #Eval( " 编号 " )   %> < /td > 
8         < /tr > 
9           < tr > 
10          < td  class = " title " > 文件信息   : < /td > 
11          < td > < label      class = " lblclick "    id = " lblFileData "  onclick ='  showData (this   ,   "   &lt;% #Eval( " 路径 "   )   %> "   )' &gt;   点击查看文件信息 < /label > < br/ > < /td > 
12          < /tr > 
13          < tr > 
14                  < td  class = " title " > 文件名称: < /td > 
15                  < td > <% #Eval( " 名称 " ) %> < /td > 
16          < /tr > 
17        < /table > 
18    < /ItemTemplate > 
19    < /asp:DataList > 
20  < /asp:Content >

接下来是js代码

createXmlHttp函数 用来创建XmlHttp对象,由于浏览器兼容问题,做了一点小处理。其实可以处理的更好一点,这里就不麻烦了。

sendReqest 利用XMlHttp发送请求。

getReqUrl 获得我们所需要的Url

showData 毫无疑问,点击时异步获得数据,并改变页面显示内容。

代码如下(包括部分css)

1   < asp : Content   ID = " HeaderContent "   runat = " server "   ContentPlaceHolderID = " HeadContent " > 
2   < style   type = " text/css " > 
3           . title 
4           { 
5                   width : 150 ; 
6           } 
7           . lblclick 
8           { 
9                   cursor : pointer ; 
10                  color : Blue ; 
11                  text - decoration : underline ; 
12          } 
13          . data 
14          { 
15                  color : Black ; 
16                  text - decoration : none ; 
17                  cursor : auto ; 
18          } 
19  < / style > 
20  < script   type = " text/javascript " > 
21          function   showData ( lblFileData ,   path )   { 
22                  var   xmlHttp   =   createXmlHttp ( ) ; 
23                  if   ( xmlHttp )   { 
24                          // 在xmlHttp对象状态发生改变是会自动触发该函数,和.net中的事件模型一样。 
25                    // 状态有好几种,4   表示数据接收完毕,200表示请求已处理成功 
26                          xmlHttp . onreadystatechange   =   function   ( )   { 
27                                  if   ( xmlHttp . readyState   = =   4   & &   xmlHttp . status   = =   200 )   { 
28                                          lblFileData . innerText   =   xmlHttp . responseText ; 
29                                  } 
30                                  else   if   ( xmlHttp . readyState   ! =   4 )   { 
31                                          lblFileData . innerText   =   " 数据加载中…… " ; 
32                                  } 
33                                  else   if   ( xmlHttp . readyState   = =   4   & &   xmlHttp . status   ! =   200 )   { 
34                                          lblFileData . innerText   =   " 数据加载已完成,但是未得到相应数据! " ; 
35                                  } 
36                                  else   { 
37                                          lblFileData . innerText   =   " 请求错误,返回错误编号 "   +   xmlHttp . status ; 
38                                  } 
39                                  lblFileData . className   =   " data " ; 
40                          } 
41                  } 
42                  lblFileData . className   =   " data " ; 
43                  var   reqUrl   =   getReqUrl ( path ) ; 
44                  sendReqest ( xmlHttp , reqUrl ) ; // 发送请求 
45          } 
46 
47          // 创建xmlHttp对象 
48          function   createXmlHttp ( )   { 
49                  var   xmlHttp   =   window . ActiveXObject   ?   new   ActiveXObject ( " Microsoft.XMLHTTP " )   :   new   XMLHttpRequest ( ) ; 
50                  return   xmlHttp ; 
51          } 
52 
53          function   sendReqest ( xmlHttp ,   url )   { 
54                  // 有三种方式GET,POST,HEAD,不同的方式稍微有点不同,url即为请求的文件路径,一定不要写错。。。true表示异步请求 
55                  xmlHttp . open ( " GET " ,   url ,   true ) ; // 打开请求 
56                  xmlHttp . send ( ) ; // 发送请求 
57          } 
58 
59          // 有中文,会出项乱码,采用二次编码,在接收端进行二次解码。。不知道有没有更好的处理办法 
60          function   getReqUrl ( path )   { 
61                  path   =   encodeURI ( encodeURI ( path ) ) ; 
62                  var   url   =   " .\\Data.aspx?path= "   +   path ; 
63                  return   url ; 
64          } 
65 
66  < / script > 
67  < / asp : Content >  

对于一些细节问题,比如说那些状态各代表什么意思啊,什么的,童鞋们自己查查吧

 

后台代码如下

 

1   protected   void   Page_Load ( object   sender ,   EventArgs   e ) 
2           { 
3                   if ( !Page.IsPostBack ) 
4                   { 
5                           DataTable   dataTable   =   GetDataSource ( ) ; 
6                           BindData ( dataTable ) ; 
7                   } 
8           } 
9  
10          protected   void   BindData ( DataTable   source ) 
11          { 
12                  dlShowData.DataSource   =   source ; 
13                  dlShowData.DataBind ( ) ; 
14          } 
15 
16          protected     DataTable   GetDataSource ( ) 
17          { 
18                  DataTable   dataTable = new   DataTable ( ) ; 
19                  dataTable.Columns. Add ( " 编号 " ) ; 
20                  dataTable.Columns. Add ( " 路径 " ) ; 
21                  dataTable.Columns. Add ( " 名称 " ) ; 
22                  
23                  string[]   pathes = new   string[]{ " F:\\ASP.NET\\MyCode\\MyBlog\\XmlHttp-2011-7-24\\Data\\extern学习.txt " , @ " F:\\ASP.NET\\MyCode\\MyBlog\\XmlHttp-2011-7-24\\Data\\编程风格类.txt " , @ " F:\\ASP.NET\\MyCode\\MyBlog\\XmlHttp-2011-7-24\\Data\\堆与栈.txt " } ; 
24                  string[]   names = new   string[]{   @ " extern学习.txt " , @ " 编程风格类.txt " , @ " 堆与栈.txt "   } ; 
25                  dataTable.Rows. Add ( 1 ,   pathes[ 0 ] ,   names[ 0 ] ) ; 
26                  dataTable.Rows. Add ( 1 ,   pathes[ 1 ] ,   names[ 1 ] ) ; 
27                  dataTable.Rows. Add ( 1 ,   pathes[ 2 ] ,   names[ 2 ] ) ; 
28 
29                  return   dataTable ; 
30          }

接下来就是Data页面了这个页面很简单,就是获得传递过来的参数,访问本地文件,得到数据后,写到Response响应流中。

代码如下

 

1   protected   void   Page_Load ( object   sender,   EventArgs   e ) 
2           { 
3                   string   path   =   Page . Request . QueryString [ " path " ] ; 
4                   path   =   Server . UrlDecode ( path ) ; 
5                   string   responseText   =   " " ; 
6                   if ( ! string . IsNullOrEmpty ( path ) ) 
7                         responseText =   GetData ( path ) ; 
8                   else 
9                           responseText   =   " 文件路径信息错误! " ; 
10                  Response . Write ( responseText ) ; 
11                  Response . Flush ( ) ; 
12          } 
13 
14          ///   < summary > 
15          ///   获取数据源 
16          ///   < /summary > 
17          ///   < param  name = " path " > < /param > 
18          ///   < returns > < /returns > 
19          protected     string     GetData ( string     path ) 
20          { 
21                  return   GetFileContent ( path ) ; 
22          } 
23 
24          ///   < summary > 
25          ///   得到文件内容信息 
26          ///   < /summary > 
27          ///   < param  name = " path " > < /param > 
28          ///   < returns > < /returns > 
29          protected     string   GetFileContent ( string     path ) 
30          { 
31                  if ( File . Exists ( path ) ) 
32                  { 
33                          StreamReader   sr =   new   StreamReader ( path,Encoding . Default ) ; 
34                          string   content =   sr . ReadToEnd ( ) ; 
35                          sr . Close ( ) ; 
36                          return   content; 
37                  } 
38                  else 
39                  { 
40                          return   " 没有找到对应文件信息 " ; 
41                  } 
42          }

OK,这样下来这个Demo就完成了。

最后,贴一个效果图

点击前

image

 

点击后

image

 

这样的话,以前的RCenter中回复事件注册为后台事件响应极慢的问题应该就很容易解决了吧,只不过是更改一下数据源,调整优化样式的事情了。

 

回想一下真个编写过程,也不是很顺利的,调试了好几次才搞定。最多的问题处在路径上,在onclick中传递单斜杠到js方法中时,单斜杠被消除了,是转译么?还没有细细研究,现在的处理是在后台传递时传递双斜杠,这样就没问题了。

                                                                                       

 

本文转自HDDevTeam 51CTO博客,原文链接:http://blog.51cto.com/hddev/622336,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
1月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
16天前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
12 0
|
1月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
27 3
|
1月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
1月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
11月前
|
XML 前端开发 JavaScript
ajax 异步
Ajax(异步JavaScript和XML)是一种用于创建优雅的、可交互的Web内容的技术。它使用XMLHttpRequest对象作为后台与服务器端通信的桥梁,并使用JavaScript处理和展示从服务器端返回的数据。 Ajax可以使用户界面更加实时和响应迅速,因为它只需要通过JavaScript处理和展示从服务器端返回的部分数据,而无需重新加载整个页面。这也意味着,用户可以在不必等待整个页面重新加载的情况下,就可以获取和操作服务器端的数据。 Ajax的工作原理是,当用户触发某个操作时,JavaScript代码会向服务器发送一个HTTP请求,并在服务器端返回响应后,使用JavaScript处理
41 0
|
11月前
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
547 0
|
11月前
|
前端开发 数据可视化
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
Echarts实战案例代码(14):数据可视化大屏根据ajax异步更新筛选条件查询互动展示的解决思路
92 0
|
7月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
61 0