如何構(gòu)造http請(qǐng)求

對(duì)于Get請(qǐng)求:

1. 地址欄直接輸入
2. 點(diǎn)擊收藏夾
3. html 中的 link script img a…
4. form 標(biāo)簽

這里我們重點(diǎn)強(qiáng)調(diào) form 標(biāo)簽構(gòu)造的 http請(qǐng)求

使用 form 標(biāo)簽構(gòu)造http請(qǐng)求.

 <!-- 表單標(biāo)簽, 允許用戶和服務(wù)器之間交互數(shù)據(jù) -->
  <form action="https://www.leetcode.com" method="get">
    <input type="text" name="studentName">
    <!--input type="submit" 構(gòu)造了一個(gè)特殊的提交按鈕. vlaue 屬性描述了按鈕中的文本-->
    <!-- 點(diǎn)擊這個(gè)按鈕就會(huì)觸發(fā) form 表單中的"提交操作" -->
    <input type="submit" value="提交">
  </form>

form 的重要參數(shù):

• action: 構(gòu)造 http 請(qǐng)求的 URL 是什么
• method:構(gòu)造 http 請(qǐng)求的方法是 GET 還是 POST(form 僅支持 GET 和 POST)

input 的重要參數(shù):

• type:表示輸入框的類型 , text 表示文本 , password 表示密碼 , submit 表示提交按鈕
• name: 表示構(gòu)造出 http 請(qǐng)求的 query string 里的 key. query string 里的value 就是用戶輸入框中的內(nèi)容
• value: input 標(biāo)簽的值 , 對(duì)于 type 為 submit 類型來說 , value 就對(duì)應(yīng)了按鈕上顯示的文本.

將構(gòu)造好的請(qǐng)求提交給 leetcode 服務(wù)器(leetcode 不會(huì)處理該請(qǐng)求, 因此也不會(huì)對(duì)該請(qǐng)求作出響應(yīng))

然后用 fiddler 抓包查看詳細(xì)過程.

再看看post請(qǐng)求的抓包結(jié)果:

明顯可以看到和 GET 請(qǐng)求的報(bào)文有所區(qū)別:

1. POST 請(qǐng)求首行沒有 query string
2. POST 請(qǐng)求多了正文(body) , 且query string 在 body 中.

但 form 標(biāo)簽構(gòu)造請(qǐng)求有其局限性 , 就是只能構(gòu)造 GET 和 POST 請(qǐng)求 , 因此我們引入Ajax.

使用 Ajax 構(gòu)造 http 請(qǐng)求

ajax 全稱 Asynchronous Javascript And XML , 是一種 JavaScript 給服務(wù)器發(fā)送 http 請(qǐng)求的方式

特點(diǎn)是可以不需要 刷新頁面/頁面跳轉(zhuǎn) 就能進(jìn)行數(shù)據(jù)傳輸

JavaScript 中可以通過 ajax 的方式構(gòu)造 http 請(qǐng)求

Asynchronous 異步是指 , 一行代碼執(zhí)行"發(fā)送請(qǐng)求" 操作之后 , 不必等待服務(wù)器響應(yīng)回來 , 就可以立即先往下執(zhí)行 , 當(dāng)服務(wù)響應(yīng)回來之后 , 在由瀏覽器通知到我們代碼中.

代碼中如果使用 ajax

1. js 原生的 ajax 的 api , 較為難用
2. jquery 中提供的 ajax api , 針對(duì)原生的 api 的封裝 , 簡單很多

jquery 的下載網(wǎng)址:

https://www.bootcdn.cn/jquery/

引入 jquery 較為方便的辦法就是直接 復(fù)制鏈接 到script 標(biāo)簽中.

 <!-- 引入 jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>

jquery 中 $ 是一個(gè)特殊的全局變量.

jquert 中的 api 都是以 $ 方法法形式引出 , 其中只有一個(gè)參數(shù) , 是一個(gè) js 對(duì)象({} 表示的鍵值對(duì))

$.ajax();

 <!-- 引入 jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    $.ajax({
      type: 'get',
      url: 'http://www.leetcode.com?studentName=zhangsan',
      // 此處 success 就聲明了一個(gè)回調(diào)函數(shù) , 就會(huì)在服務(wù)器響應(yīng)返回到瀏覽器的時(shí)候觸發(fā)該回調(diào)
      // 正數(shù)此處的 回調(diào) 體現(xiàn)了 "異步"
      success: function(data){
        console.log("當(dāng)服務(wù)器返回的響應(yīng)到達(dá)瀏覽器之后 , 瀏覽器會(huì)觸發(fā)該回調(diào) , 通知到我們的代碼中");
      }
    });
  </script>
 console.log("瀏覽器立即往下執(zhí)行后續(xù)代碼");

Tips: 上述代碼構(gòu)造的請(qǐng)求 , 只能看到請(qǐng)求 , 無法獲取到正確的響應(yīng) , 因?yàn)?leetcode 服務(wù)器并沒有處理我們的請(qǐng)求 , 因此在控制臺(tái)會(huì)發(fā)生報(bào)錯(cuò).(相當(dāng)于在火鍋店吃炒菜)

和 form 相比 ajax 功能更強(qiáng)

1. 支持put , delete 等方法
2. ajax 發(fā)送的請(qǐng)求可以靈活設(shè)置 header 和 body

構(gòu)造 http 請(qǐng)求測試

通過上述學(xué)習(xí) , 可以發(fā)現(xiàn)無論是 form 還是 ajax 構(gòu)造請(qǐng)求的代碼書寫起來都不是很便捷 , 如果用代碼來構(gòu)造大量的 http 請(qǐng)求 , 顯然是很麻煩的. 因此我們可以使用 第三方免費(fèi)工具 postman 來向服務(wù)器發(fā)送測試請(qǐng)求.

除了手動(dòng)構(gòu)造之外 , postman 還有一個(gè)非常牛逼的功能 , 可以生成構(gòu)造請(qǐng)求的代碼 , 方便我們?cè)诔绦蛑屑?

文章來源地址http://www.zghlxwxcb.cn/news/detail-412868.html

到了這里，關(guān)于高效便捷構(gòu)造 Http 請(qǐng)求的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！