java web前后台交互_前后端交互(javaweb)
前段后臺交互的學習(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方式獲取.
總結
以上是生活随笔為你收集整理的java web前后台交互_前后端交互(javaweb)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: docker redis mysql_d
- 下一篇: java 直播服务器_MyLive--使