无刷新.docx
- 文档编号:29751849
- 上传时间:2023-07-26
- 格式:DOCX
- 页数:10
- 大小:124.18KB
无刷新.docx
《无刷新.docx》由会员分享,可在线阅读,更多相关《无刷新.docx(10页珍藏版)》请在冰豆网上搜索。
无刷新
经济效益证明
有效增加页面点击率,用户使增加完美体验感。
附1大同煤矿集团公司科学技术(技术革新)奖申报书
(2010年度)
一、项目基本情况
奖种
科技进步
∨
技术发明
技术革新
项目名称
无刷新技术在网页中的应用(ASP.NETAjax)
主要完成人
张克忠朱晶景霞
主要完成单位
同煤集团同家梁矿
申报单位意见
(盖章)
同意
申报奖励等级
项目可否公布
主题词
网页无刷新Ajax
专业一级
分类
信息
专业二级
分类
任务来源
A.国家计划B.部委计划C.省、市、自治区计划
D.基金资助E.国际合作F.其它单位委托
G.自选∨H.非职务I.其它
项目起止时间
2009.8——2010.1
组织评价单位
同煤集团公司科技成果验收委员会
评价时间
2010年8
成果水平
申报单位
联系人
王玉印
所在部门
科技科
联系电话
7063149
移动电话
二、项目简介
立项原因
改变传统网页的用户体验
研究内容
ASP.NETAjax是一个Web技术开发包,它集成了一套非常大的客户端脚本库使得与功能丰富的、基于服务器开发平台的ASP.NET2.0结合在一起,Ajax能让Web应用通过直接调用Web服务器来更新一个Web页面的数据――不需要在页面往返传送(也就是不需要多次刷新页面)。
使用Ajax,能最大地利用ASP.NET和服务器端代码在浏览器中来做许多工作,使得有更加丰富的用户体验。
创新点
在我矿安全网页中的搜索部分、隐患排查系统采用了ASP.NETAjax技术。
搜索部分模拟谷歌搜索引擎,当输入第一个字的时候,在下拉列表中会出现若干个搜索结果。
有效增加用户的完美体验感。
在隐患排查系统中,选择不同的类别时,页面与服务器只交换隐患排查的内容,而不是整个页面,与服务器的数据交换量明显降低,从而提高页面响应速度。
效益及应用情况
能有效增加网页点击率,新技术得到良好应用;应用情况良好。
科技成果报告
无刷新技术在网页中的应用(ASP.NETAjax)
一、ASP.NETAjax简介
ASP.NETAjax是一个Web技术开发包,它集成了一套非常大的客户端脚本库使得与功能丰富的、基于服务器开发平台的ASP.NET2.0结合在一起,Ajax能让Web应用通过直接调用Web服务器来更新一个Web页面的数据――不需要在页面往返传送(也就是不需要多次刷新页面)。
使用Ajax,能最大地利用ASP.NET和服务器端代码在浏览器中来做许多工作,使得有更加丰富的用户体验。
ASP.NETAjax是一个完整的开发框架,其服务器端编程模型相对于客户端编程模型较为简单,而且容易与现有的ASP.NET程序相结合,通常实现复杂的功能只需要在页面中拖几个控件,而不必了解深层次的工作原理,除此之外服务器端编程的ASP.NETAJAXControlToolkit含有大量的独立AJAX控件和对ASP.NET原有服务器控件的AJAX功能扩展,实现起来也非常简单。
二、ASP.NETAJAX的实现原理:
1、传统的HTML整页刷新:
传统的HTML访问过程为,客户端浏览器向服务器发送访问请求,服务器接收到请求后,对客户请求进行相应的运算和处理,生成结果后发送回客户端浏览器,客户端浏览器对回送结果进行处理,实现整页的刷新
2、Ajax的局部更新:
相对于传统的整页刷新,Ajax的局部更新则显得更加智慧和人性化,当用户在客户端浏览器页面进行相关操作后,Ajax将自动访问服务器端,对局部页面进行更新。
3、Ajax交互:
第一次请求发回一个完整的Web页面,以后更新数据并不是将整个页面重新载入,而仅仅是将响应的内容会传。
Ajax是JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体,主要应用于异步获取后台数据和局部刷新。
4、ASP.NETAjax框架主要包括:
核心组件、工具包、增值组件、以及框架类库4部分。
5、ASP.NETAjax具有以下特点:
1、通过异步模式,提升了用户体验。
2、优化了浏览器和服务器之间的传输,减少了不必要的数据往返,减少了带宽占用。
3、Ajax引擎在客户端运行,承担了一部分由服务器承担的工作,从而减少了大用户量下的服务器负载。
三、具体应用:
在我矿安全网页中的搜索部分、隐患排查系统采用了ASP.NETAjax技术。
1、搜索部分:
网页源代码如下,
TabPanelID="TabPanel4"runat="server"HeaderText="新闻搜索"> 100%"align="center"> LabelID="Label4"runat="server"Text="请输入您要查询的新闻标题"> Lab 100011"id="complete"align="center"> TextBoxID="TextBox2"runat="server"Width="250px"> TextBox> ButtonID="Button2"runat="server"Width="80px"Text="确定"PostBackUrl="~/NewsTarget.aspx"BorderColor="#ff3399"ForeColor="#ff3399"/>
AutoCompleteExtenderrunat="server"CompletionInterval="300"MinimumPrefixLength="1" ServiceMethod="GetCompleteList"ServicePath="WebService.asmx"TargetControlID="TextBox2"CompletionSetCount="10">
AutoCompleteExtender>
WebService代码:
usingSystem;
usingSystem.Web;
usingSystem.Collections.Generic;//必须添加
usingSystem.Web.Services;
usingSystem.Web.Services.Protocols;
usingSystem.Data.SqlClient;
usingSystem.Data;
usingSystem.Configuration;
///
///WebService的摘要说明
///
[WebService(Namespace="http:
//tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]//必须添加
publicclassWebService:
System.Web.Services.WebService
{
publicWebService()
{
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
publicstring[]GetCompleteList(stringprefixText,intcount)
{
List
SqlConnectionmyCon=newSqlConnection(ConfigurationManager.ConnectionStrings["safeConnectionString"].ConnectionString);//数据库连接
myCon.Open();//打开数据库连接
SqlCommandmyCmd=newSqlCommand("selecttop"+count+"[Title]from[PhotoNews]whereTitlelike'%"+prefixText+"%'",myCon);
SqlDataReadermyDR=myCmd.ExecuteReader();
while(myDR.Read())
{
items.Add(myDR["Title"].ToString());
}
myCon.Close();//关闭数据库连接
myDR.Close();
returnitems.ToArray();
}
}
2、隐患排查部分:
网页源代码:
Labelstyle="LEFT: 5px;POSITION: relative;TOP: 0px"id="Label2"runat="server"Width="125px"ForeColor="Red"Text="请选择隐患类别">
Label> 100px;HEIGHT: 21px"> DropDownListstyle="POSITION: relative"id="DropDownList2"runat="server"Width="151px"AutoPostBack="True"OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"> ListItem>按照检查日期分类 ListItem> ListItem>按照隐患类别分类 ListItem> ListItem>按照完成情况分类 ListItem> DropDownList> 100px;HEIGHT: 21px;TEXT-ALIGN: right"> Labelstyle="POSITION: relative"id="Label7"runat="server"Width="108px"ForeColor="Red"Text="请选择项目"> Label> 100px;HEIGHT: 21px;TEXT-ALIGN: center"> DropDownListstyle="POSITION: relative"id="DropDownList3"runat="server"Width="193px"AutoPostBack="True"OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged"> DropDownList> 212px"colSpan=4> Panelid="Panel1"runat="server"Width="778px"ScrollBars="Horizontal"> GridViewID="GridView1"runat="server"AutoGenerateColumns="False" DataSourceID="SqlDataSource9"Width="1000px"> BoundFieldDataField="Unit"HeaderText="被检单位"SortExpression="Unit"ItemStyle-Width="80px"/> BoundFieldDataField="Site"HeaderText="检查地点"SortExpression="Site"ItemStyle-Width="100px"/> BoundFieldDataField="Tim"HeaderText="检查时间"SortExpression="Tim"DataFormatString="{0: yyyy-MM-dd}"ItemStyle-Width="80px"/> BoundFieldDataField="Question"HeaderText="存在问题"SortExpression="Question" ItemStyle-Width="180px"ItemStyle-Wrap="true"/> BoundFieldDataField="FinishTim"HeaderText="完成日期"SortExpression="FinishTim"DataFormatString="{0: yyyy-MM-dd}"ItemStyle-Width="80px"/> BoundFieldDataField="Leader"HeaderText="整改负责人"SortExpression="Leader"ItemStyle-Width="80px"/> CheckBoxFieldDataField="Status"HeaderText="完成情况"SortExpression="Status"ItemStyle-Width="40px"/> BoundFieldDataField="Inspector"HeaderText="整改复查人"SortExpression="Inspector" ItemStyle-Width="80px"/> BoundFieldDataField="Kind"HeaderText="隐患类别"SortExpression="Kind"ItemStyle-Width="80px"/> BoundFieldDataField="BLeader"HeaderText="分管矿领导"SortExpression="BLeader"ItemStyle-Width="80px"/> BoundFieldDataField="step"HeaderText="整改措施"SortExpression="step"ItemStyle-Width="180px"ItemStyle-Wrap="true"/> GridView> Panel> SqlDataSourceid="SqlDataSource9"runat="server"ConnectionString="<%$ConnectionStrings: safeConnectionString%>"SelectCommand="SELECT[Unit],[Site],[Tim],[Question],[FinishTim],[Leader],[Status],[Inspector],[Kind],[BLeader],[step]FROM[Hidden]"> SqlDataSource> UpdatePanel> 100%"colSpan=3> buttonid="Button1"runat="server"> button> 隐患排查设计页面如图:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 刷新