sumador JS (6) - HTTP solicitud

1. Ajax

Ajax: Asynchronous JavaScript+ XML
Puede solicitar datos adicionales al servidor sin necesidad de desinstalar la página

1.1 XMLHttpRequest

Nativo para httplas solicitudes de la siguiente manera:

const request = new XMLHttpRequest()
// 以下是两种状态监听方案
// 1. 使用onreadystatechange监听XMLHttpRequest对象的状态
request.onreadystatechange = function () {
    // readyState: 0: 未调用open(), 1: 调用open()未调用send()
    // 2. 调用send()未收到响应, 3. 收到部分响应数据 4. 收到全部数据
    if (request.readyState === 4) {
        console.log('请求完成了')
    } else if (request.readyState === 3) {
        console.log('收到数据了')
    }
}
// 2. 使用ProgressEvent对象监听XMLHttpRequest状态
// ProgressEvent对象: 测量如 HTTP 请求等底层流程进度的事件
request.onload = function (event) { // 相当于readyState为4
    console.log('收到数据了:' + event.currentTarget.responseText)
}
request.onprogress = function (event) { // 相当于readyState为3
    if (event.lengthComputable && event.totalSize) {
        console.log('当前加载进度为' + 
        (event.position / event.totalSize).toFixed(2) + '%')
    }
}
request.onerror = function (err) {
    console.log(err)
}
request.timeout = 10000
request.ontimeout = function () {
	console.log('time out')
}
request.open('GET', url, true )
request.send()

1.2 Content-Type

Se utiliza para definir los tipos de datos y codificación, tres formatos comúnmente utilizados son los siguientes:

1. application/json: Uso JSONde Datos
2. application/x-www-form-urlencoded: formLos datos del formulario es codificada key/valueformato al servidor
3. multipart/form-data: Transferencia de Archivos

2. entre dominios

Una de las tres condiciones siguientes se cumplen, el navegador se considerará solicitudes entre dominios, lo que impide esta HTTPsolicitud

1. diferentes protocolos
2. A diferencia de nombres de dominio (IP después de que el nombre de dominio de análisis no se considera que estar en el mismo dominio)
3. puerto diferente

2.1 Solicitud de verificación previa

En el caso de solicitud de dominios cruzados compleja, el navegador antes de enviar una solicitud, utilizando el OPTIONSmétodo de enviar al servidor una Preflightpetición (pre-pedido), el resultado se rechaza si las propiedades de respuesta del servidor, que no envía la solicitud real.
Eran Preflighted Requestcondiciones:

1. Uso solicitud de cabecera personalizada
2. El uso de la no GETy POSTmétodos
3. Los diferentes tipos decontent-type

2.2 Solución

2.2.1 imagen Ping

Dado que la imgetiqueta de dominios cruzados carga no existe, se puede utilizar para los navegadores - de un solo servicio de comunicación de terminales
desventajas:

1. Sólo getsolicitud
2. No se puede procesar los resultados de respuesta

const img = new Image()
img.onload = function () {
    console.log('返回了')
}
// 发送数据{ name: xxx, password: xxx}
img.src = 'http://xxx.com/xxx?name=xxx&password=xxx'

2.2.2 JSONP

A medida que la scriptetiqueta para cargar varios dominios que no existe, que puede ser utilizado para el navegador - Comunicación bidireccional final del servicio de
desventajas:

1. Sólo getsolicitud
2. inseguro

// 1. 动态添加script标签
const script = document.createElement('script')
// 2. 设置回调
script.src = 'http://www.xxx.com/xxx?callback=handleResponse'
document.body.appendChild(script)
// 3. 注入回调
function handleResponse(response) {
    console.log('响应数据是：', response)
}

// 服务器响应文本
handleResponse({ name: 'soraka', age: 18})
// 服务器返回结果本质上是一串js代码，script标签加载完毕后会自动执行
// 代码的内容是执行handleResponse这个函数，传参则是服务器处理后拼接上去的字符串
// 所以在JSONP成功返回后会自动执行注入的回调并将结果传进来

2.2.3 origen cruzado de intercambio de recursos (CORS)

