AJAX：反向AJAX

最新推荐文章于 2024-08-10 20:24:53 发布

不要停止思考-jcn

最新推荐文章于 2024-08-10 20:24:53 发布

阅读量459

点赞数

分类专栏： # web前端大学与Java那些年

对你有帮助，你就转吧。

本文链接：https://blog.csdn.net/qq_41723615/article/details/89268359

版权

大学与Java那些年同时被 2 个专栏收录

803 篇文章 8 订阅

订阅专栏

web前端

69 篇文章 0 订阅

订阅专栏

1.反向AJAX的主要作用
2.实现反向AJAX

在正常情况下，如果一个页面需要来一个部门进行更新操作，则一定由页面发出一个
异步的请求，将请求发到服务器上，而后接收返回的数据，并且使用DOM处理实现
数据的更新。

以上的操作发出的操作，而后服务器端接收，但是反向AJAX采用的形式是，服务器端
推送数据，客户端接收。

现在使用HTML5的WebSocket.
HTTP属于无状态的协议，也就是说服务器端在每一次客户端发送请求并且处理之后，
那么服务器端与这个客户端的联系就断了。
在反向AJAX操作之中，每一次用户所发送来的请求都使用了一个新的线程进行保存，
而后这个新的线程相当于一个客户端绑定在了一起，这个线程可以向客户端一直发送信息。
之所以此技术在Java实现并不好的原因在于此时的客户端要想取得服务器的发送数据，
必须进行不断的轮询。

反向AJAX实现
如果要想实现反向AJAX推荐使用Servlet进行用户请求的处理，因为此时如果要想使用
反向AJAX技术的，必须要声明支持反向ajax.
范例：定义一个ReverseServlet ReverseServlet.java

@SuppressWarnings("serial")
@WebService(urlPatterns="/ReverseServlet",asyncSupported)
public class ReverseServlet extends HttpServlet{
    public void doGet(HttpServletRequest request,HttpServletResponse 
    response)throws ServletException,IOException{
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        AsyncContext asc=request.startAsync();
        asc.start(new MessageThread(asc));//启动多线程进行服务器端推送
    }
    public void doPost(HttpServletRequest request,HttpServletResponse 
    response)throws ServletException,IOException{
        this.doGet(request,response);
    }
    class MessageThread implements Runnable{
        private AsyncContext asc;
        public MessageThread(AsyncContext asc){
            this.asc=asc;
        }
        public void run(){
            try{
            String msg=this.asc.getRequest().getParameter("msg");
            this.asc.getResponse().getWriter().print(
            "[服务器端回应数据]"+msg);
            this.asc.complete();//本次的处理结束，将结果发送出去
            }catch(Exception e){
                e.printStackTrace();
            }
        }
    }
}

此时这个Servlet将支持反向AJAX技术，同时启动的线程可以实现客户端数据的推送。
既然要处理线程，那么自然必须有一个线程处理的主题类，而这个类考虑到标准化应该
使用Runnable接口实现。
但是此时的这个线程类必须依靠一个“AsyncContext”类。
范例：取得AsyncContext 类的对象，依靠request对象完成；
有了这个对象，服务器端才可以向客户端进行数据的推送操作。
范例：需要定义一个线程类，负责处理这个推送
范例：编写servlet而后启动线程处理
此时的服务器端只是启动了一个线程，只是使用了一个AsyncContext进行了数据的接收与输出；

而随后的所有操作就回到了前端的程序代码上。程序代码上需要进行请求的发送与数据的接收；
范例：编写JSP页面 reverse.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="vo.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"
+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <script src="dept_list.js"></script>
    <title>AJAX</title>
    <script>  
       var count=2;
       window.onload=function(){
           document.getElementById("sendBut").addEventListener("click"
           ,function(){
               var msg=document.getElementById("msg").value;
               count=2;
               loadData(msg);
           },false);
       }
       var xmlHttpRequest;
       function createXmlHttpRequest(){
            if(window.XMLHttpRequest){ //表示此时的浏览器是非IE浏览器
                xmlHttpRequest=new XMLHttpRequest();//直接进行对象实例化
            }else{ //如果现在是IE浏览器
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHttp");
            }
        }
        function loadData(msg){
            var msg=document.getElementById("msg").value;
            createXmlHttpRequest();//调用创建xmlHttpRequest对象的函数
        //设置要提交数据的路径以及定义数据的提交模式，而后使用地址重写的方式传递数过去
        xmlHttpRequest.open("post","ReverseServlet?msg="+msg);
        xmlHttpRequest.onreadystatechange=function(){
            if(xmlHttpRequest.status==200){ //服务器端处理正常
                if(xmlHttpRequest.readyState==4){  //现在数据已经处理完成了，可以进行页面处理
                    if(count>0){
                    var divElement=document.createElement("div"); 
                    divElement.appendChild(document.createTextNode(
                    xmlHttpRequest.responseText));
                    document.getElementById("contentDiv").appendChild(divElement);
                    window.setTimeout("loadData('www.hello.com')",2000);       
                    count--;
                    }                    
                }
            }
        };
        xmlHttpRequest.send(null);//发送请求
        }
    </script>
    </head>
  <body>
    <div id="contentDiv" style="heigth:300px;border:1px solid">
       
    </div>
    <div id="inputDiv">
       请输入数据：<input type="text" name="msg" id="msg">
       <input type="button" value="发送">
    </div>
  </body>
</html>

现在JSP实现的反向AJAX的确是可以使用。