前段后台交互的学习(Java web)
标签 : 前后端交互 Javaweb
下面介绍了一些关于交互的细节：
请求数据
前端提供请求数据。
在开发中,后台在查询数据库时，需要借助查询条件才能查询到前端需要的数据，而查询条件正是此时前端提供相关的查询参数(即URL请求的参数)
接口文档
接口文档主要由后台设计和修改。
后台直接跟数据打交道，最熟悉数据库。前端只是数据的接受者和接口文档的使用者。
交互数据的格式
主要是JSON，以及不常用的XML。
JSON通常用于与服务器交换数据，AJAX也是通过JSON数据来完成交互。
交互原理
前端根据接口，提供请求参数，后台接收参数，根据参数查询数据库，并得到返回的数据，将返回的参数送到前端。前端调用接口，将返回的数据呈现。
请求方法
请求方法主要有POST和GET，GET是向服务器发索取数据的一种请求，而POST是向服务器提交数据(提交表单)的一种请求。
下面以Java web讲述前后端的交互方式：
1. 利用cookie对象
Cookie是服务器保存在客户端中的一小段数据信息。使用Cookie有一个前提，就是客户端浏览器允许使用Cookie并对此做出相应的设置。一般不赞成使用Cookie。
(1)后端代码
Cookie cookie=new Cookie("name", "hello");
response.addCookie(cookie);
(2)前端代码
Cookie[] cookies=request.getCookies();
for(int i=0;i
if(cookies[i].getName().toString().equals("name")){
out.print(cookies[i].getValue());
}
}
2. 利用session对象
session对象表示特定会话session的用户数据。客户第一次访问支持session的JSP网页，服务器会创建一个session对象记录客户的信息。当客户访问同一网站的不同网页时，仍处于同一个session中。
(1)后端代码
request.getSession().setAttribute("name", name);
request.getSession().setMaxInactiveInterval(2);
response.sendRedirect("welcome.jsp");
(2)前端代码(jsp页面)
Object user=request.getSession().getAttribute("name");
3. 利用request重定向，设置setAttribute
(1)后端代码
request.setAttribute("name", "cute");
request.getRequestDispatcher("welcome.jsp").forward(request, response); //网址不会改变
PS:如果后台使用的转发代码为 response.sendRedirect("welcome.jsp"); //网址变为welcome.jsp
则request设置的参数无效，因为已经切换到另一个请求了，request参数的有效期为本次请求。
(2)前端代码
String name=request.getAttribute("name").toString();
4. 利用Ajax进行异步数据请求(得到的数据可以以json或xml格式返回，便于处理)
(1)后端代码案例(运用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.
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
(2)前端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="
for(var i=0;i
content+="
";
for(o in data[i]){
content+="
"+data[i][o]+"";
}
content+="
";
}
content+="
";
document.getElementById("test").innerHTML=content;
}
};
xmlrequest.send();
}
总结：在用户访问网站整个生命周期中都会用到的数据用session来存储，例如用户名，登录状态，购物车信息显示在网页上的信息数据大多通过 request或Ajax方式获取.
