Javaweb知識 day15 Response對象

今日內容

1. HTTP協議：響應消息

2. Response對象

3. ServletContext對象

一、HTTP協議：

1.1 響應消息：服務器端發送給客戶端的數據

1.1.1 數據格式：

1. 響應行

1. 組成：協議/版本響應狀態碼狀態碼描述

2. 響應狀態碼：服務器告訴客戶端瀏覽器本次請求和響應的一個狀態。

1. 狀態碼都是3位數字

2. 分類：

1xx：服務器就收客戶端消息，但沒有接受完成，

等待一段時間后，發送1xx多狀態碼

2xx：成功。代表：200

3xx：重定向。代表：302(重定向)，304(訪問緩存)

4xx：客戶端錯誤。

* 代表：

* 404（請求路徑沒有對應的資源）

* 405：請求方式沒有對應的doXxx方法

5xx：服務器端錯誤。代表：500(服務器內部出現異常)

2. 響應頭：

1. 格式：頭名稱：值

2. 常見的響應頭：

Content-Type：服務器告訴客戶端本次響應體數據格式以及編碼格式

Content-disposition：服務器告訴客戶端以什么格式打開響應體數據

* 值：

* in-line:默認值,在當前頁面內打開

* attachment;filename=xxx：以附件形式打開響應體。文件下載

3. 響應空行

4. 響應體：傳輸的數據

1.1.2 響應字符串格式

HTTP/1.1 200 OK

Content-Type: text/html;charset=UTF-8

Content-Length: 101

Date: Wed, 06 Jun 2018 07:08:42 GMT

<html>

<head>

<title>$Title$</title>

</head>

<body>

hello , response

</body>

</html>

二、Response對象

2.1 功能：設置響應消息

2.1.1 設置響應行

1. 格式：HTTP/1.1 200 ok

2. 設置狀態碼：setStatus(int sc)

2.1.2 設置響應頭：setHeader(String name, String value)

2.1.3 設置響應體：

* 使用步驟：

1. 獲取輸出流

* 字符輸出流：PrintWriter getWriter()

* 字節輸出流：ServletOutputStream getOutputStream()

2. 使用輸出流，將數據輸出到客戶端瀏覽器

2.1.4 案例：

1. 完成重定向

* 重定向：資源跳轉的方式

* 代碼實現：

//1. 設置狀態碼為302

response.setStatus(302);

//2.設置響應頭location

response.setHeader("location","/day15/responseDemo2");

//簡單的重定向方法

response.sendRedirect("/day15/responseDemo2");

* 重定向和轉發的區別：

* 重定向的特點:redirect

1. 地址欄發生變化

2. 重定向可以訪問其他站點(服務器)的資源

3. 重定向是兩次請求。不能使用request對象來共享數據

* 轉發的特點：forward

1. 轉發地址欄路徑不變

2. 轉發只能訪問當前服務器下的資源

3. 轉發是一次請求，可以使用request對象來共享數據

* 路徑寫法：

1. 相對路徑：通過相對路徑不可以確定唯一資源

* 如：./index.html

* 不以/開頭，以.開頭路徑

* 規則：找到當前資源和目標資源之間的相對位置關系

* ./：當前目錄

* ../:后退一級目錄

2. 絕對路徑：通過絕對路徑可以確定唯一資源

* 如http://localhost/day15/responseDemo2

/day15/responseDemo2

* 以/開頭的路徑

* 規則：判斷定義的路徑是給誰用的？判斷請求將來從哪兒發出

* 給客戶端瀏覽器使用：需要加虛擬目錄(項目的訪問路徑)

* 建議虛擬目錄動態獲取：request.getContextPath()

* <a> , <form> 重定向...

* 給服務器使用：不需要加虛擬目錄

* 轉發路徑

2. 服務器輸出字符數據到瀏覽器

* 步驟：

1. 獲取字符輸出流

2. 輸出數據

* 注意：

* 亂碼問題：

1. PrintWriter pw=response.getWriter();

獲取的流的默認編碼是ISO-8859-1

2. 設置該流的默認編碼

3. 告訴瀏覽器響應體使用的編碼

//簡單的形式，設置編碼，是在獲取流之前設置

response.setContentType("text/html;charset=utf-8");

3. 服務器輸出字節數據到瀏覽器

* 步驟：

1. 獲取字節輸出流

2. 輸出數據

4. 驗證碼

1. 本質：圖片

2. 目的：防止惡意表單注冊

三、ServletContext對象：

1. 概念：代表整個web應用，可以和程序的容器(服務器)來通信

2. 獲取：

