Ajax详解

Ajax，主要特点以及优点是异步加载、局部刷新，不会全部刷新页面，这样能大大减少服务器压力。不多介绍了， 反正百度、淘宝等大公司都在用它。。。
如何使用Ajax呢，很简单，我们先写一个jsp页面，body体内放一个按钮及一个输入框，代码如下：

    <div style="text-align: center;">
        <div>
            <input type="button" value="Ajax获取数据" onclick="loadName()" />&nbsp;&nbsp;
            <input type="text" id="name" name="name" />
        </div>
    </div>

效果如下：  

Ajax请求后台步骤如下：
① 创建XMLHttpRequest对象（有些较老的IE版本不支持，需要判断）

         var xmlHttp;
     if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();//正常的话
     } else {   
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //老版本的IE
     }

②XMLHttpRequest对象请求后台：open(method,url,async)（方式，地址，是否异步）
      get方式请求数据，直接将参数跟在地址后面

  xmlHttp.open("get", "getAjaxName?name=jack&age=11", true);
  xmlHttp.send();

        post方式请求数据，将参数放在send里面

   xmlHttp.open("post", "getAjaxName", true);
  xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlHttp.send("name=jack&age=11");

③ 监听请求过程和结果。
Ajax有readyState 和 status两个属性。
readyState：0请求未初始化，1服务器连接已建立，2请求已接收，3请求处理中，4请求已完成且响应已就绪status：200代表OK，404代表未找到页面。
每次 readyState改变都会回调onreadystatechange()方法，用这个来接收并处理服务器返回的数据：

 xmlHttp.onreadystatechange = function() {
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
       alert(xmlHttp.responseText);
      }
 }

注：xmlHttp.responseText可以获取普通字符串或者json数据，方法如下：

var resStr=xmlHttp.responseText;//普通字符
var resJson=eval("("+xmlHttp.responseText+")");//转成Json
//======解析json=======
resJson.name;//操作json对象，直接通过.name、.age、.score等获取
             //json数组，遍历出一个个json对象后再读取

最后再写个servlet，关键代码如下：

  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  out.println("后台已收到你提交的信息，这是返回给你的信息");
  out.flush();
  out.close();

顺便来张结果图吧，点击按钮后便弹出如下对话框