第一章 ASP.NET Ajax简介

第一章      ASP.NET Ajax简介

1.1什么是Ajax

一.什么是Ajax

Ajax是Asynchronous JavaScript and XML(异步JavaScript 和XML)的缩写,由著名用户体验专家Jesse-James Garrett在2005年2月18日发表的一篇名为Ajax:a New Approach to Web Applications文章中首先提出。

Ajax并不是只包含JavaScript和XML两种技术,事实上,Ajax是由JavaScript、XML、XSLT、CSS、DOM和XMLHttpRequest等多种技术组成的。

XMLHttpRequest对象:是Ajax的核心,该对象由浏览器中的JavaScript创建,负责在后台以异步的方式让客户端连接到服务器。

从英文原意来说,它代表浏览器与Web服务器之间以异步方式进行沟通,并且同时发送与接收XML。从技术角度,只要使用下列技术开发的页面程序,都可以被视为是Ajax的实现成果:(1)使用符合W3C规范的CSS与XHTML来定义页面外观。(2)使用浏览器的DOM以及DHTML技术来显示动态内容与分层内容,并与用户产生互动。(3)使用XML进行数据交换,并使用XSLT转换XML格式的数据。(4)使用XMLHttpRequest或XMLHTTP这组API来接收异步数据(5)JavaScript与微软InternetExplorer浏览器特有的Jscript是遵循ECMAScript标准实现的技术。

Ajax并不是某家厂商的专利,也不是某家厂商所有的对象、组件或产品。

Ajax 是一种技术、一种概念、一种架构。

所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本(JavaScript)的一种集成。 DHTML建立在原有技术的基础上,可分为三个方面:一是HTML,也就是页面中的各种页面元素对象,它们是被动态操纵的内容;二是CSS,CSS属性也是动态操纵的内容,从而获得动态的格式效果;三是客户端脚本(例如JavaScript),它实际操纵Web页上的HTML和CSS。

    XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别。

二.Ajax解决的问题:

提高Web应用程序的速度,不再让用户等待。

Ajax的高明之处在于,它只会将页面中需要更新的部分发送给Web 服务器为处理,并且将处理后的内容发送回客户端浏览器进行局部更新。

三.典型应用程序:

1.http://home.live.com:个性化网页。用户可以拖放网页内容位置。

2.http://local.live.com:文本输入框有水印效果,提示使用的输入。

3. http://local.live.com网上地图任意拖放点击加载

应用现状:

   事实上Ajax的技术始于1998年。在2005之前只有少数页面应用。现在应用大致分以下几类:

1.拖放操作

2.自动完成输入

3.即时通信:

4.在线游戏:拖放棋子。

5.在线字典。

1.1.1 Ajax构成要素

1.描述页面的HTML/XHTML

Ajax使用HTML/XHTML描述文档的结构,但仅用于描述Ajax页面的初始样式,即用户第一次访问时看到的样子.在初始化之后,文档结构可能会随着程序的运行而有所变化.同时,HTML/XHTML还会告知浏览器下载将运行于客户端的JavaScript以及定义页面样式的CSS等相关文件.

2.表示文档结构的DOM

DOM即Document Object Model(文件对象模型),是一种用来表示XML结构的层次型数据结构.JavaScript可以访问到浏览器提供的当前页面的DOM对象,并通过对其操作来间接地改变该页面的内容及结构.

3.定义元素样式的CSS

   CSS Cascading Style Sheet(层叠样式表)达式,用来指定HTML文件中元素实现的样式.通过使用CSS可将文档的结构和表现完全分开,这样HTML部分即可专注于定义文档的结构,而控制样式则交给CSS.

4.表示服务器和客户端通信内容的XML或JSON

XML是标准的数据表示方式,无论是服务器端还是客户端都可以很好地对其进行解释.特别是在用来实现服务器端程序的绝大多数编程语言中,均含有极为完善且简单易用的生成和维护XML文件的功能.

