標(biāo)簽：前后端交互Javaweb
下面介紹了一些關(guān)于交互的細(xì)節(jié)：
1.請(qǐng)求數(shù)據(jù)
-
前端提供請(qǐng)求數(shù)據(jù)。
在開發(fā)中,后臺(tái)在查詢數(shù)據(jù)庫(kù)時(shí)，需要借助查詢條件才能查詢到前端需要的數(shù)據(jù)，而查詢條件正是此時(shí)前端提供相關(guān)的查詢參數(shù)（即URL請(qǐng)求的參數(shù))
2.接口文檔
-
接口文檔主要由后臺(tái)設(shè)計(jì)和修改。
后臺(tái)直接跟數(shù)據(jù)打交道，最熟悉數(shù)據(jù)庫(kù)。前端只是數(shù)據(jù)的接受者和接口文檔的使用者。
3.交互數(shù)據(jù)的格式
-
主要是JSON，以及不常用的XML。
JSON通常用于與服務(wù)器交換數(shù)據(jù)，AJAX也是通過(guò)JSON數(shù)據(jù)來(lái)完成交互。
4.交互的原理
- 前端根據(jù)接口，提供請(qǐng)求參數(shù)，后臺(tái)接收參數(shù)，根據(jù)參數(shù)查詢數(shù)據(jù)庫(kù)，并得到返回的數(shù)據(jù)，將返回的參數(shù)送到前端。前端調(diào)用接口，將返回的數(shù)據(jù)呈現(xiàn)。
5.請(qǐng)求方法
- 請(qǐng)求方法主要有POST和GET，GET是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請(qǐng)求，而POST是向服務(wù)器提交數(shù)據(jù)（提交表單）的一種請(qǐng)求。
下面以Java web講述前后端的交互方式：
1.利用cookie對(duì)象
Cookie是服務(wù)器保存在客戶端中的一小段數(shù)據(jù)信息。使用Cookie有一個(gè)前提，就是客戶端瀏覽器允許使用Cookie并對(duì)此做出相應(yīng)的設(shè)置。一般不贊成使用Cookie。
????(1)后臺(tái)代碼
Cookie cookie=new Cookie("name", "hello");
response.addCookie(cookie);
????(2)前臺(tái)代碼
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對(duì)象
session對(duì)象表示特定會(huì)話session的用戶數(shù)據(jù)?？蛻舻谝淮卧L問(wèn)支持session的JSP網(wǎng)頁(yè)，服務(wù)器會(huì)創(chuàng)建一個(gè)session對(duì)象記錄客戶的信息。當(dāng)客戶訪問(wèn)同一網(wǎng)站的不同網(wǎng)頁(yè)時(shí)，仍處于同一個(gè)session中。
????(1)后臺(tái)代碼
request.getSession().setAttribute("name", name);
request.getSession().setMaxInactiveInterval(2);
response.sendRedirect("welcome.jsp");
????(2)前臺(tái)代碼（jsp頁(yè)面）
Object user=request.getSession().getAttribute("name");
3. 利用request重定向，設(shè)置setAttribute
????(1)后臺(tái)代碼
request.setAttribute("name", "cute");
request.getRequestDispatcher("welcome.jsp").forward(request, response); //網(wǎng)址不會(huì)改變
PS:如果后臺(tái)使用的轉(zhuǎn)發(fā)代碼為 response.sendRedirect("welcome.jsp"); //網(wǎng)址變?yōu)閣elcome.jsp
則request設(shè)置的參數(shù)無(wú)效，因?yàn)橐呀?jīng)切換到另一個(gè)請(qǐng)求了，request參數(shù)的有效期為本次請(qǐng)求。
????(2)前臺(tái)代碼
String name=request.getAttribute("name").toString();
4. 利用Ajax進(jìn)行異步數(shù)據(jù)請(qǐng)求（得到的數(shù)據(jù)可以以json或xml格式返回，便于處理）
(1)后臺(tái)代碼案例（運(yùn)用servlet傳輸數(shù)據(jù)）
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)前臺(tái)js請(qǐng)求處理數(shù)據(jù)代碼
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;
}
//獲取數(shù)據(jù)的函數(shù)
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();
}
總結(jié)：
在用戶訪問(wèn)網(wǎng)站整個(gè)生命周期中都會(huì)用到的數(shù)據(jù)用session來(lái)存儲(chǔ)，例如用戶名，登錄狀態(tài)，購(gòu)物車信息顯示在網(wǎng)頁(yè)上的信息數(shù)據(jù)大多通過(guò) request或Ajax方式獲取.
