2021-07-02 HTTP协议、状态码和跨域

HTTP与HTTPS

HTTP协议：全称Hyper Text Transfer Protocol，翻译过来就是超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法

通过请求>>>响应的方式，在客户端和服务器之间进行通信

缺点是不够安全

HTTP协议的信息传输是以明文的方式直接传输，不做任何加密，很容易被黑客截取并篡改

HTTPS协议：一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性

基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护

GET与POST

• 从缓存的角度：GET请求会被浏览器缓存下来，而POST不会
• 从编码的角度：GET只能进行URL编码，只接受ASCII字符，而POST没有限制
• 从参数的角度：GET一般放在URL中，因此不安全，POST放在请求体中，更适合传输敏感信息
• 从幂等性角度：GET是幂等的，而POST不是（幂等表示执行相同的操作，结果也是相同的）
• 从TCP角度：GET会把请求报文一次性发出去，而POST会分为两个TCP数据包，首先发header部分，如果服务器响应100，然后发body部分

HTTP的状态码

状态码分为五类：

• 1xx：表示目前是协议处理的中间状态，还需要后续操作
• 2xx：表示成功状态
• 3xx：重定向状态，资源位置发生变动，需要重新请求
• 4xx：请求报文有误
• 5xx：服务器端发生错误

几个常见的具体状态码：

200 OK——表示从客户端发来的请求在服务器端被正常处理了

400 Bad Request——表示请求报文存在语法错误，当错误发生时，需修改请求的内容后再次发送请求，另外，浏览器回想200 OK一样对待该状态码

401 Unauthorized——表示需要一个认证对话框来询问用户信息

403 Forbidden——表示对请求资源的访问被服务器拒绝了，或是没有权限访问

404 Not Found——表示服务器上无法找到请求的资源

500 Internal Server Error——表示服务器在执行请求时发生了错误，也可能是web应用存在的bug或某些临时的故障

502 Bad Gateway——表明扮演网关或代理角色的服务器，从上游服务器中接收到的响应是无效的，通常不是客户端能修复的，而是需要途径的web服务器或者代理服务器对其进行修复

HTTP处理表单数据的提交

在http中，有两种主要的表单提交的方式，提现在两种不同的Content-Type取值：

• application/x-www-form-urlencoded：数据会被编码成以&分隔的键值对，字符以URL编码方式编码
• multipart/form-data：数据被分成多个部分，每两个部分之间通过分隔符来分隔，最大的特点每个表单元素都是独立的资源表述

跨域

cookie

本质上就是浏览器里存储的一个很小的文本文件，内部以键值对的方式存储信息，缺点容量小、性能差、不安全

URL组成

浏览器遵循同源政策（scheme协议、host主机和port端口都相同则为同源），非同源站点有这几个限制：

• 不同读取和修改对方的DOM
• 不读访问对方的Cookie、IndexDB和LocalStorage
• 限制XMLHttpRequest请求

当浏览器向目标URL发送Ajax请求时，只要当前URL和目标URL不同源，就会发生跨域请求

跨域请求的处理方式：

1、 CORS，全称跨域资源共享，需要浏览器和服务器的共同支持

简单请求：会自动在请求头当中，添加一个Origin字段，用来说明请求来自哪个源。服务器拿到请求之后，在回应时对应地添加Access-Control-Allow-Origin字段，如果Origin不在这个字段的范围中，那么浏览器就会将响应拦截

2、JSONP，虽然XMLHttpRequest对象遵循同源政策，但是script标签不一样，它可以通过 src 填上目标地址从而发出 GET 请求，实现跨域请求并拿到响应

3、Nginx， 是一种高性能的反向代理服务器，可以用来轻松解决跨域问题

XMLHttpRequest

是Ajax的主要接口，用于浏览器和服务器之间的通信，可以使用多种协议（比如file和ftp），发送任何格式的数据（包括字符串和二进制）

Ajax包括以下几个步骤：

• 1、创建XMLHttpRequest实例
• 2、发出HTTP请求
• 3、接收服务器传回的数据
• 4、更新网页数据

总结一句话，Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理

