"Base advanced" url details and URL encoding

As a front-end, daily dealing with URLs is essential. But maybe every day is just a simple use, it is just smattering, with the work, I found in the daily grab package debugging, interface calls, browser compatibility and many other aspects, do not go deep to understand the URL and URL coding will step on a lot of pits. So write down this article and explain the URL.

URL and URI

Many people will confuse these two nouns.

URL: (uniform/universal Resource Locator abbreviation, Uniform Resource Locator).

URI: (Uniform Resource Identifier abbreviation, Uniform Resource Identifier).

Relationship:

A URI is a lower-level abstraction of a URL, a string literal standard.

That is, the URI belongs to the parent class, and the URL belongs to the subclass of the URI. A URL is a subset of the URI.

The difference is that the URI represents the path to the requesting server and defines such a resource. The URL also shows how to access the resource (http://).

port and URL standard format

What is a port? Port, which is the equivalent of a data transmission channel. Used to accept certain data and then transmit it to the appropriate service, and the computer will then send the corresponding reply to the other party via the open end.

The role of the port: because the relationship between the IP address and the network service is a one-to-many relationship. So actually on the Internet is the IP address plus the port number to distinguish between different services.

Ports are marked by port numbers, with only integers, ranging from 0 to 65535.

URL standard format.

In general, the common definition format for URLs that we are familiar with is:

scheme://host[:p ort#]/path/.../[;url-params][?query-string][#anchor]

Scheme//Have we are familiar with HTTP, HTTPS, FTP and famous ed2k, Thunderbolt Thunder and so on. The   default port for the host//http server's IP address or domain name port#  //http server is 80, which can be omitted. If you are using a different port, you must indicate, for example, that the default port for Tomcat is 8080 Http://www.cnblogs.com:8080/path   //Access resource path Url-params  //Parameters Query-string    //data sent to HTTP Server anchor//anchor location

　

automatically parse URLs with <a> tags

A common scenario in development is the need to extract some required elements from the URL, such as host, request parameters, and so on.

The usual practice is to write the regular to match the corresponding fields, of course, here to Amway the following method, from the James blog, the principle is to dynamically create a tag, using some of the browser's native methods and some of the regular (for the robustness of the regular or want), the perfect resolution of the URL, Get any part of what we want.

The code is as follows:

This function creates a new anchor element and uses location//properties (inherent) to get the desired URL data. Some string//Operations is used (to normalize results across browsers).    function parseURL (URL) {var a = document.createelement (' a ');    A.href = URL;        return {source:url, protocol:a.protocol.replace (': ', '), Host:a.hostname, Port:a.port, Query:a.search, params: (function () {var ret = {}, seg = A.search.replace (/^?/, ").            Split (' & '), Len = seg.length, i = 0, s;                for (; i<len;i++) {if (!seg[i]) {continue;}                s = seg[i].split (' = ');            Ret[s[0]] = s[1];        } return ret; }) (), File: (A.pathname.match (//([^/?#]+) $/i) | | [,‘‘]) [1], Hash:a.hash.replace (' # ', '), Path:a.pathname.replace (/^ ([^/])/, '/$1 '), Relative: (A.href.match (/tps?:/ /[^/]+(.+)/) || [,‘‘]) [1], SegmeNts:a.pathname.replace (/^//, "). Split ('/')};} 

Usage Method:

var myurl = parseURL (' http://abc.com:8080/dir/index.html?id=255&m=hello#top '); Myurl.file;     = ' index.html ' Myurl.hash;     = ' top ' myurl.host;     = ' abc.com ' myurl.query;    = '? Id=255&m=hello ' Myurl.params;   = Object = {id:255, M:hello}myurl.path;     = '/dir/index.html ' myurl.segments; = Array = [' dir ', ' index.html ']myurl.port;     = ' 8080 ' myurl.protocol; = ' http ' myurl.source;   = ' Http://abc.com:8080/dir/index.html?id=255&m=hello#top '

Using the above method, any part of the URL can be parsed.

URL Encoding

Why URL encoding? Usually, if something needs to be coded, it means that it is not suitable for direct transmission.

1, will cause ambiguity: for example, the URL parameter string using key=value such a key-value pair form to pass parameters, key-value pairs are separated by A & symbol, such as postid=5038412&t=1450591802326, the server will be based on the parameters of the string & and = parameter parsing, if the value string contains = or &, it will inevitably cause the server to receive the URL parsing error, so the ambiguous & and the = symbol must be escaped, that is, encoding it.

2. Illegal characters: Also, the URL encoding format is ASCII, not Unicode, which means you cannot include any non-ASCII characters in the URL, such as Chinese . Otherwise, Chinese can cause problems if the client browser and the server-side browser support different character sets.

So how to encode? As follows:

Escape, encodeURI, encodeURIComponent

Escape ()

The first thing to declare is thatthis function is discarded, as a front end if you use this function is to face .

Escape simply encodes the string (while the other two encode the URL), regardless of the URL encoding. The effect after encoding is presented in the form of%XX or%uxxxx. It does not encode ASCII characters, numbers, and @ */+ .

According to the MDN description, escape should be swapped for encodeURI or encodeuricomponent;unescape should be swapped for decodeURI or decodeuricomponent. Escape should be avoided. Examples are as follows:

encodeURI (' https://www.baidu.com/a b C ')//"https://www.baidu.com/%20a%20b%20c" encodeURIComponent (' https:// www.baidu.com/a b C ')//"https%3a%2f%2fwww.baidu.com%2f%20a%20b%20c"//and escape will be encoded into the following, eocode the colon but no encode slash, very strange, So abandoned escape (' https://www.baidu.com/a b C ')//"https%3a//www.baidu.com/%20a%20b%20c"

encodeURI ()

encodeURI () is a function in Javascript that is really used to encode URLs. It looks at encoding the entire URL .

encodeURI ("Http://www.cnblogs.com/season-huang/some other Thing");//"http://www.cnblogs.com/season-huang/some% 20other%20thing ";

After the encoding becomes the above result, you can see that the space is encoded as%20, while the slash/ , Colon: is not encoded.

Yes, it is used to encode the entire URL directly, not ASCII letters, numbers, ~! @ # $ & * () =:/,;? + ' to encode.

encodeURI ("[Email protected]#$&* () =:/,;? + ' ")//[email protected]#$&* () =:/,;? +

encodeURIComponent ()

Hey, sometimes our URL looks like this, with another URL in the request parameter:

var URL = "http://www.a.com?foo=http://www.b.com?t=123&s=456";

It is obviously not possible to encodeuri it directly. Because the encodeURI does not escape the colon: and slash/, then there will be ambiguity when the above-mentioned server is accepted for parsing.

encodeURI (URL)//"http://www.a.com?foo=http://www.b.com?t=123&b=456"

This time, it should be used to encodeURIComponent (). Its role is to encode the parameters in the URL, remembering that it is the parameter, not the entire URL.

Because it simply does not encode ASCII letters, Numbers ~! * () ' .

Incorrect usage:

Correct usage: encodeURIComponent () focuses on encoding individual parameters:

var param = "http://www.b.com?t=123&s=456"; The parameter URL to be encoded = "http://www.a.com?foo=" +encodeuricomponent (param);//"http://www.a.com?foo=http%3A%2F%2Fwww.b.com% 3ft%3d123%26s%3d456 "

Using the above use <a> tags to resolve URLs and encodeURI () and encodeURIComponent () based on business scenarios will be able to handle URL encoding issues well.

one of the most common application scenarios is when manually stitching URLs, each pair of Key-value is escaped with encodeURIComponent, and then transmitted.

Original article, writing Limited, Caishuxueqian, if there is not in the text, million hope to inform.

"Base advanced" url details and URL encoding