difference between query string and hash
DESCRIPTION
在使用开放平台的oauth授权时,我们发现ie6下页面回跳总是会丢失hash那么hash和querystring这两个看起来很像的东西到底有什么区别呢?在前端mvc日益流行的今天,使用hash来做路由又会有什么隐患?本章将为你解开她们的面纱TRANSCRIPT
DIFFERENCE BETWEEN QUERY STRING & HASH
112年6月14日星期四
In JavaScript, the fragment identifier of the current HTML or XHTML page can be accessed in the "hash" property location.hash
212年6月14日星期四
Common
312年6月14日星期四
• They are both the part of a Uniform Resource Locator (URL)– http://server/path/program?query_string#fragment_identifier
4
Refer: http://en.wikipedia.org/wiki/Query_string
412年6月14日星期四
Difference
512年6月14日星期四
delimiter [difference]
612年6月14日星期四
• query string: & = ; ? #– ? #: separator and not part of the query string– & =: separator and part of the query string– field1=value1&field2=value2&field3=value3...
• fragment identifier : #– #: separator and part of the fragment identifiers
Refer: http://en.wikipedia.org/wiki/Query_string
712年6月14日星期四
url encoding[difference]
812年6月14日星期四
depended object [difference]
912年6月14日星期四
10
• Query string depend on the URI scheme– e.g., http: supports queries unlike ftp:.
• Fragment identifier depend on the document MIME type– with different mine type, its effect is different.– for MIME text/html pages such as http://www.example.org/
foo.html#bar the fragment refers to the element with id="bar".– for MIME text/plain , http://example.com/
document.txt#line=10,20 , this example identifies lines 11 through 20 of a text document:
– for MIME application/pdf, http://example.org/doc.pdf#page=35 will cause Adobe Reader to open the PDF and scroll to page 35
Refer: http://en.wikipedia.org/wiki/Query_string
1012年6月14日星期四
evaluated object [difference]
1112年6月14日星期四
12
• Query string is evaluated by the server • Fragment identifier is evaluated by the
client (Web browser).• url hash不会发送至服务端• url hash的变更不会引起网络请求
1212年6月14日星期四
use
1312年6月14日星期四
• query string:– can be used to contain the content of an
HTML form – tracking: be passed to the program which
generates the web page.• <a href="frank.html?e0a72cb2a2c7">see my page!</a>
• <a href="ciccio.html?e0a72cb2a2c7">mine is better</a>
Refer: http://en.wikipedia.org/wiki/Query_string
1412年6月14日星期四
• fragment identifiers: – refers to a resource that is subordinate to another,
primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.
– eg: typically used to identify a portion of that document.
– With the rise of AJAX, some websites use fragment identifiers to emulate the back button behavior of browsers for page changes that do not require a reload, or to emulate subpages.
– process: first, use hash to memorize the page content change; second, use js to analyze the value of hash
Refer: http://en.wikipedia.org/wiki/Fragment_identifier
1512年6月14日星期四
• cross-domain pass parameters– iframe adaptive height problem when cross
domain– get img url when cross domain
1612年6月14日星期四
function setHash(a){! $.browser.msie?$.locationHash(a):location.hash=a;}$(window).hashchange(function(){! doHash();});function doHash(){! var h = location.hash; switch (h) { case "#ajax1": ajaxFn1(); break; case "#ajax2": ajaxFn2(); break; default: $("#ajax").html("哈哈,hash没有啦!"); }}function ajaxFn1(){! $("#ajax").load("hi.txt", function(){! ! setHash("#ajax1");! });}function ajaxFn2(){! $.get("hi.html", function(t){! ! $("#ajax").html(t);! ! setHash("#ajax2");! });}
1712年6月14日星期四
• apply kissy mvc router in shop category manager– url: siteadmin.daily.taobao.net/category/
auction.htm?sid=12203#!search?catId=-1– why use #! ? It is suggest by google– refer: support.google.com/webmasters/bin/
answer.py?hl=en&answer=174992
1812年6月14日星期四
– examples:• kissy, mvc, router• Gmail uses a single URL for almost every interface – mail boxes,
individual mails, search results, settings – the fragment is used to make these interfaces directly linkable.[6]
• Adobe Flash websites can use the fragment part to inform the user about the state of the website or web application, and to facilitate
• deep linking, commonly with the help of the SWFAddress JavaScript library.
• Other websites use the fragment part to pass some extra information to scripts running on them – for example, Google Video understands permalinks in the format of #01h25m30s to start playing at the specified position,[7] and YouTube uses similar code such as #t=3m25s.[8] A format of #t=10,20 for a section of media from 10 to 20 seconds is proposed in the Media Fragments URI 1.0 W3C Working Draft.[9]
1912年6月14日星期四
does url length has impact on page load speed?
2012年6月14日星期四
第一等级的优化,70字节如何计算的呢?
21
2112年6月14日星期四
22Refer: http://blog.csdn.net/aimingoo/article/details/6081964 - ncz
2212年6月14日星期四
what http header include?
23
2312年6月14日星期四
• http 请求头部信息
2412年6月14日星期四
• 资源文件的get请求http头部的最大长度是496字节
• http头部包含两大部分:★ 可缺省的: 占 184字节★ 必须的:占496-184 = 312字节, 包含:get , user-agent, cookie
‣ 其中cookie可被缓存,所以相当与长度为0字节‣ user-agent的长度在214字节左右‣ 故剩下get部分的长度 = 496-214-78个字节
• 这么做的效果:当我们总是从浏览器端发出最小化的HTTP请求时,网络总是可以最快速的将请求提交到服务器,无需等待多个包并组合。这在慢速网络,以及存在大量丢包的网络中效果将为极为明显。简单地说,如果有人在局域网中用迅雷或BT,那么最小化HTTP请求将会使网页的浏览体验提升得相当相当明显。
Refer: http://blog.csdn.net/aimingoo/article/details/6081964 - ncz
2512年6月14日星期四
use
2612年6月14日星期四
• But with 78 bytes url, what we can do is very little. One common url is longer than this length.
• eg: http://assets.daily.taobao.net/apps/taesite/platinum/scripts/common/mods/shop/custom-banner/custom-banner.js (109 bytes)
2712年6月14日星期四