一、浏览器端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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
