DIFFERENCE BETWEEN     QUERY STRING & HASH12年6月14日星期四                1
In JavaScript, the fragment identifier of the current HTML or   XHTML page can be accessed in the "hash" property   locatio...
Common12年6月14日星期四   3
• They are both the part of a Uniform     Resource Locator (URL)       – http://server/path/program?query_string#fragment_...
Difference12年6月14日星期四     5
delimiter [difference]12年6月14日星期四                 6
• query string: & = ; ? #       – ? #: separator and not part of the query string       – & =: separator and part of the q...
url encoding[difference]12年6月14日星期四                   8
depended object [difference]12年6月14日星期四                       9
• Query string depend on the URI scheme    – e.g., http: supports queries unlike ftp:. • Fragment identifier depend on the...
evaluated object [difference]12年6月14日星期四                        11
• Query string is evaluated by the server  • Fragment identifier is evaluated by the    client (Web browser).  • url hash不...
use12年6月14日星期四   13
• query string:       – can be used to contain the content of an         HTML form       – tracking: be passed to the prog...
• fragment identifiers:       – refers to a resource that is subordinate to another,         primary resource. The primary ...
• cross-domain pass parameters       – iframe adaptive height problem when cross         domain       – get img url when c...
function setHash(a){   !    $.browser.msie?$.locationHash(a):location.hash=a;   }   $(window).hashchange(function(){   !  ...
• apply kissy mvc router in shop     category manager       – url: siteadmin.daily.taobao.net/category/         auction.ht...
– examples:          • kissy, mvc, router          • Gmail uses a single URL for almost every interface – mail boxes,     ...
does url length has impact on   page load speed?12年6月14日星期四                        20
第一等级的优化,70字节    如何计算的呢?                  2112年6月14日星期四            21
Refer: http://blog.csdn.net/aimingoo/article/details/6081964 - ncz                                                        ...
what http header include?                               2312年6月14日星期四                         23
• http 请求头部信息12年6月14日星期四        24
•    资源文件的get请求http头部的最大长度是496字节   •    http头部包含两大部分:         ★ 可缺省的: 占 184字节         ★ 必须的:占496-184 = 312字节, 包含:get , use...
use12年6月14日星期四   26
• But with 78 bytes url, what we can do is very little. One     common url is longer than this length.   • eg: http://asse...
Upcoming SlideShare
Loading in …5
×

difference between query string and hash

29,495 views

Published on

在使用开放平台的oauth授权时,我们发现ie6下页面回跳总是会丢失hash
那么hash和querystring这两个看起来很像的东西到底有什么区别呢?
在前端mvc日益流行的今天,使用hash来做路由又会有什么隐患?
本章将为你解开她们的面纱

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
29,495
On SlideShare
0
From Embeds
0
Number of Embeds
26,723
Actions
Shares
0
Downloads
85
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

difference between query string and hash

  1. 1. DIFFERENCE BETWEEN QUERY STRING & HASH12年6月14日星期四 1
  2. 2. In JavaScript, the fragment identifier of the current HTML or XHTML page can be accessed in the "hash" property location.hash12年6月14日星期四 2
  3. 3. Common12年6月14日星期四 3
  4. 4. • They are both the part of a Uniform Resource Locator (URL) – http://server/path/program?query_string#fragment_identifier Refer: http://en.wikipedia.org/wiki/Query_string 412年6月14日星期四 4
  5. 5. Difference12年6月14日星期四 5
  6. 6. delimiter [difference]12年6月14日星期四 6
  7. 7. • 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_string12年6月14日星期四 7
  8. 8. url encoding[difference]12年6月14日星期四 8
  9. 9. depended object [difference]12年6月14日星期四 9
  10. 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日星期四 10
  11. 11. evaluated object [difference]12年6月14日星期四 11
  12. 12. • Query string is evaluated by the server • Fragment identifier is evaluated by the client (Web browser). • url hash不会发送至服务端 • url hash的变更不会引起网络请求 1212年6月14日星期四 12
  13. 13. use12年6月14日星期四 13
  14. 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_string12年6月14日星期四 14
  15. 15. • 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_identifier12年6月14日星期四 15
  16. 16. • cross-domain pass parameters – iframe adaptive height problem when cross domain – get img url when cross domain12年6月14日星期四 16
  17. 17. 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"); ! }); }12年6月14日星期四 17
  18. 18. • 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=17499212年6月14日星期四 18
  19. 19. – 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]12年6月14日星期四 19
  20. 20. does url length has impact on page load speed?12年6月14日星期四 20
  21. 21. 第一等级的优化,70字节 如何计算的呢? 2112年6月14日星期四 21
  22. 22. Refer: http://blog.csdn.net/aimingoo/article/details/6081964 - ncz 2212年6月14日星期四 22
  23. 23. what http header include? 2312年6月14日星期四 23
  24. 24. • http 请求头部信息12年6月14日星期四 24
  25. 25. • 资源文件的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 - ncz12年6月14日星期四 25
  26. 26. use12年6月14日星期四 26
  27. 27. • 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)12年6月14日星期四 27

×