XMLHttpRequest本身是一个构造函数，使用new命令生成实例，没有任何参数

var xhr = new XMLHttpRequest();

XMLHttpRequest的实例属性

1、XMLHttpRequest.readyState，返回一个整数，表示实例对象的当前状态，只读

• 0，表示XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用
• 1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息
• 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到
• 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息
• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败

通信过程中，每次实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触 readyStateChange事件

2、XMLHttpRequest.onreadystatechange，指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性 另外，如果使用实例的abort()方法，终止 XMLHttpRequest 请求，也会造成readyState属性变化，导致调用XMLHttpRequest.onreadystatechange属性

3、XMLHttpRequest.response，表示服务器返回的数据体（即HTTP回应的body部分），它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定，只读

4、XMLHttpRequest.responseType，是一个字符串，表示服务器返回数据的类型，这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text XMLHttpRequest.responseType属性可以等于以下值：

• “”(空字符串)：等同于text，表示服务器返回文本数据
• “arraybuffer”：ArrayBuffer对象，表示服务器返回二进制数组
• “blob”：Blob对象，表示服务器返回二进制对象，如图片文件
• “document”：Document对象，表示服务器返回一个文档对象
• “json”：JSON对象
• “text”：字符串

5、XMLHttpRequest.responseText，返回从服务器接收到的字符串，只读；只有HTTP请求完成接收以后，该属性才会包含完整的数据

6、XMLHttpRequest.responseXML，返回从服务器接收的HTML或XML文档对象，只读；如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null 该属性生效的前提是 HTTP 回应的Content-Type头信息等于text/xml或application/xml。这要求在发送请求前，XMLHttpRequest.responseType属性要设为document。如果 HTTP 回应的Content-Type头信息不等于text/xml和application/xml，但是想从responseXML拿到数据（即把数据按照 DOM 格式解析），那么需要手动调用XMLHttpRequest.overrideMimeType()方法，强制进行 XML 解析

7、XMLHttpRequest.responseURL，是字符串，表示发送数据的服务器的网址 注意，这个属性的值与open()方法指定的请求网址不一定相同。如果服务器端发生跳转，这个属性返回最后实际返回数据的网址。另外，如果原始 URL 包括锚点（fragment），该属性会把锚点剥离

8、XMLHttpRequest.status，返回一个整数，表示服务器回应的HTTP状态码，一般来说如果通信成功的话，值为200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0，只读

9、XMLHttpRequest.statusText，返回一个字符串，表示服务器发送的状态提示。不同于status属性，该属性包含整个状态信息，比如“OK”和“Not Found”。在请求发送之前（即调用open()方法之前），该属性的值是空字符串；如果服务器没有返回状态提示，该属性的值默认为“OK”。该属性为只读属性

10、XMLHttpRequest.timeout，属性返回一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制

11、XMLHttpRequestEventTarget.ontimeout，属性用于设置一个监听函数，如果发生 timeout 事件，就会执行这个监听函数

12、事件监听属性

XMLHttpRequest 对象可以对以下事件指定监听函数：

• XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
• XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
• XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
• XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
• XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
• XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
• XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

progress事件的监听函数有一个事件对象参数，该对象有三个属性：loaded属性返回已经传输的数据量，total属性返回总的数据量，lengthComputable属性返回一个布尔值，表示加载的进度是否可以计算。所有这些监听函数里面，只有progress事件的监听函数有参数，其他函数都没有参数

13、XMLHttpRequest.withCredentials，是一个布尔值，表示跨域请求时，用户信息（比如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为false，即向example.com发出跨域请求时，不会发送example.com设置在本机上的 Cookie（如果有的话）

14、XMLHttpRequest.upload，XMLHttpRequest 不仅可以发送请求，还可以发送文件，这就是 AJAX 文件上传。发送文件以后，通过XMLHttpRequest.upload属性可以得到一个对象，通过观察这个对象，可以得知上传的进展。主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout

XMLHttpRequest的实例方法

1、XMLHttpRequest.open()，用于指定HTTP请求的参数，或者说初始化XMLHttpRequest实例对象，它一共可以接收五个参数

