Java程序员从笨鸟到菜鸟之（八十四）深入浅出Ajax

 Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML 。所谓同步，就是在进行一个操作之前必须要等到上一个操作返回操作结果才能进行这个操作，而异步则是在进行一个操作时可以不受上一个操作的影响，上一个操作是否返回操作都可以执行这个操作，各个操作可以同时进行，对用户来说，不用等待了，不用等待上一个操作就可以执行新的操作了。给用户的体验增强了。异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。 其实ajax并不是什么新技术，而是一些技术的组装。Ajax给我们的网络带来了很大的好处，假如我们只是简单的提交一个表单，我们就没必要刷新整个页面，只需要局部表单提交，刷新局部就可以了，这将大大减少了网络流量。有优点的同时他也有缺点，缺点就是我们浏览器上的后退和前进按钮就失效了。假如我们页面有三个异步ajax操作，浏览器并不把他当作三个请求操作，后退的时候也不会后退三次回到原始页面

      Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。 

Ajax中最重要的一个对象就是XMLHttpRequest，这个对象最早是由微软在IE中以插件的形式提供的，但微软只是简单的提出这么一个对象，并没有真正的去实用它，后来其他浏览器也给出了这个对象，但他们都是提供的内置对象，而不是简单的插件的形式了。所以在获得这个对象的时候就避免不了要用if。。Else判断了、判断是否为IE浏览器，我们使用判断一个对象是否存在来判断，这个对象是IE所特有的，他就是active控件的对象。通过window.ActiveXObject，在if语句中写这么语句，因为在javascript中，如果不是undefined或者false他就是为true，所以，只要这个active空间存在，if条件就为真。也就是说就是IE浏览器。IE获得XMLHttpRequest对象是一个固定形式：xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");这是IE特有的获得XMLHttpRequest对象的方式，其他浏览要想获得XMLHttpRequest对象直接new就可以，也就是xmlHttpRequest =new XMLHttpRequest（）；虽然IE和其他浏览器获得XMLHttpRequest对象的方式是不同的，但是XMLHttpRequest的使用方式是一样的。

     好了，判断完浏览器之后，我们就开始准备向服务器发送请求了，准备发送请求我们用：xmlHttpRequest.open("POST", "AjaxServlet", true);这里的三个参数我们有必要说一下，第一个参数是表示我们的请求是以什么形式发送，第二个参数是我们请求的地址，这里我们的地址是一个servlet，第三个参数指明是否为以异步的形式发送请求，一般我们都会设置为true。

      准备好发送以后，我们要给他接收做一下准，ajax接收数据是以一个回调函数的形式接收数据的。也就是说我们注册好这个回调函数后，当达到某一要求时他会自动调用这个回调函数，然后去执行回调函数的内容，注册回调函数：xmlHttpRequest.onreadystatechange = ajaxCallback;注意这个回调函数ajaxCallback不要带括号。这个回调函数注册点我们从字面上也可以看出,他是在准备状态改变的时候调用这个函数。

       一切准备好之后我们就要进行真正的发送请求了，发送请求是调用的xmlHttpRequest对象的send方法，这个方法里面当以post的形式发送请求，这里的方法的参数，就是我们请求的地址的参数，这个地址的参数是以键值对的形式传参的，如果是以get的形式请求时，我们可以把send方法的参数设置为null。，假如我们是以get的请求方式，发送代码即为了：xmlHttpRequest.send(null);，我们在来说说以post的请求方式请求时。xmlHttpRequest.send(null)，null可以传参数（即send（“v1="+v1））；并且在真正发送之前（xmlHttpRequest.send(null)）之前必须设置

xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");这一点一定要注意。

       OK，请求发送出去了之后，我们下面来看一下我们怎么来接受请求返回的数据。根据HTTP协议我们应该知道，我们的一个请求应该分为四个步骤，也就是说一个请求有四个状态，他的状态即为xmlHttpRequest对象的readstate属性。我们来看一下这五个状态的具体内容：

从上边可以看出我们上边注册的回调函数将会被执行四次，但是我们其实就只在请求完成时执行我们回调函数的内容就OK，所以在回调函数里面我们可以进行一下判断

if (xmlHttpRequest.readyState == 4) { //请求完成}。

虽然我们判断了请求是否完成，但我们不知道这个请求是否成功，在我们http协议中，请求成功的状态码是200，所以我们如下判断一下状态码是否为200就可以了。

if (xmlHttpRequest.status == 200) {}

OK，以上差不多我们就把ajax的执行过程讲解了一遍，在看具体代码之前，我们来看一下xmlHttpRequest这个对象的属性：

下面我们就来看一下ajax整个执行流程的代码示例：我们以一个计算器的例子来实现：

首先我们来看一下表单代码：

[html] view plain copy

 print?

1. <input type="button" value="add"  
2. onclick=  
3. ajaxSubmit();;  
4. >  
5. <br>  
6. <input type="text" name="value1" id="value1ID">  
7. <br>  
8. <input type="text" name="value2" id="value2ID">  
9. <br>  
10. <div id="div1"></div>  

然后我们来看一下执行的ajax的javascript代码：

[javascript] view plain copy

 print?

1. <script type="text/javascript">  
2. var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象  
3. function ajaxSubmit() {  
4. if (window.ActiveXObject) // IE浏览器  
5.    {  
6. xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");  
7.     } else if (window.XMLHttpRequest) //除IE外的其他浏览器实现  
8. {  
9. xmlHttpRequest = new XMLHttpRequest();  
10. }  
11. if (null != xmlHttpRequest) {  
12.     var v1 = document.getElementById("value1ID").value;  
13. var v2 = document.getElementById("value2ID").value;  
14.     //当利用get方法访问服务器端时带参数的话，直接在"AjaxServlet"后面加参数，                   下面send方法为参数null就可以，用post方法这必须在把参数加在send参数内，如下  
15. xmlHttpRequest.open("POST", "AjaxServlet", true);  
16. //关联好ajax的回调函数  
17. xmlHttpRequest.onreadystatechange = ajaxCallback;  
18. //真正向服务器端发送数据  
19. // 使用post方式提交，必须要加上如下一行,get方法就不必加此句  
20. xmlHttpRequest.setRequestHeader("Content-Type",  
21. "application/x-www-form-urlencoded");  
22. xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);  
23. }  
24. }  
25. function ajaxCallback() { //ajax一次请求会改变四次状态，所以我们在第四次(即一次请求结束)进行处理就OK,  
26. if (xmlHttpRequest.readyState == 4) { //请求成功  
27. if (xmlHttpRequest.status == 200) {  
28. var responseText = xmlHttpRequest.responseText;  
29. document.getElementById("div1").innerHTML=responseText;  
30. }  
31. }  
32. }  
33. </script>  

最后我们来看一下服务器端的执行：

Dopost方法内

[java] view plain copy

 print?

1. String v1 = req.getParameter("v1");  
2. String v2 = req.getParameter("v2");  
3. System.out.println("v1=" + v1 + ", v2=" + v2);  
4. String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));  
5. PrintWriter out = resp.getWriter();  
6. resp.setHeader("pragma", "no-cache");  
7. resp.setHeader("cache-control", "no-cache");  
8. out.println(v3);  
9. out.flush();  

下面我们来总结一下ajax的优势：

1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；

2、无刷新更新页面，减少用户实际和心理等待时间；

3、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；

4、Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）；

from: http://blog.csdn.net/csh624366188/article/details/7670500