下面介绍了一些关于交互的细节：

1.请求数据

前端提供请求数据。

 在开发中,后台在查询数据库时，需要借助查询条件才能查询到前端需要的数据，而查询条件正是此时前端提供相关的查询参数（即URL请求的参数)

2.接口文档

接口文档主要由后台设计和修改。

  后台直接跟数据打交道，最熟悉数据库。前端只是数据的接受者和接口文档的使用者。

3.交互数据的格式

主要是JSON，以及不常用的XML。

  JSON通常用于与服务器交换数据，AJAX也是通过JSON数据来完成交互。

4.交互的原理

前端根据接口，提供请求参数，后台接收参数，根据参数查询数据库，并得到返回的数据，将返回的参数送到前端。前端调用接口，将返回的数据呈现。

5.请求方法

请求方法主要有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<cookies.length;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. <br> 
    * 
    * @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="<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(); 
}