Ajax基础
Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML 。
异步是指在进行一个操作时可以不受上一个操作的影响，上一个操作是否返回操作都可以执行这个操作，各个操作可以同时进行，对用户来说，不用等待上一个操作结束就可以执行新的操作了。
Ajax给我们的网络带来了很大的好处，假如我们只是简单的提交一个表单，我们就没必要刷新整个页面，只需要局部表单提交，刷新局部就可以了，这大大减少了网络流量。缺点就是使用了Ajax后我们浏览器上的后退和前进按钮就失效了。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax中最重要的一个对象就是XMLHttpRequest，要完整实现一个AJAX异步调用,通常需要以下几个步骤:
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
详细步骤如下：
（1）首先进行浏览器的判断，通过 window.ActiveXObject 判断是否为IE浏览器（这个对象是IE所特有的，即active控件的对象），如果是，则使用IE特有的方法创建XMLHttpRequest对象 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")，如果为其他浏览器则直接new XMLHttpRequest()创建。
（2）判断完浏览器之后，准备向服务器发送请求，使用：xmlHttpRequest.open("POST", "IndexServlet", true);第一个参数是表示请求方式（如GET 或 POST），第二个参数是我们请求的地址，这里我们的地址是一个servlet，如果请求方式是"GET",则在IndexServlet后直接传参，第三个参数指明是否为以异步的形式发送请求，一般我们都会设置为true。
（3）准备好发送以后，接收数据，ajax接收数据是以一个回调函数的形式接收数据的。也就是说我们注册好这个回调函数后，当达到某一要求时他会自动调用这个回调函数，然后去执行回调函数的内容，注册回调函数：xmlHttpRequest.onreadystatechange = ajaxCallback;注意这个回调函数ajaxCallback不要带括号。这个回调函数注册点我们从字面上也可以看出,他是在准备状态改变的时候调用这个函数。
（4）接下来发送请求，发送请求是调用的xmlHttpRequest对象的send方法，这个方法里面当以post的形式发送请求，这里的方法的参数，就是我们请求的地址的参数，如果是以get的形式请求时，我们可以把send方法的参数设置为null。假如我们是以get的请求方式，发送代码即为了：xmlHttpRequest.send(null);，以post方式可以传参数（即send（“v1="+v1））；并且在发送之前（xmlHttpRequest.send(null)）之前必须设置xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");（说明一下：setRequestHeader方法是XMLHTTP为添加或修改HTTP头提供的一个接口方法，CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示。）。
（5）请求发送出去后，怎么来接收请求返回的数据。根据xmlHttpRequest对象的readstate属性。readyState的五种状态如下：
0 － （未初始化）还没有调用send()方法 1 － （载入）已调用send()方法，正在发送请求 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 3 － （交互）正在解析响应内容 4 － （完成）响应内容解析完成，可以在客户端调用了
从上边可以看出我们上边注册的回调函数将会被执行四次，我们只需要在请求完成时执行我们回调函数的内容就可以了，所以在回调函数里面我们可以进行一下判断
if (xmlHttpRequest.readyState == 4) { //请求完成}。
虽然我们判断了请求是否完成，但我们不知道这个请求是否成功，在我们http协议中，请求成功的状态码是200，所以我们如下判断一下状态码是否为200就可以了。
if (xmlHttpRequest.status == 200) {}
下面为一个简单的加法计算器的例子：
html代码：
<body> <input type="text" name="num1" id="n1"/><br/> <input type="text" name="num2" id="n2"/><br/> <input type="button" value="add" onclick="ajaxSub()"/><br/> <div id="div1"></div> </body>
JavaScript代码：
<script type="text/javascript"> var xmlHttpRequest=null; function ajaxSub(){ if(window.ActiveXObject){ xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xmlHttpRequest=new XMLHttpRequest(); } if(xmlHttpRequest!=null){ var v1=document.getElementById("n1").value; var v2=document.getElementById("n2").value; xmlHttpRequest.open("GET","AjaxServlet2?v1="+v1+"&v2="+v2+"",true); xmlHttpRequest.onreadystatechange=ajaxCallback; // xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");使用post方式提交需要设置，get方式不需要 xmlHttpRequest.send(null); } function ajaxCallback(){ if(xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status==200){ var text=xmlHttpRequest.responseText; document.getElementById("div1").innerHTML=text.fontcolor("red"); } } } } </script>
servlet代码：
public class IndexServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String v1=request.getParameter("v1"); String v2=request.getParameter("v2"); System.out.println("v1="+v1+",,"+"v2="+v2); String v3=String.valueOf(Integer.valueOf(v1)+Integer.valueOf(v2));//将输入的两个数的总和转为字符串 PrintWriter out=response.getWriter(); response.setHeader("pragma", "no-cache");//设置响应头，no-cache指示客户端不能缓存响应消息 response.setHeader("cache-control", "no-cache");//设置响应头，no-cache指示客户端不能缓存响应消息，跟上一行代码作用一样，一般合用 out.println(v3); out.flush(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
结果如下：
最后总结Ajax的优势：
1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；
2、无刷新更新页面，减少用户等待时间和流量使用；
3、Ajax使WEB中的界面与应用分离。
