异步JavaScript和XML（Ajax）干货整理-原创手记-慕课网

什么是Ajax
    AJAX全称为“Asynchronous JavaScript and XML"(异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，AJAX提供与服务器异步通讯的能力，从而使用户从请求/响应的循环中解脱出来。
ajax的优势
    1.通过异步模式，提升了用户体验。
    2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
    3.AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了服务器负载。
ajax的局限性
    1.不能实时请求和响应服务器数据。
    2.不支持浏览器回退功能。
    3.不能提交多媒体数据，比如图片，文件等。
工作流程
    1.客户端产生js的事件
    2.创建XMLHttpRequest对象
    3.对XMLHttpRequest进行配置
    4.通过AJAX引擎发送异步请求
    5.服务器端接收请求并且处理请求，返回html或者xml内容
    6.XML调用一个callback()处理响应回来的内容
    7.页面局部刷新 
实现步骤
    1.声明verify()函数和xmlhttp全局变量
    2.创建XML对象
    3.注册回调对象
            xmlhttp.onreadystatechange = callback;
    4.设置服务器连接信息
           xmlhttp.open("GET","verifyUser.action?name="+encodeURI(username),true);
    5.发送数据
    6.接收响应数据即callback函数
    附源码

输入代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd.xml')">Get CD info</button>
</div>
</body>
</html>

package com.hp.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class VerifyServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request,
            HttpServletResponse resbonse) throws ServletException, IOException {
        doGet(request, resbonse);
    }

    protected void doGet(HttpServletRequest request,
            HttpServletResponse resbonse) throws ServletException, IOException {
        try {
            request.setCharacterEncoding("utf-8");
            resbonse.setContentType("text/html; charset=utf-8");
            PrintWriter out = resbonse.getWriter();
            String old = request.getParameter("name");
            if (old == null  old.length() == 0) {
                out.println("用户名不能为空！");
            } else {
                 String name = old;
                if (name.equals("zhangsan")) {
                    out.println("用户名[" + name + "]已经存在！");
                } else {
                    out.println("用户名[" + name + "]尚未存在，可以使用！");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

}

引用博客
    http://blog.163.com/xiaopengyan_109/blog/static/14983217320108165441831/
    http://blog.sina.com.cn/s/blog_5b6cb9500100z7y8.html