Ajax技术介绍

一、传统Web应用存在的问题：     简单操作也会导致页面的全部刷新，致使客户端产生空白页面的等待时间，而且会在客户端与服务器端传输整个页面的数据，导致性能低下。     客户端体验不如C/S丰富 二、Ajax的使命：     与服务器只作必要的数据交换     实现页面的部分刷新 三、什么是Ajax：     Ajax的全称是Asynchronous JavaScript and XML（异步JavaScript和XML），它不是一种技术，而是以下几种技术的组合。        HTML和CSS        DOM        JavaScript        XML和XSLT        XmlHttpRequest对象     Ajax最大的特点是实现了客户端与服务器端之间异步的数据交换。     这种异步的数据交换，其实在几年前就已经出现过了，只是当时还没有形成大的环境。 四、同步与异步：     异步使Ajax给用户一种全新的感觉，那什么时异步呢？要研究异步得先明白什么是同步。     同步处理：由前后紧接的组件和函数调用组成，一个同步处理会阻塞整个进程，直接这个处理完成。             异步处理：不会阻塞启动操作的线程，调用程序必须通过轮流检测、中断信号或明确完成信号来发现调用的完成。             Ajax采用异步处理，当服务器在处理请求的过程中，客户端依然可以进行它自己的操作，不用等待服务器处理完成。 五、Ajax的工作方式：     Ajax引擎介于用户界面与服务器之间，客户端用户界面不直接与服务器交涉，而是交由Ajax引擎与服务器交互，客户端此时继续处理自己的事情。                  六、XMLHttpRequest对象     Ajax里的7个对象并不一定全都用到，但有一个对象是必须会用到的－－XMLHttpRequest对象。XMLHttpRequest对象使客户机和服务器之间只做数据层面的交换，不用刷新整个页面。这样既减轻了服务器负担又加快了响应速度。     最早应用XMLHttpRequest对象的是微软IE5，在IE5里通过XMLHttpActiveX组件的方式引入的，在后来的Mozilla和Netscape浏览器中，都有自己的XMLHttpRequest类。         主调函数：         每次主动向服务器发送请求的客户端函数。     回调函数：         负责接受服务器的返结果，并用JavaScript代码将结果更新到页面上。     属性：        onreadystatechange：状态改变触发器。用来在主调函数中为XMLHttpRequest指定回调函数。           readyState: XMLHttpRequest对象的状态。0-未实始化，4-初始化完成。        status:服务器返回的状态码。        responseText:服务器的响应。字符串        responseXML:服务器的响应。XML     方法：        abort():停止当前请求。        open("method","url","bool"):建立与服务器的调用，但并未调用。             method:"Post/Get";             url:要调用的页面URL             bool:是否是异步调用。true异步，false同步        send():向服务器发送请求。 七、示例：无刷新显示服务器的时间         服务器端代码：        <!--default.aspx.cs-->         protected void Page_Load(object sender, EventArgs e)         {             Response.Write(DateTime.Now.ToString());         }        客户端代码：        <script language=javascript>         window.setInterval(docall,1000);         var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");         //主调函数         function docall()         {             xmlhttp.open("POST","default2.aspx","true");             xmlhttp.onreadystatechange=callback;             xmlhttp.send(null);         }         //回调函数         function callback(res)         {             if(xmlhttp.readyState == 4 && xmlhttp.status ==200)             {                 var d = document.getElementById("dd");                 d.innerHTML = xmlhttp.responseText;             }         }         </script> 总结：这篇文章讲的是Ajax异步调用的基本原理，在实现异步调用的同时也带来了如下的问题：     a.对用户的JavaScript要求较高     b.开发效率低下     c.带来大量难以维护的客户端的JavaScript代码     d.程序代码的安全性、健壮性不乐观。     针对以上的问题，我们很少采用这种Ajax原始的开发方式。而是采用现有的框架进行Ajax开发，而这里最成功的框架就是微软的Ajax.Net。在微软的ASP.Net Ajax中为我们提供了一个优秀的Ajax开发平台。在这里我们摆脱了JavaScript的羁绊，也不需要为程序的健壮性与可移植性而担心，使我们得以拿出更多的精力来对软件的结构合理性与易用性进行设计。 在这Ajax的开发过程中我们只需要熟练掌握框架中的几个类，就可以实现以不变应万变的效果。 当我们创建一个Ajax.Net网站后，工具箱会出现下面的控件。 ScriptManager控件：用于统筹管理所有的ASP.Net Ajax组件，跟踪页面所有的局部更新区域。它是ASP.Net Ajax异步页面的核心组件。一个ASP.Net Ajax页面必须包含且只能包含一个ScriptManager控件。 UpdatePanel控件：指定异步更新的范围，Web窗体控件只要放到UpdatePanel控件里面就会产生异步的效果，不用编写任JS代码。 UpdateProgress控件：对于比较耗时的异步操作，用UpdateProgress控件添加动画或提示信息，这样就不会让用户干等了。 Timer控件：定时器控件，可以每一定时间执行操作，如定时刷新页面部分区域。