• web前后台数据交互的几种方式


    1.利用cookie对象 

    Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。

    (1)后台代码

    1. Cookie cookie=new Cookie("name", "hello");  
    2. response.addCookie(cookie);  

    (2)前台代码

     
    1. Cookie[] cookies=request.getCookies();  
    2. for(int i=0;i<cookies.length;i++){  
    3.         if(cookies[i].getName().toString().equals("name")){  
    4.             out.print(cookies[i].getValue());  
    5.         }  
    6. }  


    2.利用session对象

    session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页,服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时,仍处于同一个session中。

     
    1. request.getSession().setAttribute("name", name);  
    2. request.getSession().setMaxInactiveInterval(2);  
    3. response.sendRedirect("welcome.jsp");  

    (2)前台代码(jsp页面)

    Object user=request.getSession().getAttribute("name");

    3.利用request重定向,设置setAttribute

     
    1. request.setAttribute("name", "cute");  
    2. request.getRequestDispatcher("welcome.jsp").forward(request, response);  //网址不会改变  

    PS:如果后台使用的转发代码为 response.sendRedirect("welcome.jsp");  //网址变为welcome.jsp

    则request设置的参数无效,因为已经切换到另一个请求了,request参数的有效期为本次请求。

    (2)前台代码

     
    1. String name=request.getAttribute("name").toString();  

    4.利用Ajax进行异步数据请求(得到的数据可以以json或xml格式返回,便于处理)

    (1)后台代码案例(运用servlet传输数据)

     
    1. public class TestServlet extends HttpServlet {  
    2.   
    3.     /** 
    4.      * Constructor of the object. 
    5.      */  
    6.     public TestServlet() {  
    7.         super();  
    8.     }  
    9.   
    10.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
    11.             throws ServletException, IOException {  
    12.         doPost(request, response);  
    13.     }  
    14.   
    15.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
    16.             throws ServletException, IOException {  
    17.   
    18.         response.setContentType("text/html");  
    19.         PrintWriter out = response.getWriter();  
    20.         String data="[{"name":"apple","price":23},{"name":"banana","price":12},{"name":"orange","price":8}]";  
    21.         out.write(data);  
    22.         out.flush();  
    23.         out.close();  
    24.     }  
    25.   
    26.     /** 
    27.      * Initialization of the servlet. <br> 
    28.      * 
    29.      * @throws ServletException if an error occurs 
    30.      */  
    31.     public void init() throws ServletException {  
    32.         // Put your code here  
    33.     }  
    34.   
    35. }  

    2.前台js请求处理数据代码
     
    1. function createXMLHttpRequest(){  
    2.     var xmlrequest;  
    3.     if(window.XMLHttpRequest){  
    4.         xmlrequest=new XMLHttpRequest();  
    5.     }else if(window.ActiveXObject){  
    6.         try{  
    7.             xmlrequest=new ActiveXObject("Msxm12.XMLHTTP");  
    8.         }catch(e){  
    9.             try{  
    10.                 xmlrequest=new ActiveXObject("Microsoft.XMLHTTP");  
    11.             }catch(e){  
    12.                 xmlrequest="";  
    13.             }  
    14.         }  
    15.     }  
    16.     return xmlrequest;  
    17. }  
    18. //获取数据的函数  
    19. function change(){  
    20.     var xmlrequest=createXMLHttpRequest();  
    21.     xmlrequest.open("POST","TestServlet",true);  
    22.     xmlrequest.onreadystatechange=function(){  
    23.         if(xmlrequest.readyState==4&&xmlrequest.status==200){  
    24.             var data=JSON.parse(xmlrequest.responseText);  
    25.             var content="<table border=1>";  
    26.             for(var i=0;i<data.length;i++){  
    27.                 content+="<tr>";  
    28.                 for(o in data[i]){  
    29.                     content+="<td>"+data[i][o]+"</td>";  
    30.                 }  
    31.                 content+="</tr>";  
    32.             }  
    33.             content+="</table>";  
    34.             document.getElementById("test").innerHTML=content;  
    35.         }  
    36.     };  
    37.     xmlrequest.send();  
    38. }  

    总结:在用户访问网站整个生命周期中都会用到的数据用session来存储,例如用户名,登录状态,购物车信息

               显示在网页上的信息数据大多通过 request或Ajax方式获取

    注意:移动端前端开发调试 http://yujiangshui.com/multidevice-frontend-debug/

               文本大多为摘录或总结,如影响到原创利益问题,请联系我删除!

  • 相关阅读:
    接口的设置
    总结一下《vue的使用》
    标准时间对象的转换
    类数组转换为数组
    异步函数
    vue中moudles的作用及使用方法
    es5数组的新方法
    React JSX
    React更新元素 基础
    React将某段文字插入到某个元素里
  • 原文地址:https://www.cnblogs.com/Strong-stone/p/9341238.html
Copyright © 2020-2023  润新知