1、ajax
    asynchronous javascript and xml :异步的js和xml
    能使用js访问服务器,而且是异步访问
    服务器给客户端的响应一般是整个页面,一个html完整页面。但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面,而是数据
        text:纯文本
        xml:熟悉
        json:是js提供的数据交互格式,在ajax最受欢迎

2、异步交互和同步交互
    同步:
        发出一个请求:要等待服务器的响应结束,然后才能发送第二个请求。中间时间等待
        刷新的是整个页面    
    异步:
        发出一个请求后,无序等待服务器的响应,就可以发出第二个请求
        可以使用js来接收服务器的响应,然后使用js来局部刷新 
3、应用场景
    百度的搜索框
    用户注册时(校验用户名是否被注册过)
4、ajax的优缺点  
    优点:
        异步交互:增强了用户的体验
        性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了

    缺点:
        ajax不能应用在所有场景
        ajax无端的增多了对服务器的访问次数,给服务器带来了压力(本来不用关联搜索)

ajax发送异步请求(四步操作)
1、第一步(得到XMLHttpRequest)
    ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了,就掌握了ajax
    得到XMLHttpRequest
        大多数浏览器都支持 var xmlHttp = new XMLHttpRequesst();
        IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        IE5.5以及更早版本的IE: var xmlHttp = new ActiveXObject = new ActiveXObject("Microsoft.XMLHTTP");

    编写创建XMLHttpRequest对象的函数
    function createXMLHttpRequest(){
        try{
            return new XMLHttpRequest();
        } catch(e){
            try{
                return new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try{
                    return new ActiveXObject("Microsoft.XMLHTPP");
                }catch(e){
                    alert("用的什么浏览器?");
                    throw e;
                }
            }
        }
    }               

2、第二步(打开与服务器的连接)
    xmlHttp.open():用来打开与服务器的连接,需要三个参数
        请求方式:可以是GET或POST
        请求的URL:指定服务器端资源,例如/day06_01/AServlet
        请求是否为异步:如果为true表示发送异步请求,否则同步请求
    xmlHttp.open("GET","/day06_01/AServlet",true);

3、第三步(发送请求)
    xmlHttp.send(null);如果不给会造成部分浏览器无法发送
        参数:就是请求体内容。如果是GET请求,必须给出null,xmlHttp.send("username=zs&password=123");

4、第四步()
    在xmlHttp对象的一个事件上注册监听器:onreadystatechange
    xmlHttp对象共有5个状态
        0状态:刚创建,没有调用open()方法
        1状态:请求开始,调用了open方法,但还没有调用send()方法
        2状态:调用完了send方法
        3状态:服务器已经开始响应,但不表示响应结束了
        4状态:服务器响应结束 (通常只关心这个状态)
    得到xmlHttp对象的状态
        var stats = xmlHttp.readyState;//可能是0、1、2、3、4
    得到服务器响应的状态码
        var status = xmlHttp.status;//例如200、404、500
    得到服务器响应的内容
        var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容
        var content = xmlHttp.responseXML;//得到服务器响应的xml格式的内容,是Document对象

    xmlHttp.onreadystatechange = function(){//xmlHttp的5中状态都会调用本方法
        if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断:判断是否为4状态,而且还有判断是否为200
            //获取服务器的响应内容
            var text = xmlHttp.responseText;//更通用       
        }
    }

发送POST请求(如果发送请求时需要带有参数,一般都用POST)
open:xmlHttp.open("POST",...);
添加一步:设置Content-Type请求头
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
send:xmlHttp.send("username=zs&password=123");//发送请求时指定请求体

注册表单之校验用户是否注册
1、编写页面:
    ajax3.jsp
        给出注册表单页面
        给用户名文本框添加onblur事件的监听
        获取文本框的内容,通过ajax4步发送给服务器,得到响应结果
            如果为1:在文本框后显示"用户名已被注册"
            如果为0:什么都不做 
2、编写Servlet
    ValidateUsernameServlet
        获取客户端传递的用户名参数
        判断是否为itcase
            是:返回1
            否:返回0   

响应内容为xml数据      
    服务器端:
        设置响应头:Content-Type:其值为:text/xml;charset=utf-8;
    客户端:    
        var doc = xmlHttp.responseXML;//得到的是document对象

