本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章,第9.21节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看
jQuery Mobile在发起AJAX请求的背后使用了许多实用函数(utility function)。为了方便起见,这些实用函数也是可以复用的。代码清单9-25演示了为自己的目的而使用与URL相关的实用函数。
代码清单9-25 使用parseUrl()函数读取URL
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>URL Utilities</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 <script> 15 $(document).ready(function() { 16 17 $('#parse').on('click', function() { 18 19 var url = 'http://user:password@www.pearsonhighered.com' + 20 ':80/educator/series/Developers-Library' + 21 '/10483.page?key=value#first-id'; 22 23 var parsedUrl = 24 JSON.stringify( 25 $.mobile.path.parseUrl(url) 26 ) 27 .replace(/,/g, ',<br>'); 28 $('#output').html(parsedUrl); 29 }); 30 $('#absolutepath').on('click', function() { 31 32 $('#output').html( 33 $.mobile.path.makePathAbsolute( 34 'newfile.html', 35 '/root/path/oldfile.html' 36 ) 37 ); 38 }); 39 $('#absoluteurl').on('click', function() { 40 41 $('#output').html( 42 $.mobile.path.makeUrlAbsolute( 43 'newfile.html', 44 'http://www.domain.com/root/path/oldfile.html' 45 ) 46 ); 47 }); 48 $('#isabsolute').on('click', function() { 49 50 $('#output').html('isAbsoluteUrl=' + 51 $.mobile.path.isAbsoluteUrl( 52 'http://www.domain.com/root/path/oldfile.html' 53 ) 54 ); 55 }); 56 $('#isrelative').on('click', function() { 57 58 $('#output').html('isRelativeUrl=' + 59 $.mobile.path.isRelativeUrl( 60 'http://www.domain.com/root/path/oldfile.html' 61 ) 62 ); 63 }); 64 $('#samedomain').on('click', function() { 65 66 $('#output').html('isSameDomain=' + 67 $.mobile.path.isSameDomain( 68 'http://www.domain.com/root/path/oldfile.html', 69 'http://www.domain.com/root/path/newfile.html' 70 ) 71 ); 72 }); 73 }); 74 </script> 75 </head> 76 <body> 77 78 <div data-role="page"> 79 80 <div data-role="header"> 81 <h1>URL Utilities</h1> 82 </div> 83 84 <div data-role="content"> 85 <a href="#" id="parse" data-role="button">Parse URL</a> 86 <a href="#" id="absolutepath" data-role="button">Make Path 87 Absolute</a> 88 <a href="#" id="absoluteurl" data-role="button">Make URL 89 Absolute</a> 90 <a href="#" id="isabsolute" data-role="button">Is Absolute 91 Url</a> 92 <a href="#" id="isrelative" data-role="button">Is Relative 93 Url</a> 94 <a href="#" id="samedomain" data-role="button">Is Same 95 Domain</a> 96 97 <p id="output">Placeholder for the output</p> 98 </div> 99 100 </div> 101 102 </body> 103 </html>上面的示例代码是多种实用函数的聚集。让我们一个一个地来讨论它们。
第25行演示了parseUrl()函数。它是一个从URL字符串读取多个部分信息的便捷函数。该函数返回一个对象。在这个示例中,它是字符串形式的JSON,为可读性的需要在每个逗号后面添加了一个换行。表9-3列出了parseUrl()函数的返回值。第33~36行演示了makePathAbsolute()函数。当你拥有的是相对路径(可以是文件名、路径名、两者的混合体或者可能以../开始的值)时,可以和一个绝对路径一起使用,然后计算出新的绝对路径。
第42~45行做了相同的事情,只是它是使用makeUrlAbsolute()函数来操作URL。类似地,第51~53行通过使用isAbsoluteUrl()函数,可以检查字符串来判断它是否为绝对URL。第59~61行演示了isRelativeUrl()函数,这个函数做的工作恰好相反。
第67~70行使用isSameDomain()函数来检查两个URL是否指向相同的域名。该函数在想判断是否能用AJAX请求时会很有用。它通过比较传递参数的协议还有域名,来判断它们是否在同一个域中。该函数还会比较子域名。
相关资源:虚拟网卡tap_Windows_9.21.2.exe.7z