甘肃省和住房建设厅网站,官方网站首页,电子商务网站建设规划的论文,wordpress 仿聚划算目录
1、通过form表单构造HTTP请求
2、通过JS的ajax构造HTTP请求
3、Postman的安装和简单使用 常见的构造HTTP请求的方式有一下几种#xff1a; 直接通过浏览器的地址栏#xff0c;输入一个URL#xff0c;就可以构造一个GET请求HTML中的一些特殊标签#xff0c;也会触发…目录
1、通过form表单构造HTTP请求
2、通过JS的ajax构造HTTP请求
3、Postman的安装和简单使用 常见的构造HTTP请求的方式有一下几种 直接通过浏览器的地址栏输入一个URL就可以构造一个GET请求HTML中的一些特殊标签也会触发GET请求例如link、script、img、a....通过form表单标签可以实现GET和POST请求的构造通过JS中ajax实现各种请求的构造 在编写前端程序的时候通常使用HTML和JS来构造请求。再简单方便一点我们还可以使用一些工具来构造HTTP请求例如使用postman软件。
1、通过form表单构造HTTP请求
form表单标签是HTML中的一个常用标签可以用于个服务器发送GET或者POST请求。
form发送GET请求 form actionhttp://www.baidu.com/abc methodGETinput typetext nameuserIdinput typepassword namepasswordinput typesubmit value提交/form
form标签的一些属性 action表示构造的HTTP请求的URL是什么method表示构造的HTTP请求的方法是GET还是POSTform只支持HTTP方法GET和POST 下面我们来看请求构造的请求返回的页面和抓到的这个请求的报。 这里我们就来看一下我们写的代码和填写的表单与形成的请求的首行之间的联系。 form表单发送post请求
构造一个POST请求我们只需要将form表单中的method属性的值改为POST即可。 form actionhttp://www.baidu.com/abc methodPOSTinput typetext nameuserIdinput typepassword namepasswordinput typesubmit value提交/form
我们通过fiddler抓取我们构造的这个报来看一下。 可以看见我们构造的POST请求首行中没有查询字符串query string 但是请求正文中出现了我们在网页表单上填写的内容。这个时候请求头header中出现了Content-Length和Content-Type字段用来表示请求正文中的内容的长度和内容的构造格式。与GET的理解方式相似代码和输入框与POST请求的的对应关系这里就不再展示。 2、通过JS的ajax构造HTTP请求
从前端角度处理浏览器地址栏能构造GET请求form表单能构造GET和POST请求之外还可以通过ajax的方式来构造HTTP请求。当然ajax的功能比form更加强大。
ajax是Asynchronous JavaScript And XML的缩写。ajax是前端和后端异步交互的一种方式。
1️⃣这里的XML是一种基于标签形式的自定义数据格式的方式XML和HTML都是由标签构成的对于html来说它的标签数量和含义都是由标准委员会规定好的但是相对于XML来说它的标签都是自定义的。XML和前端没有关系这只是数据的一种组织方式。XML的格式如下
requestuserldzhangsan/userIdpassword12346/passwordage20/age
/request 2️⃣Asynchronous这个词的含义是异步。说到这里有没有老铁联想到synchronized它表示的是同步。
我们在加锁的场景中synchronized认为是互斥的。就是在同一时间多个线程访问同一个资源只有一个线程能够访问其他线程需要阻塞等待
在IO场景中同步和异步的区别是同步表示在请求的发起者自行获取响应。异步表示请求的发起者不关心结果而是由被请求的这一方计算成结果之后把结果推送给发起者。这个的区别就是请求发出后是否主动获取响应结果。
这里我们通过一个例子来了解一下IO场景下的同步和异步。你去餐馆吃饭给老板说老板来份油泼面然后站在窗口等老板做好之后你自己端着饭找位置坐下。而异步就是你对老板说了之后你就不管了老板把饭做好之后端到你面前来。只关注饭响应是你自己获取还是老板给你送。
3️⃣JS中提供了原生的ajax的api但是使用起来比较麻烦所以我们这里使用JQuery里面的提供ajax的api来构造HTTP请求。这里小编已经jQuery下载到了本地使用的相对地址引入的jQuery但是我们也可以找到jQuery的网络路径将其引入到代码中。在编写代码的时候使用jQuery时可以使用$符号表示jQuery也可以使用完成的单词来表示这里小编更建议使用完成的单词表示因为有的库也会使用$符号作为变量名我们在代码中如果引入了不止一个库那么就会容易出现错误。
下面时使用jQuery构造一个请求的基本格式当然ajax方法中可以设置的字段不止代码中出现的这些。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleajax/titlescript src../jquery.min.js/script
/head
bodyscriptjQuery.ajax({url:https://www.baidu.com,type:get,data:这是 body,contentType:text/plain,//此处success就声明了一个回调函数会在服务器返回一个正确的响应的时候被浏览器自动执行。//这里的执行过程就是异步的。//在我们页面的JS中把请求发送出去之后就不管了就继续执行后续的代码直到服务器将响应返回来之后//浏览器将这个响应给我们的代码之后浏览器才会执行该方法。success: function(body) {//这里写处理响应的代码alert(body);}});/script
/body
/html
这里需要了解一下回调函数回调函数就是在代码执行的时候并不会立即执行而是在等到合适的时机再执行例如在多线程中重写run方法和lambda表达式都是回调函数还有集合类中的Comparable接口中的compare To方法和Comparator接口中的compare方法在代码中使用的时候都是回调的。
将上述的代码运行给百度的服务器发送请求代码在执行的过程中会出错。 这个报错是ajax的一个典型的跨域问题这是浏览器为了限制安全问题引入的保护机制。使用ajax构造的请求要求运行ajax代码的页面的域名要和ajax里请求访问的域名是一致的两个域名不一致的话哪怕服务器给你响应了数据浏览器也不能处理还是会报错。但是form表单标签构造请求是可以跨域访问的即a网站的页面可以请求b网站的数据。
✨总结
ajax相比于form功能更强构造请求更灵活form只支持get和post两种HTTP方法而ajax不仅可以支持这两种HTTP方法还可以支持put、delete等ajax还可以灵活的设置header和body.
3、Postman的安装和简单使用
上述的重点说到的构造请求的方式不论哪一种构造请求都是需要我们手动写代码的但是这里使用的Postman在构造请求的时候他会自己生成某种语言的HTTP请求。点击这个连接就可以进入官网https://www.postman.com/downloads/下载。
点击进入官网页面之后按照下面的步骤进行就可以了。 下载完成之后需要我们自己创建一个用户创建完成之后第一次登录Postman的页面是这个样子需要点击workspaces创建一个工作空间。 点击创建一个标签页。 构造HTTP请求。 以上说到就是Postman最基本的用法还有一个好用的地方就是点击/符号它可以生成各种语言的构造HTTP请求的代码。想要使用jQuery版本的代码直接选中复制放在jQuery的代码中就可以使用前提是你在代码中引入了jQuery。
