《项目九使用AJAX提升用户体验.ppt》由会员分享，可在线阅读，更多相关《项目九使用AJAX提升用户体验.ppt（41页珍藏版）》请在三一办公上搜索。
1、项目九 使用AJAX提升用户体验,任务1 无刷新用户名验证任务2 站点时钟显示,任务1 无刷新用户名验证,任务场景：,当浏览者将注册信息填写完后，单击“注册”按钮，注册页面提交至服务器处理，如果用户名在数据库中不存在，则注册成功；否则页面返回，提示注册不成功，这时浏览者需对若干注册信息进行重新填写和提交。本任务通过ASP.NET 3.5提供的AJAX控件，实现会员注册时用户名无刷新的验证，提升用户访问Web页面的体验。,知识要点,认识AJAX什么是AJAXASP.NET 3.5和AJAXAJAX控件 ScriptManager脚本管理 控件UpdatePanel更新区域控件,9.1 认识AJA
2、X,什么是AJAXAJAX（Asynchronous JavaScript and XML）改变了传统Web中客户端和服务器端“请求等待请求等待”的模式，通过使用AJAX应用向服务器发送和接收需要的数据，避免产生页面刷新。,传统Web应用模型,AJAXWeb应用模型,9.1 认识AJAX,AJAX的主要技术HTML/XHTML：页面主要内容的表示语言。CSS：为HTML/XHTML提供文本格式定义。DOM：对已载入的页面进行动态更新。JavaScript：用来编写AJAX引擎的脚本语言。XML：XML DOM、XSLT、XPath等XML编程语言。AJAX的核心是JavaScript对象XML
3、HttpReques，该对象是一种支持异步请求的技术，用户可以使用该对象向服务器提出请求并处理响应，并且还不会影响客户端的信息通信。,9.1 认识AJAX,ASP.NET3.5 和AJAXASP.NET 3.5之前，ASP.NET自身并不支持AJAX的应用在ASP.NET 3.5中，可以直接拖动AJAX控件，像普通控件一样的使用，实现Web页面的无刷新功能。在ASP.NET 3.5中，Web.config文件中已经声明了AJAX功能。,9.2 AJAX控件,ScriptManage控件ScriptManager能够对整个页面进行局部更新管理。ScriptManager用来处理页面上局部更新。对
4、页面进行全局管理时，每个要使用AJAX功能的页面都需要使用一个ScriptManager控件，且只能被使用一次。ScriptManager控件负责管理AJAX页面的客户端脚本。ScriptManager控件向客户端发送AJAX所需脚本，客户端就可以使用AJAX的类型进行系统扩展，并在服务器和客户机之间来回编组信息，完成部分页面的更新。,9.2 AJAX控件,ScriptManage控件常用属性,9.2 AJAX控件,UpdatePanel控件它保存回送模型，允许执行页面的局部刷新。使用UpdatePanel控件时，整个页面中只有UpdatePanel控件中的服务器控件或事件进行刷新操作，而页面
5、的其他地方则不会被刷新。UpdatePanel控件主要属性RenderMode：指明UpdatePanel控件内呈现的标记是或。UpdateMode：指明内容模板的更新模式。ChildrenAsTriggers：指明在UpdatePanel控件的子控件的回发中是否导致UpdatePanel控件的更新，默认值为true。EnableViewState：指明是否自动保存其往返过程。,UpdatePanel控件,UpdatePanel控件通过和标签来处理页面上引发异步页面回送的控件。标签开发人员只要在异步页面回送过程中，将需要修改的控件包含在此标签中，就能够实现这些控件的页面无刷新的更新操作。例9.
6、1 ContentTemplate标签的使用,protected void Button1_Click(object sender,EventArgs e)TextBox1.Text=();,UpdatePanel控件,例9.1 ContentTemplate标签的使用,无标题页,UpdatePanel控件,标签指定引发异步页面回送的各种触发器。部分包含AsyncPostBackTrigger控件用来指定某个服务器控件，以及将其触发的服务器事件作为UpdatePanel异步更新的一种触发器；它包含ControlID和EventName两个属性，用于把按钮控件与触发器关联起来，进行异步回送。Co
7、ntrolID属性的值是要用作异步页面回送的触发器的控件；EventName属性值是ControlID指定的控件的事件名，该事件要在客户端的异步请求中调用。例9.2 ContentTemplate标签的使用,UpdatePanel控件,标签指定引发异步页面回送的各种触发器。部分包含PostBackTrigger控件用来指定在UpdatePanel中的某个控件，并指定其控件产生的事件将使用传统的回发方式进行回发。当使用PostBackTrigger控件进行控件描述时，该控件产生了一个事件，此时页面并不会异步更新，只会使用传统的方法进行页面刷新。,UpdatePanel控件,例9.2 Conten
8、tTemplate标签的使用,protected void Button1_Click(object sender,EventArgs e)TextBox1.Text=();,任务实施,无刷新用户名验证,任务实施,步骤1：创建网站，命名为AjaxNoRefreshDemo添加页面UserCheck.aspx，进行页面布局，控件属性设置。,任务实施,步骤2：添加AJAX控件 步骤3.创建数据库及信息存储表Users,任务实施,步骤3.创建数据库及信息存储表Users,任务实施,步骤4.创建存储过程CheckUser判断输入的用户名是否已经存在于Users的表中，如果存在就返回1，否则返回0。,C
9、REATE PROC dbo.CheckUser(uNamenvarchar(20)/注册用户名ASBEGIN IF EXISTS(SELECT*FROM Users WHERE UserName=uName)RETURN 1 ELSE RETURN 0END,任务实施,步骤5.编辑Web.config文件 添加节，添加数据库链接字符串,任务实施,步骤6.为用户名文本框添加事件添加节，添加数据库链接字符串,protected void txtUsername_TextChanged(object sender,EventArgs e)/获取web.config中的链接字符串 string co
10、nnstr=.ConnectionStringsDBConnectionString.ConnectionString;SqlConnection sqlConn=new SqlConnection(connstr);sqlConn.Open();/打开链接 SqlCommand cmd=new SqlCommand(CheckUser,sqlConn);cmd.CommandType=CommandType.StoredProcedure;/添加输入参数uName SqlParameter inParam;inParam=new SqlParameter(uName,SqlDbType.Va
11、rChar);inParam.Direction=ParameterDirection.Input;inParam.Value=();cmd.Parameters.Add(inParam);,任务实施,步骤6.为用户名文本框添加事件添加节，添加数据库链接字符串,/添加输出参数flag SqlParameter outParam;outParam=new SqlParameter(flag,SqlDbType.Int);outParam.Direction=ParameterDirection.ReturnValue;cmd.Parameters.Add(outParam);/执行存储过程 cm
12、d.ExecuteNonQuery();/获取存储过程返回值 int x=(int)cmd.Parametersflag.Value;if(x=1)Label1.Text=该用户名已经存在，不能注册;else Label1.Text=该用户名不存在，可以注册;,任务实施,步骤7.保存并查看运行效果当文本框txtUserName失去焦点时，判断文本框中输入的用户名如果在数据表Users中存在，则在文本框下方提示“该用户名已经存在，不能注册”，否则提示“该用户名不存在，可以注册”。,知识拓展,UpdateProgress控件当服务器与客户端进行异步通信时，UpdateProgress控件给终端用户
13、显示一个可视化元素，提示页面局部回送过程正在进行。HTML标签代码：正在进行用户名检验.,知识拓展,UpdateProgress控件无刷新用户名验证任务中UpdatePanel控件和UpdateProgress控件代码：,正在进行用户名检验.,知识拓展,UpdateProgress控件无刷新用户名验证任务中UpdatePanel控件和UpdateProgress控件运行效果：,任务2 站点时钟显示,任务场景：,浏览者在访问网站时，通常会看到页面上有一个时钟，用来显示系统当前的时间。这一技术通常通过JavaScript脚本程序来实现。本任务通过ASP.NET 3.5提供的AJAX控件Timer来
14、实现站点时钟显示。,知识要点,Timer控件ScriptManageProxy控件,9.3 Timer控件,Timer控件可以使应用程序方便有效地对系统时间进行控制。Timer控件能够在一定的时间间隔内触发某个事件属性Enabled：是否启用了Tick事件引发Interval：设置Tick事件之间的连续时间，单位为毫秒 如果要实现时钟的无刷新变化，还需要将该控件放置于有ScriptManage控件进行页面全局管理的页中，并使用UpdatePanel控件，实现时钟的局部更新。,9.3 Timer控件,例.页面中时钟无刷新显示,时钟显示,9.3 Timer控件,例.页面中时钟无刷新显示Update
15、Panel控件中包括一个Label控件和一个Timer控件。Label控件用于显示时间，Timer控件则用于每1000毫秒执行一次Time1_Tick事件。,protected void Page_Load(object sender,EventArgs e)Label1.Text=();protected void Timer1_Tick(object sender,EventArgs e)Label1.Text=();,9.4 ScriptManageProxy控件,在Web应用的开发过程中，常常通过母版页来为应用程序中的页创建一致布局。母版页与内容页一同组合成一个新页面呈现在客户端浏览器
16、中。如果在母版页中使用了ScriptManager控件，而在内容页中也使用ScriptManager控件，整合在一起的页面就会出现异常。例9-3：在母版页和内容页中均无刷新地显示系统时钟创建母版页,无标题页.style1 width:100%;height:768px;,9.4 ScriptManageProxy控件,例9-3：在母版页和内容页中均无刷新地显示系统时钟创建母版页,9.4 ScriptManageProxy控件,例9-3：在母版页和内容页中均无刷新地显示系统时钟添加母版页事件,protected void Button1_Click(object sender,EventArgs
17、 e)/单击按钮时文本框中显示当前时间 TextBox1.Text=();protected void Timer1_Tick(object sender,EventArgs e)Label1.Text=();,9.4 ScriptManageProxy控件,例9-3：在母版页和内容页中均无刷新地显示系统时钟添加内容页,9.4 ScriptManageProxy控件,例9-3：在母版页和内容页中均无刷新地显示系统时钟添加内容页事件内容页页面代码使用了MasterPage.master母版页作为样式控制，并且通过ScriptManagerProxy控件支持内容页的AJAX应用,protected
18、 void Button2_Click(object sender,EventArgs e)TextBox2.Text=();,任务实施,站点时钟显示,任务实施,步骤1打开网站打开项目2任务2 中的MasterPageDesign网站在该母版页中添加表格进行布局，并在表格中添加ScriptManager控件和UpdatePanel控件，在UpdatePanel中添加时间控件Timer1和时间显示控件Label1，设置Timer1控件的Interval属性为1000毫秒,任务实施,步骤2为母版页添加事件为母版页添加事件代码，使得Label1中显示时钟的频率为每秒钟变化一次步骤3.保存，查看运行效
19、果,protected void Page_Load(object sender,EventArgs e)Label1.Text=();protected void Timer1_Tick(object sender,EventArgs e)Label1.Text=();,知识拓展,使用多个UpdatePanel控件例9-4：多个UpdatePanel控件的使用,知识拓展,使用多个UpdatePanel控件例9-4：多个UpdatePanel控件的使用为Button1控件添加事件,protected void Button1_Click(object sender,EventArgs e)Label1.Text=Label1:+DateTime.Now;Label2.Text=Label2:+DateTime.Now;,
