2-9 编程练习

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<title></title>
</head>

<body>
<script>
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.responseText);
}
};
xhr.open('POST',url,true);
xhr.send(`words=${encodeURIComponent('慕课')}`);
</script>
</body>
</html>

老师，请检查

为什么控制台只显示带有js的词，没有显示带‘慕课’的词？

相关截图：

另外，以下控制台network的xhr 部分为什么没有任何记录可以查看？

相关截图：

慕移动4506339 2022-09-20

源自：Ajax&Fetch 与跨域请求 2-9 编程练习

收起

1回答

好帮手慕星星 2022-09-20 09:50:26

同学你好，代码实现效果可以。

针对提问回复：

1、本题中请求地址是固定的

后端给出的地址返回数据就是包含js的

不会随着words值改变而变化。

2、这边测试xhr中是有内容的，建议检查是不是时间区间的问题

自己再测试下，祝学习下愉快！

收起回答

提问者慕移动4506339 #1

第一个回答还是不太明白，请求地址是固定，但是请求体不是可以变化的吗？我在send()里携带了数据
xhr.send(`words=${encodeURIComponent('慕课')}`);

按我的理解，因为post 可以通过请求头携带也可以通过请求体携带数据，题目中请求头上有个suggest?words=js'，请求体中我也添加了hr.send(`words=${encodeURIComponent('慕课')}`)，所以这里应该既要返回包含‘js'的词，也要返回包含‘慕课’的词才对，如果不是这样，那send（）里面携带的请求数据有什么意义？

2022-09-20 12:05:35
好帮手慕星星回复提问者慕移动4506339 #2

同学的理解是对的，但是习题给的数据接口并不是动态返回数据的，只有关于js的数据，所以即使send中设置words其他值，也不会返回相关的。
这里只是练习发送数据中文如何进行编码。

2022-09-20 15:30:41