1. ¿Qué es una URL?
URL (Localizador Uniforme de Recursos, Localizador Uniforme de Recursos) es la dirección de un recurso estándar en Internet. Cada archivo (es decir, recurso) en Internet tiene una URL única, que contiene información como la ubicación del archivo y el método de procesamiento de el navegador.
Formato estándar de URL
En términos generales, el formato de definición común de URL con el que estamos familiarizados es:
scheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]
Scheme: Hay http, https, ftp con los que estamos muy familiarizados, así como los famosos ed2k, Thunder's thunder, etc.
host: dirección IP o nombre de dominio del servidor HTTP
puerto: el puerto predeterminado del servidor HTTP es 80, y el número de puerto se puede omitir en este caso. Si se utiliza otro puerto, debe especificarse. Por ejemplo, el puerto predeterminado de tomcat es 8080 http://localhost:8080/
ruta: la ruta para acceder a los recursos
url-params: el parámetro
query-string: los datos enviados a el ancla del servidor http
: posicionamiento del ancla
2. URL de suma de URI
Muchas personas confunden estos dos términos.
URL: (abreviatura de Localizador uniforme/universal de recursos, Localizador uniforme de recursos).
URI: (abreviatura de Identificador uniforme de recursos, Identificador uniforme de recursos).
Relaciones:
URI es una abstracción de nivel inferior de URL, un estándar para cadenas literales.
Es decir, los URI pertenecen a la clase principal y los URL pertenecen a la subclase de URI. Las URL son un subconjunto de las URI.
La diferencia entre los dos es que URI representa la ruta del servidor de solicitudes y define dicho recurso. La URL también describe cómo acceder a este recurso (http://).
3. URL y codificación y análisis
¿Por qué codificar URL? Por lo general, si es necesario codificar algo, significa que no es adecuado para la transmisión directa.
1. Provocará ambigüedad: por ejemplo, clave=valor se usa en la cadena de parámetros de URL para pasar parámetros, y los pares clave-valor están separados por los símbolos &. & y = analizan los parámetros. Si la cadena de valor contiene = o &, como la abreviatura P&G de Procter & Gamble, si necesita pasarse como parámetro, entonces el parámetro en la URL puede ser así?name=P&G&t=1450591802326 , porque un & extra en el parámetro inevitablemente causará errores de análisis en el servidor que recibe la URL, por lo que los símbolos & y = ambiguos deben escaparse, es decir, codificarse.
2. Caracteres ilegales: otro ejemplo es que el formato de codificación de la URL es ASCII en lugar de Unicode, lo que significa que no puede incluir ningún carácter que no sea ASCII en la URL, como el chino. De lo contrario, si los juegos de caracteres admitidos por el navegador del cliente y el navegador del servidor son diferentes, el chino puede causar problemas.
A continuación, introduzca la codificación de URL y el método de análisis correspondiente
codificarURI() y decodificarURI()
encodeURI() es la función en Javascript que realmente codifica una URL. Se ve en la codificación de la URL completa.
encodeURI("https://blog.csdn.net/CYL_2021/some other thing")
//https://blog.csdn.net/CYL_2021/some%20other%20thing
A partir de los resultados de codificación anteriores, se puede ver que los espacios se reemplazarán por %20, pero este método no codificará letras ASCII, números, ~ ! @ # $ & * ( ) = : / , ; ? + '.
decodificarURI() decodificar
decodeURI("https://blog.csdn.net/CYL_2021/some%20other%20thing")
//https://blog.csdn.net/CYL_2021/some other thing
encodeURIComponent() y decodeURIComponent()
Nuestra URL se ve así, con otra URL en el parámetro de solicitud:
var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";
Obviamente, no es posible codificar URI directamente en él. Debido a que encodeURI no escapará de los dos puntos: y la barra inclinada /, entonces habrá ambigüedad en el análisis después de que el servidor lo reciba como se mencionó anteriormente.
encodeURI(URL)
// "http://www.a.com?foo=http://www.b.com?t=123&b=456"
En este momento, se debe usar encodeURIComponent(). Su función es codificar los parámetros en la URL, recuerde codificar los parámetros, no la URL completa.
Porque simplemente no codifica letras ASCII, números ~ !* ( ) '.
Uso incorrecto:
var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";
encodeURIComponent(URL);
// "http%3A%2F%2Fwww.a.com%3Ffoo%3Dhttp%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456"
Uso incorrecto, vea que los dos puntos y la barra inclinada del primer http también están codificados
Uso correcto: encodeURIComponent() se enfoca en codificar un solo parámetro:
var param = "http://www.b.com?t=123&s=456"; // 要被编码的参数
URL = "http://www.a.com?foo="+encodeURIComponent(param);
//"http://www.a.com?foo=http%3A%2F%2Fwww.b.com%3Ft%3D123%26s%3D456"
decodificarURIComponent() decodificar
decodeURIComponent(URL)
//http://www.a.com?foo=http://www.b.com?t=123&s=456
4. Aplicación: analizar parámetros de URL en objetos
let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
parseParam(url)
/* 结果
{ user: 'anonymous',
id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
city: '北京', // 中文需解码
enabled: true, // 未指定值得 key 约定为 true
}
*/
function parseParam(url){
const paramsStr=/.+\?(.+)$/.exec(url)[1];//将？后面的字符串取出来
const paramsArr=paramsStr.split('&');// 将字符串以 & 分割后存到数组中
let paramsObj={
};//将params存到对象中
paramsArr.forEach(param=>{
if(/=/.test(param)){
// 处理有 value 的参数
let [key,val]=param.split('='); // 分割 key 和 value
val=decodeURIComponent(val);// 解码
val=/^\d+&/.test(val)?parseFloat(val):val;// 判断是否转为数字
if(paramsObj.hasOwnProperty(key)){
// 如果对象有 key，则添加一个值
paramsObj[key]=[].concat(paramsObj[key],val);
}else{
// 如果对象没有这个 key，创建 key 并设置值
paramsObj[key] = val;
}
}else{
// 处理没有 value 的参数
paramsObj[param] = true;
}
})
return paramsObj;
}
Artículo de referencia: https://www.cnblogs.com/coco1s/p/5038412.html