AJAX初步

1.什么是AJAX

　　客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术，即，AJAX是一个【局部刷新】的【异步】通讯技术；

　　AJAX不是全新的语言，是2005年Google公司推出的一种全新【编程模式】，不是新的编程语言。

2.AJAX开发步骤

步一：创建AJAX异步对象，例如：createAJAX()

步二：准备发送异步请求，例如：ajax.open(method,url)

步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()，如果是GET请求的话，无需设置设置AJAX请求头

步四：真正发送请求体中的数据到服务器，例如：ajax.send()

步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

3.XMLHttpRequest(AJAX)对象常用事件，方法和属性

事件：

ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，是由服务器程序触发，不是程序员触发

属性：

　　ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法

　　ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法

ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端

　   ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。

ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信息，但接收到的数据不一定都正确

　　上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同

ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常

ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据

　　ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据

方法：

ajax.open(method,url,可选的boolean值)

　　　　AJAX异步对象准备发送异步请求

　　参数一：以什么方式发送，常用的用GET或POST，大小写不敏感

　　参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收，

　　参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端

如果设置为false，表示AJAX对象以【同步】的方式提交到服务端

ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")

表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效

ajax.send(content)

AJAX异步对象真正发送异步请求

参数一：表示HTTP【请求体】中的内容

如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL

如果是POST方式：content != null，例如：username=jack&password=123&role=admin

4.AJAX适合用在什么地方

AJAX【适合】不用来传递大量数据，而只用来【传递少量数据】，在用户的【体验】上，【更加人性化】。

AJAX是一个和服务器无关的技术，即服务器可使用：JavaEE，.NET，PHP……这些技术都可。

AJAX只管向服务器发送请求，同时只管接收服务器的HTML或XML或JSON载体响应。

服务端不能使用转发或重定向到web页面，因为这样会起浏览器全面刷新，即只能以流的方式响应给浏览器。

5.验证用户名是否存在

function createAJAX(){
    var ajax=null;
    try{
        ajax = new ActiveXObject("microsoft.xmlhttp");
    }
    catch (e){
        ajax = new XMLHttpRequest();
    }
    return ajax;
}

function checkEmpUsePost(emp){
    var empName = emp.value;
    var ajax = createAJAX();
    var method = "POST";
    var url = "${pageContext.request.contextPath}/emp_checkEmp?time="+new Date().getTime();
    ajax.open(method,url);
    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
    var content = "empName="+empName;

    ajax.send(content);
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4)
        {
            if(ajax.status == 200)
            {
                var str = ajax.responseText;
                var span = document.getElementById("resID");
                var img = document.createElement("img");
            //    设置src属性值
                img.src = str;
                img.style.width="12px";
                img.style.height="12px";
                //清空span标签的内容
                span.innerHTML="";
                span.appendChild(img);
            }
        }
    }
}

Action中的方法：（Action中要有相应属性的参数set和get方法）

    public String checkEmp() throws IOException {
        Object empName = request.get("empName");
        List<Employee> emps = employeeService.getAll((String) empName);
        HttpServletResponse response = ServletActionContext.getResponse();
        PrintWriter writer = response.getWriter();
        if(emps != null && emps.size()>0)
        {
            writer.write("images/MsgSent.gif");
        }
        else {
            writer.write("images/MsgError.gif");
        }
        writer.flush();
        writer.close();
        return null;
    }

6.二级联动下拉框（xml方式）

function getCity(proEle){
    var index = proEle.selectedIndex;
    var province = proEle[index].innerHTML;
    if("选择省份" != province)
    {
        var ajax = createAJAX();
        var method = "POST";
        var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();
        ajax.open(method,url);
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        var content = "province="+province;
        ajax.send(content);
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4){
                if(ajax.status == 200)
                {
                    //从ajax异步对象获取服务器响应的xml文档
                    var xmlDocument = ajax.responseXML;
                //    解析xml文档
                    var citySel = document.getElementById("cityID");
                    var cityEleArray = xmlDocument.getElementsByTagName("city");
                    citySel.options.length=1;
                    for(var i=0;i<cityEleArray.length;i++){
                        //获取xml节点的内容
                        var city = cityEleArray[i].firstChild.nodeValue;
                        var cityEle = document.createElement("option");
                        cityEle.innerHTML = city;
                        citySel.appendChild(cityEle);
                    }
                }
            }
        }
    }
}

