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

简介: web前后台数据交互的四种方式


  1. 利用cookie对象

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

后台代码

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

前台代码

Cookie[] cookies=request.getCookies(); 
for(int i=0;i<cookies.length;i++){ 
        if(cookies[i].getName().toString().equals("name")){ 
            out.print(cookies[i].getValue()); 
        } 
}
  1. 利用session对象
    session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页,服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时,仍处于同一个session中。

后台代码

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

前台代码

Object user=request.getSession().getAttribute("name");
  1. 利用request转发,设置setAttribute

后台代码

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

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

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

前台代码

String name=request.getAttribute("name").toString();
  1. 利用Ajax进行异步数据请求(得到的数据可以以json或xml格式返回,便于处理)

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

public class TestServlet extends HttpServlet { 
    /**
     * Constructor of the object.
     */ 
    public TestServlet() { 
        super(); 
    } 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        doPost(request, response); 
    } 
    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        response.setContentType("text/html"); 
        PrintWriter out = response.getWriter(); 
        String data="[{\"name\":\"apple\",\"price\":23},{\"name\":\"banana\",\"price\":12},{\"name\":\"orange\",\"price\":8}]"; 
        out.write(data); 
        out.flush(); 
        out.close(); 
    } 
    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */ 
    public void init() throws ServletException { 
        // Put your code here 
    } 
} 

前台js请求处理数据代码

function createXMLHttpRequest(){ 
    var xmlrequest; 
    if(window.XMLHttpRequest){ 
        xmlrequest=new XMLHttpRequest(); 
    }else if(window.ActiveXObject){ 
        try{ 
            xmlrequest=new ActiveXObject("Msxm12.XMLHTTP"); 
        }catch(e){ 
            try{ 
                xmlrequest=new ActiveXObject("Microsoft.XMLHTTP"); 
            }catch(e){ 
                xmlrequest=""; 
            } 
        } 
    } 
    return xmlrequest; 
} 
//获取数据的函数 
function change(){ 
    var xmlrequest=createXMLHttpRequest(); 
    xmlrequest.open("POST","TestServlet",true); 
    xmlrequest.onreadystatechange=function(){ 
        if(xmlrequest.readyState==4&&xmlrequest.status==200){ 
            var data=JSON.parse(xmlrequest.responseText); 
            var content="<table border=1>"; 
            for(var i=0;i<data.length;i++){ 
                content+="<tr>"; 
                for(o in data[i]){ 
                    content+="<td>"+data[i][o]+"</td>"; 
                } 
                content+="</tr>"; 
            } 
            content+="</table>"; 
            document.getElementById("test").innerHTML=content; 
        } 
    }; 
    xmlrequest.send(); 
} 

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

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


相关文章
|
2月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
107 0
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
1月前
|
网络协议 前端开发 数据处理
11 Web交互知识你了解吗?
路老师带你深入PHP世界,纯干货分享。本文从Web工作原理讲起,介绍了HTTP协议和Web数据处理流程,重点讲解了PHP如何获取表单数据,包括POST和GET方法的具体实现及示例代码。适合初学者入门,助你掌握PHP核心技术。
30 1
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
53 1
|
2月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
48 3
|
2月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
131 0
|
2月前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
82 0
|
3月前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
99 1
|
4月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
159 0
|
4月前
|
物联网 C# 智能硬件
智能家居新篇章:WPF与物联网的智慧碰撞——通过MQTT协议连接与控制智能设备,打造现代科技生活的完美体验
【8月更文挑战第31天】物联网(IoT)技术的发展使智能家居设备成为现代家庭的一部分。通过物联网,家用电器和传感器可以互联互通,实现远程控制和状态监测等功能。本文将探讨如何在Windows Presentation Foundation(WPF)应用中集成物联网技术,通过具体示例代码展示其实现过程。文章首先介绍了MQTT协议及其在智能家居中的应用,并详细描述了使用Wi-Fi连接方式的原因。随后,通过安装Paho MQTT客户端库并创建MQTT客户端实例,演示了如何编写一个简单的WPF应用程序来控制智能灯泡。
152 0