天天看點

web開發中前端頁面是如何跟後端伺服器資料互動的

後端伺服器一般是指servlet容器,用于執行java源程式

常見的網頁有html,htm,shtml,asp,aspx,php,jsp等格式

前兩個常用于靜态網頁,後面幾個常用于動态網頁。

這裡前端網頁以比較常見的 xx.html 和 xx.jsp 網頁作為介紹,其它類似

一、靜态頁面xx.html如何跟背景互動:

先來看一個最簡單的登陸界面源代碼

<body>
   <form action="loginServlet" method="post">
      user:<input type="text" name="username"/>
      password:<input type="password" name="password"/>
     
      <input type="submit" value="Submit"/>
   </form>
 </body>
           
web開發中前端頁面是如何跟後端伺服器資料互動的

這是一個表單,我們看到裡面都是純html内容,這是一個靜态頁面,當我們點選submit按鈕時候,浏覽器會送出表單内的資料到伺服器的loginServlet這個相對位址,我們看看浏覽器的位址變成啥了:

web開發中前端頁面是如何跟後端伺服器資料互動的

這不就是我們的背景servlet的位址嘛,然後這個位址指向的是loginServlet這個servlet,然後在web.xml檔案中找到這個servlet關聯的java類,進而執行了伺服器端的程式(第一次執行,那麼會執行個體化,然後執行裡面init()函數,然後執行service()函數,如果是第二次調用,那麼不用執行個體化了,直接執行service()函數),我們來看看伺服器端的源程式:

package com.atguigu.javaweb;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

public class loginServlet extends MyGeneriServlet {
    public void init(javax.servlet.ServletConfig config) throws ServletException{
        super.init(config);
    }
    public void service(ServletRequest request, ServletResponse response)
            throws ServletException, IOException {
        //擷取請求方式是GET,POST方式?
        HttpServletRequest httpServletRequest=(HttpServletRequest) request;
        String method=httpServletRequest.getMethod();
        System.out.println(method);
        //1.擷取請求參數:username,password
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        //擷取請求參數
        String initUser=getServletContext().getInitParameter("user");
        String initpassword=getServletContext().getInitParameter("password");
         
        PrintWriter out=response.getWriter();
        //3.對比
        if(initUser.equals(username)&&initpassword.equals(password)){
            out.print("Hello"+username);    // 生成html内容
        }else{
            out.print("Sorry"+username);    // 生成html内容
        }
    }
}
           

上面沒有判斷此時對servlet的請求是post還是get方法,不過沒關系,request這個傳進來的參數以及包含了這些資訊,自己判斷一下執行相應的操作即可

由于頁面路徑已經跳轉到servlet了,但是servlet不是一個.html檔案啊,那豈不是沒有内容供浏覽器顯示了,不是的,我們看到傳回的參數response中的對象PrintWriter out用于動态生成html内容的字元串"Hello",是以這時候相當于servlet這個路徑也有了html内容了,浏覽器的頁面就會顯示上述字元串了。

二、jsp頁面如何跟後端伺服器互動:

jsp網頁檔案就是html内容裡面插入java代碼,當我們通路.jsp網頁檔案時候,伺服器提前已經知道這個頁面内含有java代碼,那麼伺服器這邊就得先執行一下這些代碼(就跟執行servlet的java源代碼一樣),同時把執行的結果嵌入在目前這個.jsp頁面内,我們看看源代碼:

<%@page import="java.util.Date"%>     // 如果這個.jsp頁面中用到了一些java函數,就得導入庫,這就跟java源檔案一樣的

<html>
    <head>
           <title>第一個 JSP 程式</title>
    </head>
    <body>
           <%
                  out.println("Hello World!"); // 這裡實際上是伺服器執行了結果,然後以文本傳回給浏覽器進行顯示
           %>
    </body>
</html>
           

剛剛說過對象PrintWriter out用于動态生成html内容的字元串,是以伺服器執行完嵌入在裡面的java代碼後,就是動态生成了一串html代碼,然後一起傳給用戶端浏覽器進行顯示

當然這種情況.jsp裡面沒有按鈕,表單這樣的控件,現在再來看看有表單這種.jsp如何跟後端互動:

view.jsp

<%@page import="day03_student.Student"%>  // 還是得帶入java用到的庫檔案

<style type="text/css">  // 樣式設計部分,即css

table{

border:1px solid gray;

border-collapse:collapse;

width:50%

}

td{

border:1px solid gray;

}

</style>

<body>
    <h2>學生個人基本資訊</h2>
   <table>
   <tr>
    <td>編号</td>
    <td>學号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年齡</td>
    </tr> 
     <tr>
      <%
    Student s=(Student)request.getAttribute("students");  // 
     %>
     <td><%=s.getId()%></td>
     <td><%=s.getStuno()%></td>
     <td><%=s.getName()%></td>
     <td><%=s.getGender()%></td>
     <td><%=s.getAge() %></td>
     </tr>
   </table>
  </body>
           

參考的原文:https://blog.csdn.net/myclass1312/article/details/80571867

這時候如果我們直接通路這兒view.jsp檔案,應該是沒有資料的,因為對象s無法從request對象擷取,必須得先給這個request對象指派才行,即應該從如下servlet路徑跳轉來view.jsp檔案路徑才行

public class viewservlet extends HttpServlet {
 
    private StudentDao dao=new StudentDao();
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
                String idstr = request.getParameter("id");
                int id = Integer.parseInt(idstr);
                //将資料放入request中,傳遞到頁面
                Student student=dao.queryById(id);
                request.setAttribute("students", student);
                request.getRequestDispatcher("view.jsp").forward(request, response);    // 這裡是從目前頁面跳轉去哪個頁面,同時傳遞了request, response這兩個參數,這時候的request就是有内容的,接下來的view.jsp頁面就能擷取到内容而且動态生成html内容
    }
    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
        }
}
           

總結:每個xx.html檔案,xx.jsp檔案,servlet響應程式…都是需要在用戶端浏覽器通過URL來通路的。

xx.jsp檔案,servlet響應程式因為含有java源代碼,需要伺服器電腦先執行一下,.jsp檔案中的java代碼一般會動态生成一些html内容嵌入在目前.jsp檔案裡面一起給浏覽器顯示出來;而servlet中的java代碼一般是資料處理功能的,可能會通過

request.getRequestDispatcher(“view.jsp”).forward(request, response);

這樣的方式跳轉到其它有html内容的頁面的URL(同時傳遞處理好的資料過去) 來顯示結果。

繼續閱讀