AJAX 简介 及 XMLHttpRequest对象的使用方法

AJAX 简介

与JSP和Servlet 比较起来，AJAX 是一种客户端技术，它以浏览器为运行环境，带给客户更加流畅的客户端体验 。

 

准确的说，AJAX 并不是一种新的 或者独立的技术。我们可以把它看成一个工具包。它把多种技术组合成一个整体，共同为用户带来良好的客户端体验。AJAX工具箱由以下几个主要组成部分组成 ：

 

1，  CSS  :  用于控制网页的外观，实现更加丰富，漂亮的视图表现形式 。

 

2，  DOM :  用于控制文档结构，灵活的调整页中各个元素的布局，动态的增加

和删除元素，使页面操作更加灵活。

3，  XMLHttpRequest ：负责完成浏览器和服务器端的异步通信工作，注意，使用这个对象与服务器进行通信和传统的超级链接以及提交表单有本质的区别。对于传统的交互方式( 超链接，表单) 在向服务器发出请求时，浏览器中的页面要全部刷新，在请求发送和应答回来之间，用户不能进行其他的操作，甚至只能看着一个空白的页面等待新内容的出现，这种情况在网络环境不好的时候更加明显。 XMLHttpRequest对象的出现。打破了这种已被大多数互联网用户习惯的交互方式（我想互联网用户并不是真的接收这种传统方式，只是他们没有其他的选择而已，至少我本人是这样的）， XMLHttpRequest 对象的具体使用方法和优点，我们在稍后的内容中讨论。

4，  JavaScript ：对上述三个东东进行控制，这些玩意儿都要被JavaSript语言调用，操作，才能完成自己的本职工作 。

 

我们可以把AJAX的组成用下面的图来表示 ：

 

 

XMLHttpReuqest对象

关于CSS ， DOM 和 JavaScript的使用，请参考其他相关的文档，在这里，我们首先来讨论一下XMLHttpRequest对象，每次见到这个对象，我就会想起 比尔霍夫 (德国国家队继克林斯曼之后的又一架超级轰炸机，无论是在国家队还是在AC米兰，同样战功显赫) ，因为和这名伟大的足球运动员一样，XMLHttpRequest对象也属于大器晚成类型，它早在1999年就伴随着IE5一同出现了，当时作为一种ActiveX控件。（好像就是这一年，比尔霍夫在联赛后半段以抽风般的表现帮助AC米兰成功诈尸，从尤文图斯手中抢走联赛冠军）。而XMLHttpRequest 对象真正被广大程序员接受 却是到了AJAX技术成熟之后。

前面我们曾经提到过，XMLHttpRequest对象具有一种叫做异步通信的特异功能。那么我们首先就来解释一下同步和异步这两个重要的名词。同步的意思是多个任务顺序执行，如果我们的任务流程是A -à B -àＣ，那么Ｂ要想执行，就必须等待Ａ任务完成之后才能开始。也就是老百姓常说的“一根筋”。想象一下，浏览器前的用户点击一个超级链接之后，想要作下一步操作就必须等到服务器这个大爷把新的应答结果返回到浏览器之后才可以，而究竟要等多久，要取决于互联网当时的心情和编写服务器端代码的程序员的变态程度（衷心的请求JavaEE们的谅解，之所以这么说是因为我自己在年少不经事的时候目睹或亲手创造了大量的不堪入目的代码，让我惊奇的是，在这么多年后，这些代码依然在某个企业的机房中野蛮的运行着，我曾为此无数次在梦中惊醒）。我们用一个典型的网上注册用户的过程来解释同步的特点。

 

 

所谓异步通信，就是说 多个任务之间可以并行处理，你不用等我，我也不用等你，A和B两个任务同时执行，当B有结果需要提供给A的时候，A 会放下手头的工作，处理B给他的结果，处理结束之后再接着作刚才没有做完的活，在软件中，我们管这个地方叫做”软中断”，XMLHttpRequest对象和服务器的通信方式就是采用这种方式，也就是说它和服务器之间的通信是一种偷偷摸摸的勾当，电脑前的用户毫不知情，是不是有点像 ……. 但是这对用户来说真的是一件好事，因为用户并不关心服务器是什么，也不会去体谅互联网上的路由器到底有多么辛苦，他们只想让自己的操作 流畅，流畅，再流畅（等等，此刻我想起了那个负责给我排课的禽兽……. 老胡总是想让课程排的流畅，流畅，再流畅， 我只能为此吐血，吐血，再吐血 ….. 从此不吃血豆腐）。这种通讯方式，使得用户在网络通信期间，一样可以浏览它关注的内容。填写他想填的东西,从下面的图中我们可以看到异步给用户带来的感受，（闭上眼睛，想象一下，圣洁的月光洒落你的keyBorad，柔柔的微风拂过你的mouse, 烟灰缸中的升腾者袅袅青烟，你拿起鼠标在Button上轻轻一点，是不是很high…….. 看看吐了几个，各位看官，不要抱怨什么，至少你此刻在上网，而我在写文档。）

 

 

XMLRequest对象的使用方法 ：

 

1）  创建

由于这个对象在各个浏览器上的实现方式不同，所以我们不得不采用多种方式创建它，以兼容各种不同的浏览器，客户端有时比服务器更难伺候。

 

 

 

var xmlHttp ;

function createXMLHttpRequest(){

       if( window.ActiveXObject ){

              xmlHttp = new ActiveXObject( “Microsoft.XMLHTTP” );

       }else( window.XMLHttpRequest ){

              xmlHttp = new XMLHttpRequest();

}else{

       Alert( “create XMLHttpRequest Fail” );

}

}

 

常调用的方法和属性 ：

open( “method” , url ) 建立对服务器的调用，注意，这个方法指示用来准备网络连接使用的                                     socket资源，并没有真正的进行网络连接操作。

  Method : 采用何种方式向服务器提交请求，根据HTTP协议的规定，常用的取值有

Get,POST。

  url : 不用解释了吧，用于指定本次连接的服务器资源，一个Servlet的url-pattern，或者一

个JSP, 或者 ASP，PHP等等，其实对于客户端来说，不在意服务器采用什么技术，

只要他能返回一个应答结果就可以了。就像吃涮羊肉时，只要肉好吃就行，到底是手

切的还是机器弄得没人在意。

 

Send( content ) 向服务器发送请求， 当open时使用get是，参数为null ,如果是post，参数

可以填写请求中携带的参数。格式是参数名和参数值组成的对儿，有多个参

数要提交时，用”&”分开，如name=zhangsan&age=20

 

readyState : 用来描述请求的状态，即本次请求进行到什么程度，到了不同阶段，xmlHttpRequset会自动更新这个属性 0 ， 1， 2， 3， 4

status : 200

 

resonseXML

responseText

onreadystatechange