JSON JavaScript Object Notation(JavaScript对象标记),在客户端有着非常优良的性能,因为JSON的格式和JavaScript中定义对象的语法完全一致.对于同样的数据,JSON表示方式要比XML表示方式更加短小,减少了网络流量.

5.服务器端处理浏览器请求

对于纯Ajax应用程序,服务端CGI则只需要提供数据即可,所有的表示层逻辑均将在客户端实现.Ajax中并没有定义服务器端CGI的具体实现,也就是说,开发者可以随意选择他所熟悉的方式进行服务器端设计实现..

6.实现与服务器异步通信的XMLHttpRequest对象

XMLHttpRequest对象,早在1998年就已经集成于IE中了.随后,在各种主流的浏览器中也陆续开始得到支持.XMLHttpRequest对象的强大之处在于,它允许开发者在javaScript中以异步的方式向服务器发出HTTP请求并得到响应.

7.协调上述各种技术的JavaScript

JavaScript将上面提到的所有技术粘合在一起.通过JavaScript代码,开发者可以访问并维护当前页面的DOM对象,包括对其进行添加、删除和修改等操作;还可以通过维护某个DOM元素的CSS Class来改变它的外观样式;也可以使用XMLHttpRequest对象访问服务器的CGI程序,并将返回的XML或JSON类型的数据解析后应用到当前的计算或显示中。

1.1.2异步Web编程

一.同步Web交互模型与互步Web交互模型

 

二.Ajax页面的生命周期:

 

 

 

(1)用户对某个网址提出浏览请求。

(2)服务器将HTML页面内容发送给浏览器。

(3)浏览器根据所收到的HTML内容,在内存中创建DOM树状结构。

(4)用户触发异步请求给服务器。此举不会影响既有的DOM树状结构,即用户操作不会被打断。

(5)浏览器将XML格式数据发送给原页面中的JavaScript函数进行处理。

(6)浏览器解析结果,接着更新内存中的DOM树。此时网页部分内容被更新,而非刷新,所以浏览器不会闪烁,而非常平顺地显示页面。

三.Ajax的实现原理

      Ajax的加载和传统Web应用的没有什么区别: 首先,某个用户操作(输入URL地址或点击链接)引发了浏览器一次HTTP请求,然后器处理这个请求,生成合适的HTML、CSS以及JavaScript,并发送至客户端。最后,客户端浏览器将这一段HTML显示出来。随后,用户在该Ajax页面上的后续操作将与传统Web页面完全不同:用户的这些操作将不会引发浏览器的另一次HTTP请求,取而代之的是将引发客户端的某段JavaScript代码的执行。

 

(1)用户在页面上执行了某个操作,如鼠标移动、点击某个区域等。

(2)根据用户的操作,页面发出相应的DHTML事件;

(3)调用注册到该DHTML事件的客户端JavaScript事件处理函数,其中初始化了一个用以向服务器发送异步请求的XMLHttpRequest对象,同时指定了一个回调函数,当服务器的响应返回时,将自动调用该回调函数。

(4)服务器收到XMLhttpRequest对象的请求之后,开始根据请求进行一系列的处理。

(5)处理完毕,服务器返回客户端所需要的数据;

(6)数据到达客户端之后,执行JavaScript回调函数,并根据返回的数据对用户界面进行更新;

(7)用户看对界面的变化。

注意:在整个过程中,用户并没有被阻塞,依然可以浏览当前页面其他部分,甚至还可以再引发事件并触发另一个与服务器的异步交互过程。

1.1.3XMLHttpRequest对象

XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。  AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个<form>元素。AJAX中的"A"代表了"异步",这意味着XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的,但是,你可以选择发送同步请求,这将会暂停其它Web页面的处理,直到该页面接收到服务器的响应为止。

  微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象,但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今,在认识到实现这一类型的价值及安全性特征之后,微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是,尽管其实现(因而也影响到调用方式)细节不同,但是,所有的浏览器实现都具有类似的功能,并且实质上是相同方法。目前,W3C组织正在努力进行XMLHttpRequest对象的标准化,并且已经发行了有关该W3C规范的一个草案。

     在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(如Firefox、Safari和Opera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑,从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例。

 

标准XMLHttpRequest操作

方    法

描    述

abort()

停止当前请求

getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")

返回指定首部的串值

open("method", "url")

建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数

send(content)

向服务器发送请求

setRequestHeader("header", "value")

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

 标准XMLHttpRequest属性

属    性

描    述

onreadystatechange

每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数

readyState

请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成

responseText

服务器的响应,表示为一个串

responseXML

服务器的响应,表示为XML。这个对象可以解析为一个DOM对象

status

服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等)

statusText

HTTP状态码的相应文本(OK或Not Found(未找到)等等)

例1 (1_1_XmlHttpRequest.aspx、Welcome.html)

1.创建html页面:Welcome.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>   </head>

<body>

    Welcome

</body>

</html>

2.添加1_1_XmlHttpRequest.aspx页面:界面如下

 

 

3.代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>无标题页</title>

       <script type ="text/javascript" >

    var xmlHttp=null ;

    window .onload =function ()

    { 

        alert ('系统加载');

        loadXmlHttp();

        sendRequest("Welcome.html");

    }

    function loadXmlHttp()

    {

      alert ('加载XmlHttp对象');

       //创建XMLHttpRequest对象

       if(window .XMLHttpRequest )//ie7,Mozilla,safari,opera

       {          xmlHttp = new XMLHttpRequest();                  }

       else if(window .ActiveXobject)

       { 

         try

       {

          xmlHttp =new  ActionXobject("Microsoft.XMLHTTP");//ie5        

       }

     catch (e){}

       }      

    }

    function sendRequest(url)

    {

        alert ('发送请求');

       if(xmlHttp )

       {

           xmlHttp .open("GET",url,true );

           xmlHttp .onreadystatechange=onCallback;

           xmlHttp .setRequestHeader('Content-type','application/x-www-form-urlencoded');

           xmlHttp .send(null );

       }

}

 

    function onCallback()

    {  alert ('进入查看请求,如果成功,则获取数据');

        if(xmlHttp .readState==4);  //查看请求状态  :4 = 完成

       {

         if(xmlHttp .status==200)  //查看请求结果:   200成功

         {

            alert ('成功请求,请收并显示结果');

            var r=document .getElementById ('results');

            r.innerHTML=xmlHttp .responseText;

        }

         else

         {      alert ('请求还没有成功,继续请求:'+xmlHttp.status);         }

       }

    }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id='results'>

         XMLHttpRequest</div>

    </form>

 </body>

</html>

1.2ASP.NET Ajax架构

   Ajax应用程序将运行于客户端。作为一种Ajax的实现框架,ASP.NET Ajax应用程序也不例外。ASP.NET Ajax客户端组件将运行于浏览器中,提供管理界面元素、调用服务器端方法取得数据等功能。ASP.NET Ajax服务端控件则主要为开发者提供一种他们所熟悉的、与ASP.NET一致的服务器端编程模型。这些服务器控件将在运行时自动生成ASP.NET Ajax客户端组件,并同样发送至客户端浏览器执行。

(1).服务器端架构

ASP.NET Ajax 服务器端控件

ASP.NET Ajax 服务器端控件扩展

ASP.NET Ajax客户端脚本代理

ASP.NET 服务器端控年

ASP.NET身份认证、用户个性化等服务

ASP.NET 页面方法

ASP.NET Web Service

ASP.NET Ajax 服务器端远程Web Service 桥

ASP.NET框架基础

1.ASP.NET Ajax 服务器端控件:用来提供实现ASP.NET Ajax功能的基础设施,或者不依靠于其他ASP.NET控件来提供一些Ajax功能。