Action中的方法：

    public String getCity() throws IOException {
        Object province = request.get("province");
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        writer.write("<?xml version='1.0' encoding='UTF-8'?>");
        writer.write("<root>");
        if("广东".equals(province))
        {
            writer.write("<city>广州</city>");
            writer.write("<city>深圳</city>");
        }
        else if("山东".equals(province))
        {
            writer.write("<city>济南</city>");
            writer.write("<city>枣庄</city>");
            writer.write("<city>青岛</city>");
        }
        writer.write("</root>");
        writer.flush();
        writer.close();
        return "getCity";
    }

7.验证码

生成验证码：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
    public Color getColor(){
        Random random = new Random();
        int r = random.nextInt(256);//0-255
        int g = random.nextInt(256);
        int b = random.nextInt(256);
        return new Color(r,g,b);
    }
    public String getNum(){
        String str = "";
        Random random = new Random();
        for(int i=0;i<4;i++){
            str += random.nextInt(10);//0-9
        }
        return str;
    }
%>
<%
    response.setHeader("pragma", "mo-cache");
    response.setHeader("cache-control", "no-cache");
    response.setDateHeader("expires", 0);

    BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);

    Graphics g = image.getGraphics();
    g.setColor(new Color(200,200,200));
    g.fillRect(0,0,80,30);

    for (int i = 0; i < 30; i++) {
        Random random = new Random();
        int x = random.nextInt(80);
        int y = random.nextInt(30);
        int xl = random.nextInt(x+10);
        int yl = random.nextInt(y+10);
        g.setColor(getColor());
        g.drawLine(x, y, x + xl, y + yl);
    }

    g.setFont(new Font("serif", Font.BOLD,16));
    g.setColor(Color.BLACK);
    String checkNum = getNum();//"2525"

    StringBuffer sb = new StringBuffer();
    for(int i=0;i<checkNum.length();i++){
        sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
    }
    g.drawString(sb.toString(),15,20);

    session.setAttribute("CHECKNUM",checkNum);//2525

    ImageIO.write(image,"jpeg",response.getOutputStream());
    out.clear();
    out = pageContext.pushBody();
%>

使用验证码：

<form>
    <table>
        <tr>
            <th>验证码：</th>
            <td><input type="text" id="checkcode" onkeyup="checkCode()"/> </td>
            <td><img src="createCheckNum.jsp" width="80px" height="30px"></td>
            <td id="resID"></td>
        </tr>
    </table>
</form>

验证：

function checkCode(){
    var checkEle = document.getElementById("checkcode");
    var checkcode = checkEle.value;
    //去掉两边的空格
    checkcode = trim(checkcode);
    var td = document.getElementById("resID");
    td.innerHTML="";
    if(checkcode.length == 4){
        var ajax = createAJAX();
        //var method = "POST";
        //var url = "${pageContext.request.contextPath}/ajax_checkCode?time="+new Date().getTime();
        //ajax.open(method,url);
        //ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //var content = "checkcode="+checkcode;
        //ajax.send(content);
        var method = "POST";
        var url = "${pageContext.request.contextPath}/ajax_checkCode?time="+new Date().getTime();
        ajax.open(method,url);
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        var content = "checkcode="+checkcode;
        ajax.send(content);
        ajax.onreadystatechange = function(){
            if(ajax.readyState == 4){
                if(ajax.status == 200)
                {
                    var tip = ajax.responseText;
                    var img = document.createElement("img");
                    img.src = tip;
                    img.style.width="14px";
                    img.style.height="14px";
                    td.appendChild(img);
                }
            }
        }
    }
}
function trim(str){
    str = str.replace(/^\s*/,"");
    str = str.replace(/\s*$/,"");
    return str;
}

struts验证：

    public String checkCode() throws IOException {
        String tip="images/MsgError.gif";
        Map<String, Object> session = ActionContext.getContext().getSession();
        String checkcodeServer = (String) session.get("CHECKNUM");
        if(checkcodeServer == null)
            return null;
        if(checkcodeServer.equals(checkcode))
        {
            tip="images/MsgSent.gif";
        }
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = response.getWriter();
        writer.write(tip);
        writer.flush();
        writer.close();
        return null;
    }