configuración del servidor Access-Control-Allow-Originpara especificar un nombre de dominio a

2.2.4 Agente

el comportamiento del navegador entre dominios no es HTTPparte del acuerdo, por lo que sólo hay 客户端-服务器entre dominios entre, no hay 服务器-服务器entre dominios entre.
webpackY nginxagentes principio similar para resolver 客户端-代理服务器dominios cruzados entre, la solicitud enviada por el servidor proxy al servidor de destino, a continuación, devuelve los resultados para completar la solicitud

2.2.5 Web Socket

Ya no se limita a cliente solicita al servidor de forma activa, una vez establecida la conexión, el cliente puede enviar un mensaje al servidor, el servidor puede impulsar activamente el mensaje al cliente

// 服务器
const app = express()
var expressWs = require('express-ws')(app);

app.ws('/', function(ws, req) {
    let index = 0
    ws.on('message', function(msg) {
        console.log(msg); // message
    });
    setInterval(() => {
        ws.send(index++)
    },1000)
});
// 客户端
const url = 'ws://192.168.x.x:5000'
const Socket = new WebSocket(url)
Socket.onmessage = function(){
    console.log(event.data) // 0,1,2,3,4...
};
function send() {
    Socket.send('message')
}

2.2.6 clase iframe

Los siguientes escenarios son aplicables a anidada iframecomunicación entre las páginas bajo diferentes nombres de dominio, no implica back-end
(libro y la teoría en línea, practico 1,3 aparentemente no es así, podría ser el uso ip + portno causa del nombre de dominio. Porque postMessageantes, que son hermanos , por lo que no me importa acerca de la viabilidad)

1. document.domain:
   El principal iframey secundario iframetambién estableció document.domain = 'domain.com', puede forzar establecen en el mismo nombre de dominio
2. location.hash:
   Por hashla activación de valor onhashchange.
   Implementado Acon Bla comunicación, provisto de un Asubdominio del mismo dominio C. ATransferencia hasha B, Bdespués de recibir los resultados de la pase de procesamiento hashpara C, Cllamando a la recepción Ade los resultados de la devolución de llamadaA
3. window.name:
   window.nameValor persiste después de diferentes cargas de página, se pueden iframequitar para utilizar la página actual se carga la página en otro valor de dominio

2.2.7 postMessage

Uso básico:

1. La adquisición de una ventana de referencia para recibir mensajes
2. Pide a la referencia de postMessage()método

// 示例一
// 发送方
<body>
	<button onclick="send()">postMassage</button>
	<iframe id="iframe" src="http://192.168.x.x:5000/public/index.html"></iframe>
	<script>
	    const iframe = document.getElementById('iframe')
	    function send() {
	        iframe.contentWindow.postMessage('postMassage', '*')
	    }
	</script>
</body>
// 接收方
<body>
	<div id="box"></div>
	<script>
	    window.addEventListener('message', function (event) {
	        const box = document.getElementById('box')
	        box.innerText = event.data
	    })
	</script>
</body>

// 示例二
// 发送方
<body>
    <button onclick="send()">postMassage</button>
    <button onclick="openWindow()">打开</button>
    <script>
        let targetWindow
        function openWindow() {
            targetWindow = window.open('http://192.168.x.x:5000/public/index.html', 'hehe')
        }
        function send() {
            targetWindow.postMessage('postMassage', '*')
        }
    </script>
</body>
// 接收方
<body>
	<div id="box"></div>
	<script>
	    window.addEventListener('message', function (event) {
	        const box = document.getElementById('box')
	        box.innerText = event.data
	    })
	</script>
</body>

3. HTTP

Siete protocolo de red: la capa de aplicación, capa de presentación, capa de sesión, capa de transporte, capa de red, capa de enlace de datos, la capa física de
los datos de procesamiento enfoque de tres capas, centrándose en la siguiente transmisión de datos tres, y de tres a tope capa intermedia los próximos tres

3.1 TCP

protocolo de capa de transporte, HTTPla solicitud se puede entender como una simple TCPconexión, HTTPpero se procesan los datos, la naturaleza oTCP

