AJAX初步

Posted 2020-07-29 十三弦

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 "checkEmp";
    }

6.二级联动下拉框

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();
        //var content = "province="+province;
        ajax.open(method,url);
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //ajax.send(content);
        //var method = "POST";
        //var url = "${pageContext.request.contextPath}/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";
    }