2.ASP.NET Ajax 服务器端控件扩展:是为原有ASP.NET服务器控件的扩展,旨在为这些控件提供某些客户端Ajax行为。

3.ASP.NET Ajax 服务器端远程Web Service 桥:由于安全限制,客户端JavaScript不能跨域名访问其他主机上的远程Web Service。ASP.NET Ajax为这种在其他服务器上的Web Service提供了一种自动的代理,即ASP.NET Ajax Web Service Bridge,并为其注册了一个新的文件扩展名.asbx.一个.asbx文件就是一个标准的XML文件,以声明的方式描述了某远程Web Service信息,然后ASP.NET Ajax会自动将其编译成位于本服务器上的代理。

4.ASP.NET Ajax客户端脚本代理:而ASP.NET Ajax框架通过注册一些必要的HTTP Handler  和HTTPModule来对这些服务器端功能进行包装,并自动生成这些服务的客户端JavaScript代理。这样就让客户端JavaScript也可以通过这些脚本代理来直接访问这些服务器的功能。

(2)客户端架构

客户端控件组件(声明式或语言)

客户端控件/组件

(编程式语法)

ASP.NET Ajax脚本引擎

用户界面基础类库

网络访问层

框架基础类库

核心功能实现层

浏览器兼容层

1.浏览器兼容层:JavaScript和DOM的实现,在每个浏览器中都有一些轻微的差异,其中最明显的莫过于不同浏览中对XMLHttpRequest对象的实现了。ASP.NET Ajax的浏览器兼容层是所有其他ASP.NET Ajax功能的基础,旨在抹平各个浏览器之间的差异,提供给其他各层统一的应用编程接口。

2.核心功能实现层:扩展客户端JavaScript的功能,如JavaScript引入类、接口、继承、命名空间、事件处理、数据类型等。这让JavaScript变成了一个完全面向对象的语言,开发者可以充分利用面向对象的各种成熟的设计方法,编写出高质量、可重用的组件和代码。

3.框架基础类库:基于核心功能实现层所提供的面向对象功能,这一层实现了一些非常有用的ASP.NET Ajax框架基础类库。这些对基础功能的封装在本层以上各层中都广泛地使用。

4.网络访问层:将操作XMLHttpRequest对象的复杂性封装起来,并为上层以及开发者提供一个简单明了的应用编程接口。还包括了服务器端发送来的ASP.NET Ajax客户端代理的代码。这样,上层通过调用这些ASP.NET Ajax客户端代码,即可访问到服务器的相应资源,如用户身份认证、用户个性信息、服务器端Web Service。

5.用户界面基础类库:提供ASP.NET Ajax 界面控件的基础设施,包括行为、动作等,还用重要的绑定机制。

6.ASP.NET Ajax XML脚本引擎:ASP.NET Ajax XML脚本是一种基于XML的、新型的编程方式。使用ASP.NET Ajax XML脚本,开发者只需要书写XML的方式定义页面中所需要的控件/组件,并通过用户界面基础类库所提供的绑定机制将各个控件/组件彼些连接起为,就可以用更少的代码编写出功能强大的应用程序。

7.ASP.NET Ajax客户端控件/组件:包含了大量类似ASP.NET服务器端控件一样良好封装、模块化的客户端控件/组件。

1.2.1客户端框架

一.Microsoft Ajax Library

   Microsoft Ajax Library(Microsoft Ajax库).由一组JavaScript文件组成,这些文件可以独立于服务器特性使用。

  组成部分如下:

  (1)组件层:完成核心库的大部分主要工作。提示了JSON串行化、网络通信、本地化、DOM交互和ASP.NET应用服务(如验证与个性化)。还引入了构建可重用模块的概念。

  (2)类型系统:主要目标在JavaScript中引入我们熟悉的面向对象的概念,如类、继承、接口和事件处理。这一层还扩展了现有的JavaScript类型,如string Array等。

  (3)应用层:类似于ASP.NET中的页面生命周期,提供了一个事件驱动编程模型,可用来在浏览器中处理DOM元素、组件和应用程序的生命周期。

 二.HTML、JavaScript、XML Script

     XML Script:一种基于XML的新声明式语法。