3.1.1 enlace de tres vías

1. Cliente: Hermano, te quieren construir relaciones, esto es mi petición SYN, el número de serie es Sec x
2. Servidor: Hermano, he recibido una solicitud, que es Ack: x + 1. También construyo relaciones con usted, esta es mi petición SYN, el número de serie es Sec y
3. Cliente: Hermano, he recibido una solicitud, que es Ack: y + 1

¿Por qué tres veces: una vez que no, más tiempo el rendimiento menos fiable desperdiciado

3.1.2 Cuatro agitando

1. Servidor: Hermano, yo pase al centro, adiós, esta es la solicitud FIN, el número de serie es x
2. Cliente: Hermano, he recibido una solicitud, que es Ack: x + 1
3. Cliente: Hermano, yo pase al centro, adiós, esta es la solicitud FIN, el número de serie es y
4. Servidor: Hermano, he recibido una solicitud, que es Ack: y + 1

¿Por qué cuatro veces: la comunicación full-duplex, ambas partes tienen que asegurarse de que la transferencia se ha completado

3.1.3 ventana deslizante

Suponiendo un tres paquetes de transmisión A, B, C
Beneficiario: después de recibir el paquete sólo se deslice en secuencia. El A recibido, no se recibe B, recibió C, B de la ventana deslizante a la
remitente: la corredera máximo para confirmar la secuencia del paquete recibido. Si no hay ningún paquete de confirmación se recibe A, B, y C recibió el paquete de confirmación, la ventana se desliza a la D (A y B que han recibido, pero la pérdida de paquetes de acuse de recibo)

3.1.4 mecanismo de congestión

comienzo lento: antes de alcanzar el umbral de inicio lento, la ventana de congestión en cada uno de los RTTcrecimiento exponencial después de
evitar la congestión: comienzo lento después de alcanzar el umbral, la ventana de congestión en cada RTTmostró un crecimiento lineal después de
retransmisión rápida: tres consecutivos reciben un paquete después de perderse ACK, el paquete se retransmite inmediatamente
Fast Start: después de perderse tres consecutivos recibe un paquete ACK, el umbral de comienzo lento a la mitad de la ventana de congestión, empiece a evitar la congestión

3.2 HTTPS

HTTPSFue HTTPañadido SSLcapa SSLes la HTTPinfraestructura de seguridad de

Algoritmo de cifrado:

• El cifrado simétrico: el cifrado utilizando la misma clave de cifrado y descifrado velocidad rápida
• La criptografía asimétrica: par de claves pública y privada de la criptografía de clave pública puede resolver sólo la clave privada, el cifrado de clave privada clave pública puede estar en solución, el cifrado y el descifrado lenta

Proceso de implementación:

1. El cliente inicia una solicitud de conexión al servidor
2. El servidor devuelve el certificado de clave pública y un cifrado asimétrico
3. certificado de autenticación de cliente que utiliza la criptografía de clave pública para verificar los datos de servidor de autenticación
4. Utilizando la clave privada para descifrar el servidor, se verifica devuelve los mismos datos después de la re-encriptado
5. El cliente genera una clave de cifrado simétrico, cifrado de clave pública al servidor mediante el
6. se obtiene clave de descifrado Server, después de lo cual se comunican mediante el cifrado simétrico

La lógica de cifrado cree personalmente que no hay solución, la única terceros para empezar es el primer paso para hacerse pasar por el servidor, o incluso capturar todo el contenido de la comunicación de seguimiento entre las partes, no se puede obtener información útil
, pero verificar los certificados a su vez disfrazados de un servidor puede reprimir, por lo que HTTPSen términos relativos, muy seguro

3.3 Desarrollo de HTTP

1. http1.0: Cada vez que una solicitud para establecer una conexión TCP se desconecta después de la solicitud está completa
2. http1.1: Establecimiento de una longitud de la conexión TCP, solicitud de sincronización múltiple, la solicitud será la congestión en frente de las solicitudes posteriores
3. http2.0: Establecer una conexión TCP, múltiples solicitudes simultáneas