谈Ajax技术

Ajax即Asynchronous JavaScript and XML指“异步的JavaScript 和XML”是如今web领域非常流行的一个词汇，实际上Ajax并非是一种新技术，它其实只是对创建动态web应用程序所必备技术的一个统称，由JavaScript与CSS，XML，DOM几种老技术加上XMLHttpRequests构成。
原理图如下：

技术价值

每一个技术的出现都是为了技术性能的提升或者解决可能发生或者已经发生的问题。Ajax技术一种用于快速创建动态网页的技术，通过后台与服务器进行少量的数据交换，Ajax可以实现网页异步更新，这就意味可以在不加载整个页面的情况下，实现对网页某个部分的更新，解决的就是传统网页若要更新就必须重载整个页面的问题。因此,Ajax技术的提出极大的推动了web2.0的发展。

Ajax所包含的技术

由上所述，我们已经知道Ajax技术并非是一种新技术，而是几种老技术的结合，主要有以下几种：
1.使用CSS和XHTML表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest实现和服务器进行异步通信。
4.使用Javascript来绑定和调用。
我们可以发现，Ajax技术的重点就是XMLHttpRequest，因为我们技术实现的重点就是异步。所以我们的要点就是创建XMLHttpRequest对象。不同的浏览器创建XMLHttpRequest对象的方法是有差异的。IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

Ajax原理分析

在使用了Ajax技术后，一切都发生改变了，客户端可以只向浏览器传输更新过的内容，借助于客户端的javascript来处理服务器的响应。比如，用户在单击表单按钮时，会使用javascript和DHTML(DHTML是Dynamic HTML的简称，就是动态的html(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成)立即更新页面,并向服务器发出异步请求，以执行更新或查询查询库。当请求返回时，就可以使用javascript和CSS立即更新页面，使整个应用过程很流畅，自然，因为客户端和服务器交换有用的数据，页面显示等不必要的数据不必再从新加载。
下面是传统web应用和Ajax技术的对比

再看看他们的交互

浏览器的普通交互方式

Ajax交互方式

技术应用

在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
交互简图如下：

登陆注册模块也经常用到Ajax技术。用户填完注册用户名后，系统会实时验证该用户是否已经被注册，整个操作在后台进行并不影响用户的使用，而以往形式大多填好所有注册信息准备提交时，才发现用户名已经被注册，而不得不为重新填写表格而无奈。

简而言之，使用AJAX技术我们实现网页部分的实时更新，而不需要总是更新整个页面。造成带宽浪费。

XMLHttpRequest对象

Ajax技术的实现主要依赖于XMLHttpRequest对象，该对象也是Ajax的核心。建立XMLhttpRquest对象的方法如下：

try{ httpRequest = new ActiveXObject(“Msxml12.XMLHTTP”);}catch(e){try{httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);}catch(e){httpRequest=new false;}}

上述代码创建了一个ActiveXObject对象，传入的参数是ActiveX对象的progID，这里是Msxml2.XMLHTTP.ActiveXObject方法调用所使用的对象可能会不同，可以尝试解析每个版本的XMLHttp对象，但大多数Ajax库和应用都只关注两个版本：旧版的Microsoft.XMLHttp和新的MSXML2.XMLHttp。
XMLHttpRequest是一个很简单的对象，它仅有几个方法和属性。

常用属性

1. onreadystatechange 属性
   onreadystatechange 属性存有处理服务器响应的函数。
   下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

1.xmlHttp.onreadystatechange=function()  2.{  3.// 我们需要在这里写一些代码  4.}  

2.readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
状态 描述
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

1.xmlHttp.onreadystatechange=function()  2.{  3.if(xmlHttp.readyState==4)  4.{  5.// 从服务器的response获得数据  6.}  7.}  

3.responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于

responseText：1.xmlHttp.onreadystatechange=function()  2.{  3.if(xmlHttp.readyState==4)  4.{  5.document.myForm.time.value=xmlHttp.responseText;  6.}  7.}  

其它属性：

常用方法

1.open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true); 

2.send() 方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);  

其它方法：

对于Ajax编程具体步骤，这里暂且先不讨论，我们知道XMLHttpRequest是实现和服务器进行异步通信的作用，而异步自然是和同步对比而来，即网页不再需要总是同步更新，而实现了可以部分更新的功能，方便了我们的操作，节省了带宽，当然也减轻了服务器的压力。
今天是周六，闲暇之际，写下这篇博客，如有不妥的地方，请大家联系我！祝大家周六愉快！