AJAX学习笔记--从零开始

最近在上网时发现，几乎每个网站都应用了AJAX,比如顶一下,博一下之类的这种, 看起来很玄,就好像在客户端上做的,但实际上还是有返回数据的.
是不是说AJAX的开始代表着WEB3.0离我们不远了？看了许多文章，发现已经有许多利用AJAX开发的WEBOS 比如
国内比较代表性的WEBOS。http://www.webtomos.com 很玄的东西啊！！让我对之前GOOGLE说的WEBOS产生了极大的兴趣

关于使用Ajax。有很多种框架选择，但是对于使用.net的人来说，我觉得还是使用MS官方的是正道。 目前来说，属于官方的也就是属于:ASP.NET AJAX 1.0 (一个字母都不能差噢,区别于MagicAjax,AjaxPro,尤其区别于Ajax.net) 它的前身是Atlas。而ASP.NET AJAX 1.0是MS推出的正式版本，如果使用是.net3.5+VS2008那么就会已经将Ajax集成到环境里。如果使用的是.net2.0+VS2005那么也可以单独下载，下载地址如下： http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en 微软asp.net Ajax的Webcast教程 http://www.microsoft.com/china/msdn/events/webcasts/shared/webcast/consyscourse/ASP_Ajax.aspx MSDN Webcast“深入浅出ASP.NET AJAX系列” http://www.cnblogs.com/JeffreyZhao/archive/2007/03/12/asp_net_ajax_msdn_webcast_feedback.html 更多使用教程可以参考微软官方网站:http://www.asp.net里面有Ajax专栏。

先从原理入手吧。简单的来说, AJAX就算是 JavaScript + XML的实现，实际上Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成。

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。

JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。

文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

由于我之前没学过JavaScript，所以接下来的学习有点吃力。

在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是 PHP 或 Java，也可能是 CGI 进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。
1、XMLHttpRequest 对象
Ajax 基本上就是把 JavaScript 技术和XMLHttpRequest对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说和用户不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。
例：创建新的XMLHttpRequest对象
<script language="javascript" type="text/javascript">var xmlHttp = new XMLHttpRequest();</script>
用 JavaScript 代码捕获和设置字段值
var phone = document.getElementById("phone").value;

document.getElementById("order").value = reponse[0];
document.getElementById("address").value = response[1];

DOM，即文档对象模型。很少使用它，即使 JavaScript 程序员也不大用到它，除非要完成某项高端编程任务。大量使用 DOM 的是复杂的 Java 和 C/C++ 程序，这可能就是 DOM 被认为难以学习的原因。
幸运的是，在 JavaScript 技术中使用 DOM 很容易，也非常直观。现在，按照常规也许应该说明如何使用 DOM，或者至少要给出一些示例代码，但这样做也可能误导您。即使不理会 DOM，仍然能深入地探讨 Ajax，这也是我准备采用的方法。以后的文章将再次讨论 DOM，现在只要知道可能需要 DOM 就可以了。当需要在 JavaScript 代码和服务器之间传递 XML 和改变 HTML 表单的时候，我们再深入研究 DOM。没有它也能做一些有趣的工作，因此现在就把 DOM 放到一边吧。
2、获取 Request 对象
不同的浏览器，XMLHttpRequest的写法也不一样，而XMLHttpRequest是 Ajax 的核心
2．1Microsoft 浏览器
Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML（可以通过 参考资料 进一步了解 MSXML）。因此如果编写的 Ajax 应用程序要和 Internet Explorer 打交道，那么必须用一种特殊的方式创建对象。
但并不是这么简单。根据 Internet Explorer 中安装的 JavaScript 技术版本不同，MSXML 实际上有两种不同的版本，因此必须对这两种情况分别编写代码

var xmlHttp = new XMLHttpRequest(); var xmlHttp = false; try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch(e){ try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } }

2.2 Mozilla 和非 Microsoft 浏览器
如果选择的浏览器不是 Internet Explorer，或者为非 Microsoft 浏览器编写代码，就需要使用不同的代码。
事实上就是 var xmlHttp = new XMLHttpRequest object;。
这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了XMLHttpRequest对象。
2.3 结合
以支持多种浏览器的方式创建 XMLHttpRequest 对象

try{ if( window.ActiveXObject ){ for( var i = 5; i; i-- ){ try{ if( i == 2 ){ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }else{ xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); } xmlhttp_request.setRequestHeader("Content-Type","text/xml"); xmlhttp_request.setRequestHeader("Content-Type","gb2312"); break;} catch(e){ xmlhttp_request = false; } } }else if( window.XMLHttpRequest ){ xmlhttp_request = new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) { xmlhttp_request.overrideMimeType('text/xml'); } } }catch(e){ xmlhttp_request = false; }