java 判断能否解析数字 java三步判断_服务器

<script type="text/javascript">
window.onload = function() {//在文档加载完成后马上执行
    //得到btn元素
    var btn = document.getElementById("btn");
    //给btn的click事件注册监听
    btn.onclick = function(){//在按钮被点击时执行
        //获取h1元素对应的dom对象
        var h1 = document.getElementById("h1");
        //给h1添加内容
        h1.innerHTML = "hello";
    }   
}
</script>
  </head>

  <body>
  <button id="btn">点击</button>
  <h1 id="h1"></h1>
  </body>

ajax的helloword

public class AServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("hello ajax");
        response.getWriter().print("hello aaaa");
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");//获取请求参数
        System.out.println("Post:hello ajax"+username);
        response.getWriter().print("Post:hello aaaa"+username);
    }

}

get ajax

<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();//大多数浏览器
    }catch(e){
        try{
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
        }catch(e){
            try{
                return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
            }catch(e){
                alert("什么浏览器?");
                throw e;
            }
        }
    }
}
window.onload = function(){//文档加载完毕后执行
    var btn = document.getElementById("btn");
    btn.onclick = function(){//给按钮的点击事件注册监听
        /*
            ajax四步操作,得到服务器的响应
            把响应结果显示到h1元素中
        */
        /*
            1、得到异步对象
        */
        var xmlHttp = createXMLHttpRequest();
        /*
            2、打开与服务器的连接
                指定请求方式
                指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
                指定是否为异步请求
        */
        xmlHttp.open("GET","<c:url value='/AServlet'/>",true);
        /*
            3、发送请求
        */
        xmlHttp.send(null); //get请求没有请求体,也要给出null,不然firefox可能不能发送
            /*
                4、给异步对象的onreadystatechange事件注册监听器
            */
            xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发送变化时执行}
                //双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取服务器的响应结果
                    var text = xmlHttp.responseText;
                    //获取h1元素
                    var h1 = document.getElementById("h1");
                    h1.innerHTML = text;
                }
            }
        }
    }
</script>
  </head>

  <body>
  <button id="btn">点击</button>
  <h1 id="h1"></h1>
  </body>

post ajax

/创建异步对象
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();//大多数浏览器
    }catch(e){
        try{
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
        }catch(e){
            try{
                return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
            }catch(e){
                alert("什么浏览器?");
                throw e;
            }
        }
    }
}
window.onload = function(){//文档加载完毕后执行
    var btn = document.getElementById("btn");
    btn.onclick = function(){//给按钮的点击事件注册监听
        /*
            ajax四步操作,得到服务器的响应
            把响应结果显示到h1元素中
        */
        /*
            1、得到异步对象
        */
        var xmlHttp = createXMLHttpRequest();
        /*
            2、打开与服务器的连接
                指定请求方式
                指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
                指定是否为异步请求
        */
        //修改open方法,指定请求方式为POST
        xmlHttp.open("POST","<c:url value='/AServlet'/>",true);
        //设置请求头 :Content-Type
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        /*
            3、发送请求
        */
        //发送时指定请求体
        xmlHttp.send("username=zs&password=123"); //get请求没有请求体,也要给出null,不然firefox可能不能发送
            /*
                4、给异步对象的onreadystatechange事件注册监听器
            */
            xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发送变化时执行}
                //双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取服务器的响应结果
                    var text = xmlHttp.responseText;
                    //获取h1元素
                    var h1 = document.getElementById("h1");
                    h1.innerHTML = text;
                }
            }
        }
    }
</script>
  </head>

  <body>
  <button id="btn">点击</button>
  <h1 id="h1"></h1>
  </body>

判断参数是否已有

