Ajax使用

1.传统的web应用请求和响应特点

（1）请求：浏览器以http的方式提交请求获取服务器响应

（2）响应：服务器以http协议的方式响应服务器数据。

http也是一个不安全的协议，https是一个安全的协议，是基于http协议的，且加了一些加密特殊功能，常用于支付等安全的网站中使用。

HTTP请求有三部分组成：请求行、请求头、请求体。

HTTP响应有三个部分组成：响应行、响应头、响应头。

（3）.状态栏：有明显的进度条刷新现象，如果服务器响应较慢的话，进度条刷新会变慢。

（4）历史栏：会收集原来已经访问的历史，进行缓存。

（5）缺点：不需要变化的大量数据，也会全部刷新，造成浏览器加载和处理负担，是使用效果变差。

（6）可改进的地方：让不需要变化的大量数据，只是让需要变化的地方发生变化，无需全部刷新

2.举例：不使用局部刷新的情况。

客户端代码：

当前时间:<span>${requestScope.str}</span><br/>    
<input type="button" value="同步方式提交"/>      
<script type="text/javascript">
  //定位button按钮，同时添加单击事件
  document.getElementsByTagName("input")[0].onclick = function(){
  var url = "${pageContext.request.contextPath}/TimeServlet?id="+new Date().getTime();
      window.location.href = url;    
  }
</script>

服务端代码：

public class TimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("TimeServlet::doGet");
　　　　　//返回数据的格式
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
　　　　　//将时间存入到str变量中
        request.setAttribute("str",str);   
        request.getRequestDispatcher("/time.jsp").forward(request,response);
    }
}

它会在点击同步方式提交的时候，将整个页面进行刷新。

3.ajax的使用

（1）什么是同步：请求、响应、请求、响应。

（2）什么是异步：不是一个请求一个响应。可以多个请求多个响应，或者多个响应。

（3）什么是ajax:客户端与服务器，可以在不刷新的情况下，进行与服务器进行异步通讯的技术，它是一种技术，不是编程语言。

（4）所有的浏览器都内置了异步对象，但是没有创建出来。

对于IE浏览器，它的ajax对象是ActiveXObiect，其它是XMLHttpRequest对象。对于高IE也可以使用XMLHttpRequest.

它无需第三方插件。创建异步对象

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

4.ajax的开发步骤

（1）创建一个ajax对象。

（2）创建url和发送方法

（3）如果是post请求需要设置请求头

（4）真正的发送到服务器，如果没有参数，那么就传递一个null；

（5）他会不断的监听onreadystatechange函数

（6）使用dom对数据进行操作。

5.使用ajax的地方

（1）不需要大量数据时候

6.应用

（1）GET练习刷新时间

当前时间:<span></span><br/>
        <input type="button" value="异步方式提交"/>

<script type="text/javascript">
        //定位button按钮，同时添加单击事件
        document.getElementsByTagName("input")[0].onclick = function(){
            //1)创建AJAX异步对象（每个浏览器内置的，无需第三方jar包）
            var ajax = createAJAX();//2)AJAX异步对象准备发送请求
            var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime();
            var method = "GET";
发送数据之前先将对数据进行封装。
            ajax.open(method,url);//1
            //3）AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示
            var content = null;
            ajax.send(content);//2
           //监听onreadystatechange//NO4）AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数//以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的
            ajax.onreadystatechange = function(){
                //如果AJAX状态码为4
                if(ajax.readyState == 4){
                    //如果服务器响应码是200
                    if(ajax.status == 200){
                        //NO5）从AJAX异步对象中获取服务器响应的结果
                        var str = ajax.responseText;
                        //NO6）按照DOM规则，将结果动态添加到web页面指向的标签中
                        document.getElementsByTagName("span")[0].innerHTML = str;
                    }
                }
            }
        } 
    </script>

服务器代码：注意，因为局部新所以不可以使用重定向和转发，应该使用流的方式将数据返回。

public class TimeServletAjax extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        //注意：在Web2.0时代，即异步方式下，不能用转发或重定向
        //因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新
        //所以得用以输出流的方式将服务器的结果输出到浏览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
}

（2）练习post方法，完成用户名效验

    输入用户名：<input type="text" maxlength="8"/><hr/>
    <div></div>

<script type=”text/javascript”>
    Document.getElementsByTagName(“input”)[0].onclick=function(){
   //创建ajax
    Var ajax=createAJAX（）；
    //获取input的值
    Var username=document.getElementById(“XXx”).value();
    //准备url 
    Var url=”${pageContext.request.contextPath()}/TimeServlet?id=”+new Date().getTime();
    //请求方法是post
    Var method=”post”;
   //打开连接 
      Ajax.open(method,url);
    、//设置请求头   
    ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
     //传入参数的方式是key：value的形式    
    var content=”username=”+username;
    Ajax.sent(content);   
    

    //检测状态的变化
    Ajax.onreadystatechanage=function(){
    If(ajax.readystate==4)
    If(ajax.status==200)
   {
       Var str=ajax.redponseText();
       Document.getElementsByTagName(‘div’)[0].innerHTML=str;
   }
 }
}
</script>

public class RegisterServletPost extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        String tip = "images/MsgSent.gif";
        if("杰克".equals(username)){
            tip = "images/MsgError.gif";
        }
    response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}

状态解释：

 （1）事件：onreadystatechange：表示ajax异步对象发生变化，由程序自己触发，不需要手动触发。

（2）属性：ajax.readystate==0:创建好了ajax；

                    ajax.readystate==1;已经open，但是还没有send

　　　　　　ajax.readystate==2,：已经send,但是没有到达客户端

　　　　　 ajax.readystate==3;已经到达客户端，但是正在响应

　　　　　　ajax.readystate==4;已经接到响应，但是是否正确还不一定。

                 接收到的数据

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

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