HTTP—03

触发 GET 请求

1）直接在浏览器地址栏输入 URL，此时构成了一个GET请求

2）HTML中的一些特殊标签可能会触发

例如 img,a,link,script...

3）通过Form表单触发（Form本质也是一个HTML标签）

4）ajax的方式

构造HTTP请求

1）Form表单的形式

VSCode

编写前端代码，可以选择 VSCode——>安装途径

Visual Studio Code - Code Editing. Redefined

https://i-blog.csdnimg.cn/direct/a15abdb1f982443da0066a1abc3665ad.png" width="370" />

https://i-blog.csdnimg.cn/direct/2ee22cb38cc742cc8918d137260cf22e.png" width="769" />

！<tab> 会自动生成基本的HTML代码模版

https://i-blog.csdnimg.cn/direct/6d30126a8f4f40c0be3e01eb77b507df.png" width="923" /><html> </html>结束的标志

head 中是属性

body 中是页面显示的内容

HTML中标签的含义都是标准规定的

浏览器对于HTML来说具有一定的鲁棒性

即使给出不规范的代码，也可以进行解析显示（浏览器会尽可能进行显示）

form表单的编写

https://i-blog.csdnimg.cn/direct/97a8c88d32034c89bfe5ccddd21d998c.png" width="303" />

开始标签中可以写属性（键值对），可以有多个属性

键值对之间用空格分割，键和值之间用 = 分割

键不需要有引号，值需要有引号

action=“ ” 填写要访问的请求的URL路径（可以带上IP和端口号）

https://i-blog.csdnimg.cn/direct/3e7268da93d14195a3a8ea55d814529e.png" width="397" />

method 属性描述了当前要构造的请求（form只支持GET和POST）

https://i-blog.csdnimg.cn/direct/ed17d8e208ba4b5d8f243b2a78ea2ecd.png" width="566" />

设置一个按钮

https://i-blog.csdnimg.cn/direct/43b1e5355e8f438fbe00124a79f28766.png" width="908" />

此时请求已经构成，但是想要有响应就需要服务器的配合了

2）ajax的方式

form会触发页面跳转

ajax通过js提供的API构造HTTP请求，对于拿到的响应，同样可以使用ja处理，决定是否跳转

浏览器原生提供了ajax的API，但是比较难用

一些第三方库封装了ajax，此处使用 jquery 库封装的ajax

1）引入jquery库（在代码中写一个库的地址即可）

jQuery CDN

2）编写代码

https://i-blog.csdnimg.cn/direct/18c5c0e76b8547ea9363464d9b65f1a1.png" width="237" />

$ 是一个变量名（全局变量，在jquery中定义），通过这个变量调用一些方法，使用jQuery的API

js中 {} 表示对象

{} 里面是使用键值对的方式来描述“属性名”和“属性值”的

postman

Download Postman | Get Started for Free

https://i-blog.csdnimg.cn/direct/69619e14097a4640a3d6ec399e5ea301.png" width="283" />

form和ajax都是用代码构造的，是前端的范围

此处使用postman（图形化界面构造）比较简单

https://i-blog.csdnimg.cn/direct/f4449c55b5da4d0dba3c29047463d7d7.png" width="1200" />

点击右侧加号，可以创建标签页，在标签页内构造具体的请求细节

https://i-blog.csdnimg.cn/direct/8826e310ff90430097d6754cf12768bf.png" width="344" />

https://i-blog.csdnimg.cn/direct/44dd9d2cae4e46d7b0337a072aa1936b.png" width="211" /> 设置方法

https://i-blog.csdnimg.cn/direct/213efe6c3c424146810b8d86bb90f444.png" width="759" />

设置URL

https://i-blog.csdnimg.cn/direct/652a4493bb294e31934836c5fd297eaa.png" width="156" /> 设置请求Header

https://i-blog.csdnimg.cn/direct/2bd0740ff4d34268918279ad31e3e0eb.png" width="82" /> 设置请求body

https://i-blog.csdnimg.cn/direct/1ae9fbe057e14c2c8defdcbdc69bf0fe.png" width="372" /> 此处可自动生成ajax等格式

https://i-blog.csdnimg.cn/direct/8d2ec6cf250f4152988d6825c965f82e.png" width="1200" />