目錄
1. ajax簡(jiǎn)述
2. ajax構(gòu)造HTTP請(qǐng)求
2.1 jquery庫的引入
2.2 ajax構(gòu)造HTTP請(qǐng)求格式
3. ajax構(gòu)造GET請(qǐng)求實(shí)例
4. ajax構(gòu)造POST請(qǐng)求實(shí)例
本專欄關(guān)于form表單構(gòu)造HTTP請(qǐng)求一文中已經(jīng)提到：form表單構(gòu)造法只支持GET和POST，且會(huì)觸發(fā)頁面跳轉(zhuǎn)。
原文詳情鏈接如下：
【JavaEE】_form表單構(gòu)造HTTP請(qǐng)求-CSDN博客
為了解決這兩個(gè)問題，又引出了ajax構(gòu)造HTTP請(qǐng)求的方法：
1. ajax簡(jiǎn)述
1.ajax本質(zhì)是用js提供的API來構(gòu)造HTTP請(qǐng)求。
同時(shí)對(duì)于服務(wù)器返回給客戶端的響應(yīng)，同樣可以使用js靈活處理，給前端代碼帶來了更多的可操作空間；
2. 當(dāng)今網(wǎng)站的的主體都是通過ajax的方式進(jìn)行交互的;
3. 瀏覽器原生也提供了ajax的API，但并不方便實(shí)用，步驟繁瑣。因此有一些第三方庫封裝了ajax，本專欄使用 jquery 庫封裝的ajax；
2. ajax構(gòu)造HTTP請(qǐng)求
2.1 jquery庫的引入
可從以下鏈接引入jquery庫：
https://www.bootcdn.cn/jquery/
操作如下：
2.2 ajax構(gòu)造HTTP請(qǐng)求格式
1. $ 是一個(gè)jquery定義的全局變量名，可以通過這個(gè)變量調(diào)用一些方法，使用jquery中的API；
2. $.ajax();中傳遞的參數(shù)是一個(gè)對(duì)象，在js中，{}表示一個(gè)對(duì)象，在{}內(nèi)部使用鍵值對(duì)描述屬性名與屬性值：
3. 對(duì)象的屬性值可以是一個(gè)函數(shù)，比如可以寫為：
<script>
// 此時(shí)函數(shù)名就為callback
function callback(body){
}
$.ajax({
type: 'get',
url: 'https://www.sogou.com/abc.html',
success:callback,
});
</script>但是這種寫法并不常見，通常會(huì)使用匿名函數(shù)的形式：
<script>
$.ajax({
type: 'get',
url: 'https://www.sogou.com/abc.html',
success:function(body){
}
});
</script>此處函數(shù)并不是立即返回的，而是服務(wù)器返回200這樣的響應(yīng)時(shí)才會(huì)執(zhí)行到success，即：
success執(zhí)行時(shí)機(jī)不是程序員自己能控制的，而是在合適的時(shí)候自動(dòng)被調(diào)用的，這樣的函數(shù)被稱為回調(diào)函數(shù)；
常見的回調(diào)函數(shù)還有：函數(shù)指針，Comparable和Comparator，compareTo，compare函數(shù)，線程中的run方法等等；
4. 函數(shù)的參數(shù)為body即HTTP響應(yīng)的body內(nèi)容，為了方便調(diào)試，通常會(huì)使用console.log對(duì)body進(jìn)行打?。?/p>
5.? 此時(shí)構(gòu)造的get請(qǐng)求沒有query string，可以直接進(jìn)行拼接，如：
<script>
let value1 = '1';
$.ajax({
type: 'get',
url: 'https://www.sogou.com/abc.html?' + 'key1='+value1,
success:function(body){
console.log(body);
}
});
</script>注意js的定義變量直接使用let進(jìn)行定義，變量具體類型是根據(jù)=后面初始化的值的類型來確定的；
3. ajax構(gòu)造GET請(qǐng)求實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<!-- 1. 引入jquery庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 2. 再引入一個(gè)script標(biāo)簽用于編寫自定義內(nèi)容 -->
<script>
let value1 = '1';
$.ajax({
type: 'get',
url: 'https://www.sogou.com/abc.html?' + 'key1='+value1,
success:function(body){
console.log(body);
}
});
</script>
</body>
</html>運(yùn)行程序；
可以使用Fiddler抓包查看請(qǐng)求與響應(yīng)詳情：
HTTP請(qǐng)求：
HTTP響應(yīng)：
4. ajax構(gòu)造POST請(qǐng)求實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<!-- 1. 引入jquery庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 2. 再引入一個(gè)script標(biāo)簽用于編寫自定義內(nèi)容 -->
<script>
let body = {
key1: 1,
key2: 2
};
$.ajax({
type: 'post',
contentType: "application/json",
data: JSON.stringify(body),
url: 'https://www.sogou.com/abc.html',
success:function(body){
console.log(body);
}
});
</script>
</body>
</html>注：1. JSON.stringfy()可以將一個(gè)js對(duì)象轉(zhuǎn)成一個(gè)JSON格式的字符串，即把前文的body對(duì)象轉(zhuǎn)為了JSON格式的字符串data；
2.注意ajax構(gòu)造post請(qǐng)求與構(gòu)造get請(qǐng)求的不同，包括body部分的對(duì)象需轉(zhuǎn)為JSON格式字符串，無需url的query string部分等等；文章來源：http://www.zghlxwxcb.cn/news/detail-836092.html
3. 此例為ajax構(gòu)造的POST請(qǐng)求發(fā)送給搜狗服務(wù)器，但并不是所有的路徑都支持ajax的POST請(qǐng)求，此例僅用于展示ajax構(gòu)造POST請(qǐng)求的格式。后續(xù)自行完成服務(wù)器的編寫才可以實(shí)現(xiàn)相應(yīng)的服務(wù)器配合；文章來源地址http://www.zghlxwxcb.cn/news/detail-836092.html
到了這里，關(guān)于【JavaEE】_ajax構(gòu)造HTTP請(qǐng)求的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