三.ASP.NET Ajax服务代码

     可以通过一组由服务器生成的客户端代理调用Web服务。

1.2.2 服务器框架

一.ASP.NET Ajax服务器控件

  主要由两个控件来驱动,一个ScriptManager,一个是UpdatePanel.

  ScriptManager:是Ajax页面的的大脑中枢,很许多职责,主要协调页面上的异步回送期间动态更新各个区域。

UpdatePanel:用于定义页面上指定为部分更新的区域。

二.Web服务桥

   可以创建一个网关,从而允许从客户端脚本调用外部Web服务。

三.应用服务桥

   实现在一个原有的应用中访问某个应用服务(如验证和个性化服务)几乎不费吹灰之力。利用这个特性可以完成很多任务,如验证一个用户的凭证,访问其个性化信息并从客户端脚本出发。

1.2.3客户端中心开发模型

一种主要在客户端实现的开发场景。

 

页面首次加载时,会从服务器向浏览器发布更灵活、更有交互性的应用。

  在此之后,浏览器应用与服务器之间的交互仅限于获取更新这个页面必需的相关数据。这个模型允许用户和浏览器应用之间建立更多的交互,使用用户享受至更丰富、更自然的体验。

 理想的用应模型:mashup:一种使用并集成了来自多个外部源的内容,可以为用户提供一种无疑的交互体验。

1.2.4服务器中心开发模型

一种主要在客户端实现的开发场景。

 

应用逻辑和大多数UI都在服务器上。采用这种模型时,会把UI的渐进改变下传到浏览器应用,而不是客户端脚本所做的改变。采用该模型时,服务器在每次回送时都会显示UI,向浏览器发回一个要显示的新页面。

与ASP。NET传统模型的区别:这只是把需要更新的UI相关部分下传到浏览器应用程序,而不是整个页面。

1.2.5ASP.NET Ajax目标

1.易于使用的高生产力框架

2. 服务器编程模型集成

3.世界级工具和组件

1.3ASP.NET Ajax实战

1.3.1简单的服务器中心解决方案

例2 (1_2_erviceDemo.aspx、HumanResourcess.cs)

1.添加一个类:HumanResourcess

public class HumanResourcess

{   public static int GetEmployeeCount(string department)

    {   int count = 0;

        switch (department)

        {   case "市场部":

                count = 10; break;

            case  "开发部":

                count = 100; break;

            case "财务部": break;

               count = 10; break;

            case "测试部":

                count = 20; break;

        }

        return count;

    }

}

2.添加页面:1_2_ServiceDemo.aspx

 

3.编写代码如下;

protected void lstDep_SelectedIndexChanged(object sender, EventArgs e)

{

   labShow.Text = "员工人数:"+HumanResourcess.GetEmployeeCount (lstDep.SelectedValue.ToString ());

}

4.运行成功,页面在刷新;

5.UpdatePanel控件的应用。

6.在该页面继续设置界面:

 

7.编写代码如下:

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)

{

  labShow2.Text = "员工人数:" + HumanResourcess.GetEmployeeCount(ListBox1.SelectedValue.ToString());

}

8.运行程序,下面的数据不进行刷新,异步调用。

1.3.2UpdateProgress控件

1.继续上一个页面:在UpdatePanel中添加UpdateProgress控件

 

2. 在UpdateProgress控件的ProgressTemplate中添加文写:数据加载中….

3.更改代码如下:

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)

{

   labShow2.Text = "员工人数:" + HumanResourcess.GetEmployeeCount(ListBox1.SelectedValue.ToString());

        System.Threading.Thread.Sleep(1000);

}

1.3.3简单的客户中心示例(HRService.asmx、)

