浏览器端URL路径

一、浏览器端HTTP请求的方式

			 
		 1) 通过地址栏发送GET请求
		 2) 通过a标签发送GET请求
		 
		 3) 通过form表单发送GET请求、POST请求
		 4) 通过Ajax发送GET请求、POST请求
	
	

二、浏览器端URL路径【绝对路径、相对路径】

1.1 绝对路径

	
	1、绝对路径一般来说主要有两种形式:
	
		1) 完整的磁盘路径:
			     D:\mytest\web\images\pic.jpg是一个绝对路径。它代表图片在磁盘中的位置。
			     不过在web中很少使用此种形式的绝对路径。
			
		2) 完整的url路径:			
				 http://www.softwhy.com/images/pic.jpg也是一个绝对路径。它虽然看没有描述文件的完整路径，其实不然，域名会指向磁盘的一个目录。
				 那么一个带有域名的url地址也是一个绝对路径。

	<a href="http://localhost:3030/test">蚂蚁部落欢迎您</a>

1.2 相对路径

	 
	1、相对路径首先要确定一个路径参考点，其他文件的路径都是相对于当前文件位置来确定的，
	
	 
	2、相对路径语法：
			1）/ 		代表根目录。
							在服务器端, /代表WebRoot根目录
							在HTML中, /代表  http://域名:端口/

			2）./		表示当前目录，在HTML中，可以省略。
			
			3）../		代表当前文件所在目录的上一级目录。			
			4）../../	代表当前文件所在目录的上上级目录。
			5）../.../../  可以依次类推。
	
	3、注意:
			1) 在浏览器端使用相对路径，浏览器在请求时，会自动补充为完整路径。
			2) 在浏览器端 / 代表 【http://域名:端口/】
			3) 在浏览器端 ./可以省略不写。
				  

1）相对路径

同级目录下的文件，例如从ah-1.html文件链接到ah-2.html文件

	<a href="ah-2.html">蚂蚁部落欢迎您</a>

下级目录下的文件，例如从bh-1.html文件链接到bh-1-1.html文件

	<a href="b-1/bh-1-1.html">蚂蚁部落欢迎您</a>

上级目录下的文件，例如从bh-1-1.html文件连接到bh-1.html文件

	<a href="../bh-1.html">蚂蚁部落欢迎您</a>

上上级目录下的文件，例如从ah-1-1-1.html文件链接到ah-1.html文件

	<a href="../../ah-1.html">蚂蚁部落欢迎您</a>

使用/可以直接回到根目录下

		<a href="/b/b-1/ah-1.html">蚂蚁部落欢迎您</a>

2）相对路径注意事项

>>>>>> 在浏览器端使用相对路径，浏览器在请求时，会自动补充为完整路径

	
	在浏览器端使用相对路径,
	点击链接，浏览器会自动补充为完整路径
  				  <a href="index.html">xxx</a>
  			  

>>>>>> 在浏览器端 / 代表 【http://域名:端口/】

	
	在浏览器端/代表【http://域名:端口/】。
	点击链接，浏览器会自动补充为完整路径。
	
    	<a href="/index.html">xxx</a>

>>>>>> 在浏览器端 ./ 代表 【当前目录】，可省略不写

	在浏览器端 ./ 代表 当前目录，可省略不写。
	所以这两种方式等价。
    		
    		<a href="index.html">xxx</a>
    		<a href="./index.html">xxx</a>
    		

1.3 浏览器端URL路径案例

1）ajax请求URL

>>>>>> ./ 表示当前目录。可省略不写

在 【Demo/t1/index.html】 中访问testJq或 ./testJq，浏览器自动补充完整路径为http://localhost:3030/Demo/t1/testJq

  	$.ajax({
            url:"testJq",
            data:'xxxx',
            success:function(data){
				console.log(data)            
            },
            error:function(){
                alert("解析报错")
            }
        })

  	$.ajax({
            url:"./testJq",
            data:'xxxx',
            success:function(data){
				console.log(data)            
            },
            error:function(){
                alert("解析报错")
            }
        })

>>>>>> / 表示根目录。在浏览器中代表【http://域名:端口/】

在 【Demo/t1/index.html】 中访问/testJq，浏览器自动补充完整路径为http://localhost:3030/Demo/testJq

  	$.ajax({
            url:"/testJq",
            data:'xxxx',
            success:function(data){
				console.log(data)            
            },
            error:function(){
                alert("解析报错")
            }
        })

>>>>>> 绝对路径

  	$.ajax({
            url:"http://32.13.14.22:8888/testJq",
            data:'xxxx',
            success:function(data){
				console.log(data)            
            },
            error:function(){
                alert("解析报错")
            }
        })

2）a标签请求URL

>>>>>> ./ 表示当前目录。可省略不写

在 【Demo/t1/index.html】 中访问index2.html 或 ./index2.html，浏览器自动补充完整路径为http://localhost:3030/Demo/t1/index2.html

    <a href="index2.html">xxx</a>

    <a href="./index2.html">xxx</a>

>>>>>> / 表示根目录。在浏览器中代表【http://域名:端口/】

在 【Demo/t1/index.html】 中访问index2.html，浏览器自动补充完整路径为http://localhost:3030/index2.html

    <a href="/index2.html">xxx</a>

>>>>>> 绝对路径

    <a href="http://32.13.14.22:8888/cc/index.html">xxx</a>

3）资源链接路径

在 【Demo/index.html】 中引入【Demo/jq/jquery-1.12.4.js】

	<script type="text/javascript" src="jq/jquery-1.12.4.js"></script>

	<script type="text/javascript" src="./jq/jquery-1.12.4.js"></script>

在 【Demo/index.html】 中引入【/jq/jquery-1.12.4.js】

	<script type="text/javascript" src="/jq/jquery-1.12.4.js"></script>

绝对路径

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>