整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是大澈！
本文約 600+ 字，整篇閱讀約需 1 分鐘。
每日分享一段優質代碼片段。
今天分享一段優質 JS 代碼片段，從而比以往更簡單的從 URL 中獲取查詢參數。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
const getQueryByName = (name) => {
const query = new URLSearchParams(location.search)
return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null分享原因
這段代碼通過 URLSearchParams 對象簡化了從 URL 中獲取查詢參數的過程。
通過這種方法，可以更方便地在 JavaScript 中解析和獲取 URL 查詢參數，特別適用于處理需要從 URL 中提取參數的場景，比如讀取用戶在網頁中的輸入或搜索關鍵字等。
這是項目中一個很常見的操作，之前我們經常會使用 正則表達式 或者 拆分字符串 來完成，現在有了更簡單的方式！
代碼解析
1. const query = new URLSearchParams(location.search);
創建 URLSearchParams 對象。
URLSearchParams 是 Web API 的一部分，用于操作 URL 的查詢字符串。
location.search 返回當前 URL 的查詢字符串（例如 ?name=value&key=value）。
URLSearchParams 對象將其解析為一個可以操作的查詢參數對象。
2. decodeURIComponent(query.get(name));
query.get(name) 方法從查詢參數對象中獲取名稱為 name 的參數值。
decodeURIComponent 用于對參數值進行解碼，以確保返回的值是一個人類可讀的字符串，避免 URL 編碼帶來的問題（例如 %20 代表空格）。
- end -
大多數用戶來說，Web服務最具有吸引力的就是Web的按需操作。當用戶需要時，就能得到他想要的內容。而對于正在閱讀這份文檔的你來說，HTTP真的很重要，因為只要你從事計算機行業，估計就離不開它。
1.HTTP概況
HTTP協議由兩部分程序實現:一個客戶機程序和一個服務器程序，它們運行在不同的端系統中，通過交換HTTP消息進行會話。HTTP定義了瀏覽器和Web服務器之間的消息格式以及客戶機和服務器是如何進行消息交換的。
HTML是超文本標記語言，定義了網頁的表現形式，例如字體、排版等。
Web頁面是由對象組成的。對象(object)簡單來說就是文件，如HTML文件、JPEG圖形文件、Java小程序或視頻片段文件，這些文件可通過一個URL地址尋址。多數Web頁面含有一個基本HTML文件以及幾個引用對象(你看到的web頁是瀏覽器根據HTML語法，將多個對象文件渲染而成的)。
例如，如果一個Web頁面包含HTML文本和5個JPEG圖形文件，那么這個Web頁面有6個對象:一個基本HTML文件加5個圖片。在基本HTML文件中通過對象的URL地址對對象進行引用。在服務器磁盤中，這個HTML文件和圖片是分開存放的。瀏覽器獲得這些對象后，進行渲染，把它們組合在一起呈現給用戶。
URL地址由兩部分組成:存放對象的服務器主機名和對象的路徑名。
例如，URL地址
http://www.someschool.edu.cn/images/Department.gif
中的http://www.someschool.edu.cn就是主機名，images/Department.gif是路徑名。當用戶請求一個Web頁面時，瀏覽器向服務器發出對該頁面中所有包含對象的HTTP請求消息，服務器接受請求并生成包含這些對象HTTP響應消息進行響應。
HTTP使用TCP而不是UDP作為它的傳輸層協議。瀏覽器發起一個與服務器的TCP連接，一旦連接建立，瀏覽器和服務器進程就可以通過套接字接口(就是發送/接收函數調用)訪問TCP。
HTTP是無狀態的。服務器向客戶機發送被請求的文件時，并不存儲任何關于該客戶機的狀態信息。假如一個特定的用戶在幾秒鐘內多次請求同一個對象，服務器并不會因為剛剛為該用戶提供了該對象就不再做出反應，而是重新發送該對象。但服務器一般會在日志文件中記錄用戶的訪問歷史。
2.非持久連接和持久連接
如果瀏覽器使用一個TCP連接向服務器請求一個Web頁面對象，也就是說請求一個對象后這個連接就關閉了，就稱為HTTP的非持久連接。
如果瀏覽器使用一個TCP連接向服務器請求多個Web頁面對象，那么稱為持久連接。
例如上面那個Web頁面有6個對象，使用非持久連接，將打開6個TCP連接取回所有對象。若使用持久連接，理論上只需要一次TCP連接。
現在的瀏覽器通常使用持久連接，即使選擇了HTTP1.0。
瀏覽器通常使用并行的TCP連接來加快Web頁面的獲取。例如Firefox瀏覽器，在其配置頁面about:config中就可以方便地設置訪問單個Web服務器的最大TCP連接數目。如果將最大并行連接數設置為1，這樣在非持久連接中TCP連接就會以串行方式建立。
往返時間(Round-TripTime，RTT)的定義，即一個分組從客戶機到服務器再回到客戶機所花費的時間。RTT包括分組傳播時延、分組在中間路由器和交換機上的排隊時延以及分組處理時延。
3:HTTP消息格式
HTTP消息有兩種:請求消息和響應消息。
?HTTP請求消息
下面是一個典型的HTTF請求消息:
GET/somedir/Page.htmlHTTP1.1
Host:http://www.someschool.edu.cn
Connection:KeepAliveUser-agent:
Moailla/2.0
Accept-language:fr
Entitybody
HTTP消息頭部是用普通的ASCII文本書寫的。
HTTP請求消息的第一行叫做請求行(requestline),其后繼的行叫做頭部行(headerline)。
請求行有3個字段:方法字段、URL字段和HTTP協議版本字段。
方法字段可以取值GET、POST、HEAD、PUT和DELETE。
當瀏覽器請求一個對象時，使用GET方法，在URL字段填寫該對象的URL。
首部行Host:http://www.someschool.edu.cn定義了目標所在的主機。
通過包含Connection:KeepAlive首部行，瀏覽器告訴服務器希望使用持久連接。
User-agent:首部行用來定義用戶發送請求的瀏覽器的類型。
最后，Accept-language:fr首部行表示用戶想獲的該對象的語言版本
“實體”(entitybody)。使用GET方法時實體為空，而使用POST方法提交表單(Form，
HTML語言的一個標簽)時將表單內容放在Entitybody部分。例如，用戶在使用POST方法向搜索引擎提供搜索關鍵詞，關鍵詞就出現在Entitybody部分。
也可以使用GET方法向服務器提交表單，這時輸入數據(表單字段值)會在請求行的URL字段進行發送。例如，一個表單使用GET方法，它有一個字段，分別填寫的是test,那么得到的URL可能就是http://www.somesite.com/search?test。
HEAD方法類似于GET方法。當服務器收到使用HEAD方法的請求時，會用一個HTT'P消息進行響應，但是并不返回請求對象。應用程序開發者常用HEAD方法進行故障跟蹤。
PUT方法將對象上傳到指定的Web服務器上指定的路徑。DELETE方法可以刪除Web服務器上的對象。
?HTTP響應消息
HTTP1.1200OK
Connection:KeepAlive
Date:Tue,09Aug201723:23:02GMT
Server:Apache/3.0(unix)
Last-Modified:Sun，6May201712:13:24GMTContent-Length:6821
Con}tent-Tyge:text/html
(data...)
響應消息分成三個部分:初始狀態行、首部行，然后是實體。
狀態行有3個字段:協議版本、狀態碼和相應狀態信息。
首部行中Date:首部行指示服務器產生并發送該響應消息的日期和時間。
Last-Modified:首部行指示了對象創建或者最后修改的日期和時間。
它對可能在客戶機也可能在網絡緩存服務器上的對象緩存來說非常重要。
實體部分包含了所請求的對象。
常見的狀態碼
狀態碼 說明
200 響應成功
302 跳轉，跳轉地址通過響應頭中Location屬性指定
400 客戶端請求有語法錯誤，不能被服務器識別
403 服務器接收到請求，但是拒絕提供服務(例如認證失敗)
404 請求資源不存在(?)
500 服務器內部錯誤
首部行的使用是由瀏覽器和Web服務器根據HTTP協議和用戶設置決定的。部分瀏覽器甚至有插件可以修改HTTP消息頭部，例如Chrome瀏覽器。
4用戶與服務器的交互:cookie
HTTP使用cookie技術使Web站點能夠跟蹤用戶。
cookie技術有4個組成部分:
1 在HTTP響應消息中有一個set-cookie首部行;
2 在HTTP請求消息中有一個cookie首部行;
3 在用戶端系統中保留有一個cookie文件，由用戶的瀏覽器管理;
4 在Web站點有一個后端數據庫。
假設Susan從她的家用PC機使用瀏覽器第一次訪問Amazon。
當請求消息到達AmazonWeb服務器時，該Web站點將產生一個唯一識別碼，并以此作為索引在它的后端數據庫中產生一個表項。
接下來AmazonWeb服務器用一個包含set-cookie:首部行的HTTP響應消息對Susan的瀏覽器進行響應，其中set-cookie:首部行含有識別碼。
當Susan的瀏覽器收到了該HTTP響應消息時，它會看到該set-cookie:首部。瀏覽器在它管理的特定cookie文件中添加一行，其中包含該服務器的主機名和set-cookie:首部中的識別碼。
注:
當Susan繼續瀏覽Susan網站時，每請求一個Web頁面，其瀏覽器就會從它的cookie文件中獲取這個網站的識別碼，并放到HTTP請求消息的首部行中。
用這種方式，Amazon服務器可以跟蹤Susan在該站點的活動。
cookie常用于購物車、用戶登錄認證等。cookie的訪問控制是用戶隱私訪問控制的重要組成部分，很多瀏覽器(IE等)都可以進行cookie訪問權限的設置。
5:Web緩存
Web緩存(webcache)也叫代理服務器(proxyserver)，可以配置用戶的瀏覽器，使得用戶的所有HTTP請求首先指向Web緩存。
如果設置瀏覽器每次訪問一個Web網站時都通過緩存服務器。
瀏覽器會首先建立一個到Web緩存服務器的TCP連接，并向Web緩存服務器發送一個HTTP請求。
Web緩存服務器檢查本地是否存儲了該對象拷貝。
如果有，Web緩存服務器就用HTTP響應消息向客戶機瀏覽器返回該對象。
如果web緩存服務器沒有該對象，它就與該對象的原始服務器建立TCP連接，請求該對象。
當web緩存服務器接收該對象時，它在本地存儲一份拷貝，并用HTTP響應消息向客戶機的瀏覽器發送該拷貝。
在因特網上部署Web緩存服務器有兩個原因。首先，可以加快對客戶機請求的響應時間。其次，Web緩存可以大大減少一個單位內部網與因特網接入鏈路上的通信量。
條件GET方法
HTTP協議有一種機制，ConditionalGet方法允許緩存服務器保證它的對象是最新的。
如果
1請求消息使用GET方法。
2請求消息中包含一個If-modified-since:首部行，那么
這個HTTP請求消息就是一個條件GET請求消息。
使用該條件GET消息告訴服務器，如果當自指定日期之后修改過該對象那么重新發送
該對象，反之不需要發送。
Etag
Etag是服務器對象的唯一標識符,瀏覽器也可以根據ETag值緩存數據。
客戶機再次請求服務器時，通過If-None-Match:字段告知服務器客戶端緩存數據的ETag值。
服務器收到請求后發現頭部的If-None-Match，與被請求對象的唯一標識進行比對。如果兩個值不相同，說明對象已被改動，則響應此對象，反之告知瀏覽器可以使用其緩存。
lt;br>downLoadProcess(url,filename){
filename = filename || 'xxx.csv';
// 創建xhr對象
var req = new XMLHttpRequest();
//向服務器發送請求 open() send()
req.open("POST", url, true); //(method-GET/POST ,url, async)
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST時需要傳遞
//監聽進度事件
req.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progressing").html((percentComplete * 100) + "%");
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
