一个完整的ajax简单案例

之前在网上找ajax的一些例子感觉说的都很凌乱或者很散，所以在这里写一个比较完整的例子，一是自己总结，二是可以帮到别人。

大致说明一下这个例子，是一个简单的注册案例，当用户名文本框失去焦点的时候，会向后台发送一个ajax请求（前台做了用户名非空的校验），如果用户名是3127，会提示你当前用户名已被占用，如果不为3127，提示你当前用户名可以使用。

前端代码

<%--
  Created by IntelliJ IDEA.
  User: 3127
  Date: 2017/4/23
  Time: 14:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    <%
        String path=request.getContextPath();
    %>
    
    
    



    username:
    password:

后台是一个servlet

package demoservlet;

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by 3127 on 2017/4/23.
 */
public class Demo2 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setCharacterEncoding("utf-8");

        String username=req.getParameter("username");
        String availiable="0";
        String info="该用户名可以使用！";
        Map map=new HashMap();


        if(username!=null&&!username.equals("")){
            if(username.equals("3127")){
                availiable="1";
                info="对不起，该用户名已被使用！";
            }
        }

        map.put("availiable",availiable);
        map.put("info",info);

        PrintWriter writer = resp.getWriter();
        writer.print(JSON.toJSON(map));
        writer.flush();
        writer.close();
    }
}

web.xml配置

        demo2
        demoservlet.Demo2
    
    
    
        demo2
        /demo2