<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();//大多数浏览器
    }catch(e){
        try{
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
        }catch(e){
            try{
                return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
            }catch(e){
                alert("什么浏览器?");
                throw e;
            }
        }
    }
}
window.onload = function(){
    //获取文本框,给它的失去焦点事件注册监听
    var userEle = document.getElementById("usernameEle");
    userEle.onblur = function(){
        //1、得到异步对象
        var xmlHttp = createXMLHttpRequest();
        //2、打开链接
        xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>",true);
        //3、设置请求头:Content-Type
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");      
        //4、发送请求,给出请求体
        xmlHttp.send("username=" +userEle.value);   

        //5、给xmlHttp的onreadystatechange事件注册监听
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断
                //获取服务器的响应,判断是否为1
                //是:获取span,添加内容:"用户名已被注册"
                var text = xmlHttp.responseText;
                var span = document.getElementById("errorSpan");
                if(text == "1"){
                    //得到span元素
                    span.innerHTML = "用户名已被注册";
                } else{
                    span.innerHTML = "";                    
                }
            }
        };
    };
};
</script>
  </head>

  <body>
 <h1>用户名是否被注册</h1> 
 <form action="" method="post">
 用户名:<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
 密码:<input type="password" name="password"/><br/>
 <input type="submit" value="注册"/>
 </form>
  </body>
public class ValidateUsernameServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        /*
         * 1、获取参数username
         * 2、判断是否为my
         *  3、如果是:响应1
         *  4、如果不是:响应0
         */
        String username = request.getParameter("username");
        if(username.equalsIgnoreCase("my")){
            response.getWriter().print("1");
        } else{
            response.getWriter().print("0");
        }
    }

}

ajax4.jsp

<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();//大多数浏览器
    }catch(e){
        try{
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
        }catch(e){
            try{
                return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
            }catch(e){
                alert("什么浏览器?");
                throw e;
            }
        }
    }
}
window.onload = function(){//文档加载完毕后执行
    var btn = document.getElementById("btn");
    btn.onclick = function(){//给按钮的点击事件注册监听
        /*
            ajax四步操作,得到服务器的响应
            把响应结果显示到h1元素中
        */
        /*
            1、得到异步对象
        */
        var xmlHttp = createXMLHttpRequest();
        /*
            2、打开与服务器的连接
                指定请求方式
                指定请求的URL(页面由服务器发送过来 在发送之前已经被服务器变成html)
                指定是否为异步请求
        */
        xmlHttp.open("GET","<c:url value='/BServlet'/>",true);
        /*
            3、发送请求
        */
        xmlHttp.send(null); //get请求没有请求体,也要给出null,不然firefox可能不能发送
            /*
                4、给异步对象的onreadystatechange事件注册监听器
            */
            xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发送变化时执行}
                //双重判断:xmlHttp的状态为4(服务器响应结束),以及服务器响应的状态码为200(响应成功)
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取服务器的响应结果(xml)
                    var doc = xmlHttp.responseXML;
                    //查找文档下名为student的所有元素,得到数组,再取下标0元素
                    var ele = doc.getElementsByTagName("student")[0];
                    var number = ele.getAttribute("number");//获取元素名为number的属性值
                    //var name = ele.getElementsByTagName("name")[0].textContent;//IE支持
                    //var age = ele.getElementsByTagName("age")[0].textContent;//IE支持
                    //var sex = ele.getElementsByTagName("sex")[0].textContent;//IE老版本支持.text
                    var name;
                    var age;
                    var sex;
                    //处理浏览器的差异
                    if(window.addEventListener) {//一般浏览器都有这
                        name = ele.getElementsByTagName("name")[0].textContent;
                        age = ele.getElementsByTagName("age")[0].textContent;
                        sex = ele.getElementsByTagName("sex")[0].textContent;
                    } else{
                        name = ele.getElementsByTagName("name")[0].text;
                        age = ele.getElementsByTagName("age")[0].text;
                        sex = ele.getElementsByTagName("sex")[0].text;
                    }
                    var text1 = number +","+name+","+age+","+sex;
                    document.getElementById("h1").innerHTML = text1;
                }
            }
        }
    }
</script>
  </head>

  <body>
  <button id="btn">点击</button>
  <h1 id="h1"></h1>
  </body>

BServlet

public class BServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String xml = "<students>"+
                "<student number='my_01'>"+
                "<name>zs</name>"+
                "<age>10</age>"+
                "<sex>male</sex>"+
                "</student>"+
                "</students>";
        response.setContentType("text/xml;charset=utf-8");
        response.getWriter().print(xml);
    }

}