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参数

原理

部分源码分析

您的项目需求