使用AJAX提升用户体验.pptVIP

使用AJAX提升用户体验 1 无刷新用户名验证 ： 当浏览者将注册信息填写完后，单击“注册”按钮，注册页面提交至服务器处理，如果用户名在数据库中不存在，则注册成功；否则页面返回，提示注册不成功，这时浏览者需对若干注册信息进行重新填写和提交。 本任务通过ASP.NET 3.5提供的AJAX控件，实现会员注册时用户名无刷新的验证，提升用户访问Web页面的体验。 知识要点 认识AJAX 什么是AJAX ASP.NET 3.5和AJAX AJAX控件 ScriptManager脚本管理 控件 UpdatePanel更新区域控件 9.1 认识AJAX 什么是AJAX AJAX（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对象XMLHttpReques，该对象是一种支持异步请求的技术，用户可以使用该对象向服务器提出请求并处理响应，并且还不会影响客户端的信息通信。 9.1 认识AJAX ASP.NET3.5 和AJAX ASP.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用来处理页面上局部更新。 对页面进行全局管理时，每个要使用AJAX功能的页面都需要使用一个ScriptManager控件，且只能被使用一次。 ScriptManager控件负责管理AJAX页面的客户端脚本。ScriptManager控件向客户端发送AJAX所需脚本，客户端就可以使用AJAX的类型进行系统扩展，并在服务器和客户机之间来回编组信息，完成部分页面的更新。 asp:ScriptManager ID=ScriptManager1 runat=server /asp:ScriptManager 9.2 AJAX控件 ScriptManage控件常用属性 属性/方法 描 述 AllowCustomErrorsRedirect 表示在异步回发过程中是否进行自定义错误重定向，默认值为true AsyncPostBackErrorMessage 表示在异步回送过程中发生的异常将显示出的消息 AsyncPostBackTimeout 异步回传时超时限制，默认值为90，单位为秒 EnablePageMethods 该属性用于设定客户端JavaScript直接调用服务端静态WebMethod EnablePartialRendering 可以使页面的某些控件或某个区域实现AJAX类型的异步回送和局部更新功能，默认值为true。当属性设置为false时，则整个页面将不进行局部更新而失去AJAX的效果 LoadScriptBeforeUI 是否需要在加载UI控件前首先加载脚本，默认为false ScriptMode 指定ScriptManager发送到客户端的脚本的模式，有4种模式：Auto，Inherit，Debug和Release，默认值为Auto ScriptPath 设置所有的脚本块的根目录，作为全局属性，包括自定义的脚本块或者引用第三方的脚本块 9.2 AJAX控件 UpdatePanel控件 它保存回送模型，允许执行页面的局部刷新。 使用UpdatePanel控件时，整个页面中只有UpdatePanel控件中的服务器控件或事件进行刷新操作，而页面的其他地方则不会被刷新。 UpdatePanel控件主要属性 RenderMode：指明UpdatePanel控件内呈现的标记是div或span。 UpdateMode：指明内容模板的更新模式。 ChildrenAsTriggers：指明在UpdatePanel控件的子控件的回发中是否导致UpdatePanel控件的更新，默认值为true。 EnableViewState：指明是否自动保存其往返