1,添加WebService: HRService.asmx

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class HRService : System.Web.Services.WebService {

    public HRService () {

    }

    [System .Web .Script .Services.ScriptMethod ]

    [WebMethod ]

    public int GetEmployeeCount(string department) {

        return HumanResourcess.GetEmployeeCount(department );

    }   

}

2.添加页面:

 

3.添加选项,并调用Web服务HRService.asmx

<form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        <Services>

          <asp:ServiceReference Path ="~/HRService.asmx" />

        </Services>

        </asp:ScriptManager>

        <select id="Departments" name="D1">

            <option value ="财务部">财务部</option>

            <option value ="市场部">市场部</option>

            <option value ="开发部">开发部</option>

            <option value ="测试部">测试部</option>

        </select><br />

        <div id="employeeResults">

        </div>

        <br />

</form>

4.编写代码如下:注意:脚本写在ScriptManager标记后面。

  <script type ="text/javascript">

    var departments=null ;

     Sys .Application .add_load(page_load );

    Sys .Application .add_unload(page_unload);

     function page_load(sender,e)

    {  departments =$get("Departments");

       $addHandler (departments,"change",departments_onchange);

    }

    function page_unload(sender,e)

    {   $removeHandler (departments,"change",departments_onchange)

    }

    function departments_onchange(sender,e)

    { 

       $get("employeeResults").innerHTML="";    

       var selectedValue=departments.value;

      HRService .GetEmployeeCount (selectedValue ,onSuccess);

     }

    function onSuccess(result)

    {      

       $get("employeeResults").innerHTML="部门人数:  "+result ;

    }

</script>

5.运行程序,关闭服务,理解执行过程。

附加内容:

一. Ajax应用程序的特点.

1.一个页面就是一个应用程序:

对于一个典型的Ajax应用程序,用户无需在不同的页面中切换,只要停留在一个页面中,由XMLHttpRequest对象从服务器取得数据,然后由JavaScript操作页面上的元素并更新其中的内容.

2.基于标准技术构建

XMLHttpRequest对象最早是作为IE内嵌的AciveX组件提供的,然后各种其他的主流浏览器也随之使用.JavaScript原生对象的形式提供了这一组件.W3C正在对XMLHttpRequest的规范进行标准化,XMLHttpRequest成为标准已经指日可待.

3.迅速、平滑、友好的服务器交互过程

使页面不再“闪烁”,借助XMLHttpRequest对象的帮助,只从服务器端取得必要的数据,而不新页面的所有内容。

4充分重视用户体验

Ajax应用程序非常关注目前用户的操作,并及时地给出下一步提示,即使是一个小的动作,客户端都可以将其送至服务器,然后服务器即可充分利用它掌握的大量信息以强大的计算能力迅速向用户给出最恰当的提示。如省市联动。

5.高级UI功能支持

Ajax将许多不同的技术结合在了一起,而它们之间的调解者就是运行浏览中的JavaScript。通过充分的挖掘JavaScript的潜力,将许多原本只有在桌面应用程序才能实现的丰富功能(鼠标拖动、右键菜单、拼写检查)

二.运行Ajax应用程序应注意的问题

1.浏览器兼容性:

Ajax是以客户端浏览器为运行环境的一种技术,由于浏览器对于JavaScript、DOM、CSS的支持程度有些不太相同,或是浏览器本身有错误,甚至同一种浏览器各个版本之后对JavaScript、DOM、CSS的支持也可能有差异。

为了解决此问题,大部分的Ajax函数库或开发架构都会提供一组JavaScript函数库,采用事先定义好的JavaScript API、JavaScript对象即可解决些问题。

2.浏览器关闭JavaScript功能

   用户在浏览器上运行JavaScript 时,无须通过服务器的传输便可独立运行。Ajax需要借用大量客户端的JavaScript,万一用户手动关闭了浏览器JAVASCRIP功能,且页面应用程序没有事件检查JAVASCRIPT是否被关闭,用户可能会在浏览中看见一遍空白。

