一，form表單構(gòu)造
form表單中重要參數(shù)：
action：構(gòu)造的HTTP請(qǐng)求的URL是什么
method：構(gòu)造的HTTP請(qǐng)求的方法是GET還是POST（ form只支持GET和POST）
input標(biāo)簽中的重要參數(shù)：
type：表示輸入框的類(lèi)型，text表示文本，password表示密碼
name：表示構(gòu)造的HTTP請(qǐng)求的query string中的key，query string的value則是用戶(hù)輸入的值
value：input的標(biāo)簽值，對(duì)于type為submit類(lèi)型來(lái)說(shuō)，value則是對(duì)應(yīng)了按鈕上顯示的文本
1.發(fā)送GET請(qǐng)求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<form action="http://www.sogou.com" method="get">
<input type="text" name="text">
<input type="password" name="password">
<!-- input type=submit 構(gòu)造了一個(gè)特殊的 提交 按鈕 value屬性描述了按鈕中的文本 -->
<!-- 點(diǎn)擊這個(gè)按鈕就會(huì)觸發(fā)該 form 表單的"提交操作" 也就是構(gòu)造http請(qǐng)求發(fā)送給服務(wù)器 -->
<input type="submit" value="提交">
</form>
</body>
</html>頁(yè)面效果如下：
假設(shè)輸入內(nèi)容為：text=1234 password：111111
抓包后的詳細(xì)數(shù)據(jù)（此時(shí)請(qǐng)求中的body為空）：
2.發(fā)送POST請(qǐng)求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<form action="http://www.sogou.com" method="post">
<input type="text" name="text">
<input type="password" name="password">
<!-- input type=submit 構(gòu)造了一個(gè)特殊的 提交 按鈕 value屬性描述了按鈕中的文本 -->
<!-- 點(diǎn)擊這個(gè)按鈕就會(huì)觸發(fā)該 form 表單的"提交操作" 也就是構(gòu)造http請(qǐng)求發(fā)送給服務(wù)器 -->
<input type="submit" value="提交">
</form>
</body>
</html>按照GET請(qǐng)求同樣的操作進(jìn)行輸入：
抓包后的詳細(xì)數(shù)據(jù)（輸入的內(nèi)容存儲(chǔ)在請(qǐng)求的body中）：
3.請(qǐng)求和HTTP請(qǐng)求之間的關(guān)系
form的action屬性對(duì)應(yīng)HTTP請(qǐng)求的URL
form的method屬性對(duì)應(yīng)HTTP請(qǐng)求的方法
input的name屬性對(duì)應(yīng)queryString的key
input的內(nèi)容對(duì)應(yīng)queryString的value
4.不同請(qǐng)求之間的區(qū)別
GET請(qǐng)求用戶(hù)輸入的內(nèi)容會(huì)被構(gòu)造成在query string中進(jìn)行傳輸，為鍵值對(duì)結(jié)構(gòu)；
POST請(qǐng)求用戶(hù)輸入的內(nèi)容會(huì)被構(gòu)造成在請(qǐng)求的body中進(jìn)行傳輸，為鍵值對(duì)結(jié)構(gòu).
二，ajax構(gòu)造
ajax構(gòu)造HTTP請(qǐng)求的方式比f(wàn)orm的功能更加強(qiáng)大，ajax不僅可以構(gòu)造GET和POST請(qǐng)求，也可以構(gòu)造PUT,DELETE,OPTIONS等方法的請(qǐng)求；ajax基于異步（ 異步即當(dāng)瀏覽器給服務(wù)器發(fā)送完請(qǐng)求操作之后，不需要一直等待服務(wù)器響應(yīng)之后再繼續(xù)執(zhí)行后續(xù)操作，而是可以先往下執(zhí)行，執(zhí)行的過(guò)程中等待服務(wù)器響應(yīng)完，當(dāng)服務(wù)器給出響應(yīng)之后，再執(zhí)行代碼內(nèi)部的回調(diào)函數(shù)）等待的機(jī)制.
1.ajax引入jquery
代碼中如何使用ajax：
js原生提供的ajax api，但是原生的api特別難用（一般不用）；
jquery提供的ajax api，該api是針對(duì)原生api的封裝，較為簡(jiǎn)單（用的較多）
引入jquery cdn：
下載jquery cdn（網(wǎng)址：https://www.bootcdn.cn/jquery/）
選擇.min.js并復(fù)制鏈接
3.打開(kāi)鏈接并復(fù)制頁(yè)面中的所有內(nèi)容
4.創(chuàng)建一個(gè)js文件將剛剛復(fù)制的內(nèi)容進(jìn)行粘貼
5.代碼中引入該js文件
注意：
這里也可以直接引入第二步中的.min.js的鏈接，如下：
但是該方法有一個(gè)缺點(diǎn)，當(dāng)該.min.js網(wǎng)址轉(zhuǎn)移時(shí)，次此鏈接就會(huì)失效
2.ajax構(gòu)造請(qǐng)求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入 jquery -->
<script src="jquery.js"></script>
<script>
$.ajax({
type: 'get',
url: 'https://www.sougou.com?studentName=zhangsan',
//此處success就聲明了一個(gè)回調(diào)函數(shù)，就會(huì)在服務(wù)器響應(yīng)返回到瀏覽器的時(shí)候觸發(fā)該回調(diào)
//正是此處的回調(diào)體現(xiàn)了 "異步"
success: function(data) {
//data是響應(yīng)的正文部分
console.log("服務(wù)器響應(yīng)成功,執(zhí)行回調(diào)函數(shù)");
},
error: function() {
console.log("服務(wù)器響應(yīng)失?。?);
}
});
console.log("瀏覽器立即往下執(zhí)行后續(xù)代碼");
</script>
</body>
</html>執(zhí)行代碼，打開(kāi)控制臺(tái)觀察：
控制臺(tái)先打印的最后一句話，可見(jiàn)ajax的異步機(jī)制，在發(fā)送完請(qǐng)求之后不會(huì)等待服務(wù)器響應(yīng)，而是會(huì)先執(zhí)行后續(xù)代碼；
如果響應(yīng)成功就會(huì)執(zhí)行success里的回調(diào)函數(shù)，否則就會(huì)執(zhí)行error里的回調(diào)函數(shù)；文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-752753.html
這里響應(yīng)失敗的原因是，搜狗服務(wù)器并沒(méi)有對(duì)ajax構(gòu)造的請(qǐng)求進(jìn)行處理，因?yàn)樗压贩?wù)器和本地的瀏覽器之間的交互屬于跨域訪問(wèn)，交互失敗.文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-752753.html
到了這里，關(guān)于通過(guò)form表單，ajax構(gòu)造HTTP請(qǐng)求的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