1. 通過request對象獲取

request.getServletContext();

2. 通過HttpServlet獲取

this.getServletContext();

3. 功能：

1. 獲取MIME類型：

* MIME類型:在互聯網通信過程中定義的一種文件數據類型

* 格式：大類型/小類型 text/html image/jpeg

* 獲取：String getMimeType(String file)

2. 域對象：共享數據

1. setAttribute(String name,Object value)

2. getAttribute(String name)

3. removeAttribute(String name)

* ServletContext對象范圍：所有用戶所有請求的數據

3. 獲取文件的真實(服務器)路徑

1. 方法：String getRealPath(String path)

String b=context.getRealPath("/b.txt");//web目錄下資源訪問

System.out.println(b);

String c=context.getRealPath("/WEB-INF/c.txt");//WEB-INF目錄下的資源訪問

System.out.println(c);

String a=context.getRealPath("/WEB-INF/classes/a.txt");//src目錄下的資源訪問

System.out.println(a);

、Blob（Binary Large Object）定義：二進制類型的大對象數據，在 JavaScript 中 Blob 對象表示不可變的原始數據。

2、語法：

var aBlob=new Blob(blobParts, options);

其中：blobParts是一個由 ArrayBuffer、Blob、DOMString 等對象構成的數組；options是一個可選項，由type和endings組成，type代表了被放入到 blob 中的內容的 MIME 類型，endings用于指定包含行結束符 \n 的字符串如何被表示（native表示行結束符\n被更改為適合宿主操作系統的換行符，transparent會保持 blob 中保存的行結束符不變）。

定義Blob

3、Blob屬性和方法：兩個只讀屬性size和type，其中size屬性用于表示數據的大小（以字節為單位），type 屬性為MIME 類型的字符串。slice([start[, end[, contentType]]])返回一個源指定范圍內的Blob 對象；stream()返回一個讀取 blob 內容的ReadableStream；text()返回一個 Promise 對象且包含 blob 所有內容的 UTF-8 格式的 USVString；arrayBuffer()返回一個 Promise 對象且包含 blob 所有內容的二進制格式的 ArrayBuffer。

Blob屬性和方法

4、Blob URL/Object URL 是一種偽協議，允許 Blob作為鏈接的URL源，如a.href、img.src等。

創建 Blob URL：url=URL.createObjectURL(Blob)，覽器器為 URL.createObjectURL 生成的 URL 存儲了一個 URL → Blob 映射，此類 URL 較短，例如

blob:http://domain/b3ad7623-60bb-4eff-9b9d-f925438b97c7

Blob 本身仍駐留在內存中，在不需要時，可以調用URL.revokeObjectURL(url)來刪除引用。

5、base64也可以作為<img src=/>的源，格式為

data:[<mediatype>][;base64],<data>

其中mediatype 是個MIME 類型的字符串，如 image/png，默認值為 text/plain;charset=US-ASCII，例如：

OM to Image

dom-to-image是一個js庫，可以將任意dom節點轉換為矢量(SVG)或光柵(PNG或JPEG)圖像。

安裝

npm install dom-to-image -S

加載

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage=require('dom-to-image');

用法

所有高階函數都接受DOM節點和渲染選項options ，并返回promises。

獲取PNG圖像base64編碼的data URL：

<div id="my-node"></div>

var node=document.getElementById('my-node');
// options 可不傳
var options={}  
domtoimage.toPng(node, options)
    .then(function (dataUrl) {
        var img=new Image();
        img.src=dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

獲取圖像blob：

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) { 
        console.log('blob', blob)
    });

獲取JPEG圖像base64編碼的data URL并下載：

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link=document.createElement('a');
        link.download='my-image-name.jpeg';
        link.href=dataUrl;
        link.click();
});

獲取SVGdata URL，但篩選出所有元素：

function filter (node) {
    return (node.tagName !=='i');
}
 
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
});

以uint8數組的形式獲取原始像素數據，每4個數組元素表示一個像素的RGBA數據：

var node=document.getElementById('my-node');
 
domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y=0; y < node.scrollHeight; ++y) {
          for (var x=0; x < node.scrollWidth; ++x) {
            pixelAtXYOffset=(4 * y * node.scrollHeight) + (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY=pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
          }
        }
    });

options參數