3.操作习惯

AJAX很可能影响浏览器“后退”按钮的正常行为,在进行动态更新页面时,当用户单击“后退”时,并不会回到前一个页面的状态,而回到前一次所浏览的网站,这是因为浏览器只能记下浏览记录中的静态页面。

解决办法是在用户单击“后退”时,通过一对事先创建的隐藏IFRAME标识来将应用程序状态恢复到原状态。

4.网络访问延迟

在开发Ajax页面应用程序时,需要慎重考虑网络访问延迟,如果没有给予用户明确的信息,没有适当地预先读取并处理数据或对XMLHttprequest与XMLHTTTP的处理不恰当,都会让用户觉得有延迟,这是用户最不想看到结果,而用户也不会想了解发生问题的原因。

5.跨站脚本

跨站脚本(Cross-Site scripting)简称xss,跨站脚本是利用动态页面的特性,页面中的程序错误或是程序开发人员没有限制客户端返回的数据并过滤特殊字符,让黑客将具有攻击性的Javascript、vb script程序代码放置在用户输入数据的字段中,对页面进行攻击。如偷取cookie信息、窃取用户输入的信息,改变页面内容等。

6.竞态条件

   Ajax是以异步方式向服务器提出请求,这和传统页面程序提供请求的方式并无不同之处,但由于Ajax是以异步方式提供请求,如果同时有多个Ajax提出请求,将无法确保哪一个请求会先得到服务器的响应,而引发“竞态条件”问题

7.会话生命周期

     当超过某一特定时间之后,传统页面程序的会话会自动中断,但Ajax的XMLHttpRequest会异步地从WEB服务器接收数据,这可能会造成session的生命周期永不结束,引发安全性隐患。

     要解决SESSION生命周期问题,可编写一个监控Session距离超时还剩余的时间,然后通过Java Script alert函数,显示一个提供信息来让用户知道会话即将超时,借以提醒用户进行继续保有SESSION或让Session结束的操作。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax技术,无刷新技术 导读:ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问Web Service,所有需要支持ASP.NET AJAXASP.NET页面上有且只能有一个ScriptManager控件。在ScriptManager控件中我们可以指定需要的脚本库,或者指定通过JS来调用的Web Service,以及调用AuthenticationService和ProfileService,还有页面错误处理等。 ASP.NET AJAX入门系列(3):使用ScriptManagerProxy控件 导读:在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时,这就需要在Content-page中使用ScriptManagerProxy,而不是ScriptManager,ScriptManager 和 ScriptManagerProxy 是两个非常相似的控件。 ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一) 导读:UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel简单的使用方法(第一篇)。 ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二) 导读:UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加几个UpdatePanel控件和一个ScriptManager控件就可以自动实现局部更新。通过本文来学习一下UpdatePanel其他的一些使用方法(第二篇)。 ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍 导读:在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中,本文简单介绍一些它的基本用法,翻译自官方文档。 ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程 导读:在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,在UpdateProgress控件中,将添加一个Button,来允许用户取消异步更新,并且使用客户端脚本来显示或者隐藏进度信息,翻译自官方文档。 ASP.NET AJAX入门系列(8):自定义异常处理 导读:在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档。 ASP.NET AJAX入门系列(9):在母版页中使用UpdatePanel 导读:本文简单介绍一下在母版页中使用UpdatePanel控件,翻译自官方文档。 ASP.NET AJAX入门系列(10):Timer控件简单使用 导读:本文主要通过一个简单示例,让Web页面在一定的时间间隔内局部刷新,来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用。 ASP.NET AJAX入门系列(11):在多个UpdatePanle中使用Timer控件 导读:本文将使用Timer控件更新两个UpdatePanel控件,Timer控件将放在UpdatePanel控件的外面,并将它配置为UpdatePanel的触发器,翻译自官方文档 作者:TerryLee 出处:http://terrylee.cnblogs.com

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值