ajax讲解和入门实例

前言：

ajax技术已经火了一段时间了，但是真正用上ajax的网站却不多，而运用ajax技术的网站以google为代表，如Google推出Gmail,广泛应用局部刷新技术,采用的就是Ajax技术。

大家知道严格来说程序分为桌面应用程序和Web应用程序，桌面应用程序提供的用户界面丰富，好看页面没有刷新等。而web应用程序访问服务器时需要刷新页面，等待请求然后再重新生成页面呈现给用户。

不知大家感觉如何，我在做B/S软件时对于这种刷新页面的感觉很不舒服。

好了，我们下边来对ajax技术分析和给出一个实例。

1．什么是ajax

Ajax：Asynchronous JavaScript And XML（异步 JavaScript 和 XML）的缩写。

据我所知和同行的反应，ajax并不是一项新技术（就如大家所说有点像用新瓶装旧酒的感觉，哈哈…）

而是很多技术的集合（好像一个框架，内部集成了几种技术啊，哈哈…）。Ajax 使用通信技术（通常为 SOAP 和 XML）发送和接收对服务器的异步请求/响应，然后利用显示技术（JavaScript、DOM、HTML 和 CSS）处理响应。

ajax使您能够通过 JavaScript 调用执行服务器端方法，而不需要刷新浏览器。

好了，让我们通过一个采用ajax技术的小程序来学习ajax并深深地爱上她吧。

2． 实例

2.1 从ajax.net网站上下载ajax.dll文件(本人用的是VS.net 2005,下载的是AjaxPro.2.dll)

2.2 在项目中引用AjaxPro.2.dll

2.3 修改web.config文件，加入：

<system.web> <httpHandlers> <!-- Register the ajax handler --> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/> </httpHandlers> </system.web>

2.4为了使服务器端函数在 JavaScript 中可用，必须做两件事情。首先，要使用的函数必须标有 Ajax.AjaxMethodAttribute。其次，在页加载事件期间，必须通过调用 Ajax.Utility.RegisterTypeForAjax 来注册包含这些函数的类：

protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default)); //注册 } [AjaxPro.AjaxMethod] public int MySum(int a, int b) { return a + b; }

2.5 客户端javascript:

<form id="form1" runat="server"> <div> <input id="txtA" type="text" οnchange=" Jsum ()"/> + <input id="txtB" type="text" οnchange=" Jsum ()"/> = <input id="result" type="text" /> </div> </form> <script type="text/javascript"> function Jsum() { var a=document.getElementById('txtA').value; var b=document.getElementById('txtB').value; var a1 = parseInt(a); var b1 = parseInt(b); _Default. MySum (a1,b1,getSum_callback); } function getSum_callback(rel) { document.getElementById("result").value=rel.value; } </script>

----------------------------------------------------------------------------------------------------------------

好了，到此这个利用ajax技术的小程序就OK了。

当然利用ajax技术还可以处理复杂的数据转换，传输等。只要你读了这篇文章能够深深地爱上ajax就是我的目的。相信你会研究它的，哈哈...

本人正在研究ajax，希望有心学习和研究ajax技术的同行能够一块探讨更新更深的东西，我的QQ:66765550