Name	類型	Default	Description
filter	Function	——	以DOM節點為參數的函數。如果傳遞的節點應包含在輸出中，則應返回true(排除節點意味著也排除其子節點)
bgcolor	String	——	背景色的字符串值，任何有效的CSS顏色值。
height	Number	——	渲染前應用于節點的高度（以像素為單位）。
width	Number	——	渲染前應用于節點的寬度（以像素為單位）。
style	Object	——	object對象，其屬性在渲染之前要復制到節點的樣式中。
quality	Number	1.0	介于0和1之間的數字，表示JPEG圖像的圖像質量(例如0.92=>92%)。默認值為1.0（100%）
cacheBust	Boolean	false	設置為true可將當前時間作為查詢字符串附加到URL請求以啟用清除緩存。
imagePlaceholder	Boolean	undefined	獲取圖片失敗時使用圖片的數據URL作為占位符。默認為未定義，并將在失敗的圖像上引發錯誤。

原理

dom-to-image使用SVG的一個特性，它允許在標記中包含任意HTML內容。

遞歸地克隆原始DOM節點
計算節點和每個子節點的樣式，并將其復制到相應的克隆創建偽元素，因為它們不是以任何方式克隆的
嵌入web字體查找所有@font face聲明的web字體解析文件URL，下載相應文件 base64編碼的內聯作為data：URLs 將所有已處理的CSS放入中，然后將其附加到克隆
嵌入圖片在嵌入圖片URL 使用backgroundCSS屬性的圖片，方法類似于字體
將克隆的節點序列化為XML
將XML包裝到標記中，然后包裝到SVG中，然后使其成為data URL
或者，要以Uint8Array的形式獲取PNG內容或原始像素數據，可以創建一個以SVG為源的圖像元素，并將其呈現在已經創建的canvas上，從canvas讀取內容

部分源碼分析

dom-to-image.js

// Default impl options
var defaultOptions={
    // Default is to fail on error, no placeholder
    imagePlaceholder: undefined,
    // Default cache bust is false, it will use the cache
    cacheBust: false
};

var domtoimage={
    toSvg: toSvg,
    toPng: toPng,
    toJpeg: toJpeg,
    toBlob: toBlob,
    toPixelData: toPixelData,
    impl: {
        fontFaces: fontFaces,
        images: images,
        util: util,
        inliner: inliner,
        options: {}
    }
};

if (typeof module !=='undefined')
    module.exports=domtoimage;
else
    global.domtoimage=domtoimage;

defaultOptions設置默認options選項
domtoimage的核心api:

toSvg
toPng
toJpeg
toBlob
toPixelData

例：toJpeg：將draw函數返回的canvas實例，使用canvas的toDataURL方法生成jpeg圖片。toSvg函數將遞歸地克隆原始DOM節點, 將克隆的節點序列化為XML,將XML包裝到標記中，然后包裝到SVG中，然后使其轉成dataURL。

function toJpeg(node, options) {
   options=options || {};
   return draw(node, options)
       .then(function (canvas) {
           return canvas.toDataURL('image/jpeg', options.quality || 1.0);
       });
}
復制代碼

function draw(domNode, options) {
    return toSvg(domNode, options)
        .then(util.makeImage)
        .then(util.delay(100))
        .then(function (image) {
            var canvas=newCanvas(domNode);
            canvas.getContext('2d').drawImage(image, 0, 0);
            return canvas;
        });

    function newCanvas(domNode) {
        var canvas=document.createElement('canvas');
        canvas.width=options.width || util.width(domNode);
        canvas.height=options.height || util.height(domNode);

        if (options.bgcolor) {
            var ctx=canvas.getContext('2d');
            ctx.fillStyle=options.bgcolor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        return canvas;
    }
}

function toSvg(node, options) {
    options=options || {};
    copyOptions(options);
    return Promise.resolve(node)
        .then(function (node) {
            return cloneNode(node, options.filter, true);
        })
        .then(embedFonts)
        .then(inlineImages)
        .then(applyOptions)
        .then(function (clone) {
            return makeSvgDataUri(clone,
                options.width || util.width(node),
                options.height || util.height(node)
            );
        });

    function applyOptions(clone) {
        if (options.bgcolor) clone.style.backgroundColor=options.bgcolor;

        if (options.width) clone.style.width=options.width + 'px';
        if (options.height) clone.style.height=options.height + 'px';

        if (options.style)
            Object.keys(options.style).forEach(function (property) {
                clone.style[property]=options.style[property];
            });

        return clone;
    }
}

作者：知其
https://juejin.cn/post/6988045156473634852

在線咨詢

上一篇：為什么7-11便利店每個產品都能做到爆款？
下一篇：AI視頻教程下載-《完整的ChatGPT網頁開發代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Javaweb知識 day15 Response對象

OM to Image

安裝

加載

用法

options參數

原理

部分源碼分析

您的項目需求