前后端交互(javaweb)

前段后臺交互的學(xué)習(xí)(Java web)

標簽 : 前后端交互 Javaweb

下面介紹了一些關(guān)于交互的細節(jié):

  1. 請求數(shù)據(jù)
  • 前端提供請求數(shù)據(jù)馍忽。

    在開發(fā)中,后臺在查詢數(shù)據(jù)庫時棒坏,需要借助查詢條件才能查詢到前端需要的數(shù)據(jù),而查詢條件正是此時前端提供相關(guān)的查詢參數(shù)(即URL請求的參數(shù))
  1. 接口文檔
  • 接口文檔主要由后臺設(shè)計和修改遭笋。

    后臺直接跟數(shù)據(jù)打交道坝冕,最熟悉數(shù)據(jù)庫。前端只是數(shù)據(jù)的接受者和接口文檔的使用者瓦呼。
  1. 交互數(shù)據(jù)的格式
  • 主要是JSON喂窟,以及不常用的XML。

    JSON通常用于與服務(wù)器交換數(shù)據(jù)央串,AJAX也是通過JSON數(shù)據(jù)來完成交互磨澡。
  1. 交互原理
  • 前端根據(jù)接口,提供請求參數(shù)质和,后臺接收參數(shù)稳摄,根據(jù)參數(shù)查詢數(shù)據(jù)庫,并得到返回的數(shù)據(jù)饲宿,將返回的參數(shù)送到前端厦酬。前端調(diào)用接口,將返回的數(shù)據(jù)呈現(xiàn)瘫想。
  1. 請求方法
  • 請求方法主要有POST和GET仗阅,GET是向服務(wù)器發(fā)索取數(shù)據(jù)的一種請求,而POST是向服務(wù)器提交數(shù)據(jù)(提交表單)的一種請求国夜。

下面以Java web講述前后端的交互方式:

1. 利用cookie對象

Cookie是服務(wù)器保存在客戶端中的一小段數(shù)據(jù)信息减噪。使用Cookie有一個前提,就是客戶端瀏覽器允許使用Cookie并對此做出相應(yīng)的設(shè)置支竹。一般不贊成使用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的用戶數(shù)據(jù)±窀椋客戶第一次訪問支持session的JSP網(wǎng)頁饶碘,服務(wù)器會創(chuàng)建一個session對象記錄客戶的信息。當(dāng)客戶訪問同一網(wǎng)站的不同網(wǎng)頁時馒吴,仍處于同一個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重定向瑟曲,設(shè)置setAttribute

(1)后端代碼

request.setAttribute("name", "cute");  
request.getRequestDispatcher("welcome.jsp").forward(request, response);  //網(wǎng)址不會改變  

PS:如果后臺使用的轉(zhuǎn)發(fā)代碼為 response.sendRedirect("welcome.jsp"); //網(wǎng)址變?yōu)閣elcome.jsp

則request設(shè)置的參數(shù)無效,因為已經(jīng)切換到另一個請求了豪治,request參數(shù)的有效期為本次請求洞拨。

(2)前端代碼

    String name=request.getAttribute("name").toString();  

4. 利用Ajax進行異步數(shù)據(jù)請求(得到的數(shù)據(jù)可以以json或xml格式返回,便于處理)

(1)后端代碼案例(運用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)前端js請求處理數(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ǎng)站整個生命周期中都會用到的數(shù)據(jù)用session來存儲负拟,例如用戶名烦衣,登錄狀態(tài),購物車信息顯示在網(wǎng)頁上的信息數(shù)據(jù)大多通過 request或Ajax方式獲取.

參考文章:
csdn博客

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末掩浙,一起剝皮案震驚了整個濱河市花吟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌厨姚,老刑警劉巖衅澈,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異谬墙,居然都是意外死亡今布,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門拭抬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來部默,“玉大人,你說我怎么就攤上這事玖喘∷ξ” “怎么了?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵累奈,是天一觀的道長贬派。 經(jīng)常有香客問我,道長澎媒,這世上最難降的妖魔是什么搞乏? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮戒努,結(jié)果婚禮上请敦,老公的妹妹穿的比我還像新娘。我一直安慰自己储玫,他們只是感情好侍筛,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著撒穷,像睡著了一般匣椰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上端礼,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天禽笑,我揣著相機與錄音入录,去河邊找鬼。 笑死佳镜,一個胖子當(dāng)著我的面吹牛僚稿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蟀伸,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蚀同,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了啊掏?” 一聲冷哼從身側(cè)響起唤崭,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎脖律,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腕侄,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡小泉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了冕杠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片微姊。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖分预,靈堂內(nèi)的尸體忽然破棺而出兢交,到底是詐尸還是另有隱情,我是刑警寧澤笼痹,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布配喳,位于F島的核電站,受9級特大地震影響凳干,放射性物質(zhì)發(fā)生泄漏晴裹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一救赐、第九天 我趴在偏房一處隱蔽的房頂上張望涧团。 院中可真熱鬧,春花似錦经磅、人聲如沸泌绣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阿迈。三九已至,卻和暖如春配乓,著一層夾襖步出監(jiān)牢的瞬間仿滔,已是汗流浹背豫尽。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留惋砂,地道東北人困檩。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像飒焦,于是被迫代替她去往敵國和親蜈膨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355