• method：表示HTTP动词方法，比如GET、POST、PUT、DELETE、HEAD等，参数必须
• url：表示请求发送目标URL，参数必须
• async：布尔值，表示请求是否为异步，默认为true，如果设为false，则send()方法只有等到接收服务器返回了结果，才会进行下一步操作，该参数可选
• user：表示用于认证的用户名，默认为空字符串，参数可选
• password：表示用于认证的密码，默认为空字符串，可选

注意，如果对使用过open()方法的 AJAX 请求，再次使用这个方法，等同于调用abort()，即终止请求

2、XMLHttpRequest.send()，用于实际发出HTTP请求，它的参数是可选的，如果不带参数，就表示HTTP请求只有一个URL，没有数据体，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求

其中，对于url中参数有时需要对其进行编码，使用encodeURIComponent方法

注意，所有 XMLHttpRequest 的监听事件，都必须在send()方法调用之前设定，send方法的参数就是发送的数据。多种格式的数据，都可以作为它的参数

3、XMLHttpRequest.setRequestHeader()，用于设置浏览器发送的HTTP请求的头信息，该方法必须在open()之后，send()之前调用，如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送，该方法接收两个参数，第一个参数是字符串，表示头信息的字段名，第二个参数是字段值

4、XMLHttpRequest.overrideMimeType()，用来指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器进行不一样的处理。举例来说，服务器返回的数据类型是text/xml，由于种种原因浏览器解析不成功报错，这时就拿不到数据了。为了拿到原始数据，我们可以把 MIME 类型改成text/plain，这样浏览器就不会去自动解析，从而我们就可以拿到原始文本了

注意，该方法在send()之前调用，修改服务器返回的数据类型，不是正常情况下应该采取的方法。如果希望服务器返回指定的数据类型，可以用responseType属性告诉服务器，就像下面的例子。只有在服务器无法返回某种数据类型时，才使用overrideMimeType()方法

5、XMLHttpRequest.getResponseHeader()，返回HTTP头部信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，返回null，该方法的参数不区分大小写

6、XMLHttpRequest.getAllResponseHeaders()，返回一个字符串，表示服务器发来的所有 HTTP 头信息。格式为字符串，每个头信息之间使用CRLF分隔（回车+换行），如果没有收到服务器回应，该属性为null。如果发生网络错误，该属性为空字符串

7、XMLHttpRequest.abort()，用来终止已经发出的HTTP请求，调用这个方法后，readyState属性变为4，status属性变为0

XMLHttpRequest实例的事件

1、readyStateChange事件：

readyState属性的值发生改变，就会触发readyStateChange事件，可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理，尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据

2、progress事件：

上传文件时，XMLHttpRequest实例对象本身和实例的upload属性，都有一个progress事件，会不断返回上传的进度

3、load事件、error事件、abort事件：

load 事件表示服务器传来的数据接收完毕，error 事件表示请求出错，abort 事件表示请求被中断（比如用户取消请求）

4、loadend事件：

abort、load和error这三个事件，会伴随一个loadend事件，表示请求结束，但不知道其是否成功

5、timeout事件：

服务器超过指定时间还没有返回结果，就会触发timeout事件

Blob对象

Blob对象表示一个二进制文件的数据内容，比如一个图片文件的内容就可以通过Blob对象读写。它通常用来读写文件，它的名字是Binary Large Object（二进制大型对象）的缩写

浏览器原生提供Blob()构造函数，用来生成实例对象

new Blob(array [, options])

Blob构造函数接收两个参数，第一个数组，成员是字符串或二进制对象，表示新生成的Blob实例对象的内容；第二个参数是可选的，是一个配置对象，目前只有一个属性type，它的值是一个字符串，表示数据的 MIME 类型，默认是空字符串

实例属性和实例方法

Blob具有两个实例属性size和type，分别返回数据的大小和类型

Blob具有一个实例方法slice，用来拷贝原来的数据，返回的也是一个Blob实例

slice方法有三个参数，都是可选的。它们依次是起始的字节位置（默认为0）、结束的字节位置（默认为size属性的值，该位置本身将不包含在拷贝的数据之中）、新实例的数据类型（默认为空字符串）