GET请求&POST请求
GET请求
携带数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <form id="login" action="https://www.imooc.com/api/http/search/suggest" method="get">
<input type="text" name="username" />
<input type="text" name="words"/>
<input type="password" name="password"/>
<input type="submit" value="提交"/>
</form> -->
<script>
//1.携带数据
//GET请求不能通过请求体携带参数，但是可以通过请求头携带
/* const url ='https://www.imooc.com/api/http/search/suggest?words=js&username=yth&age=18';
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('GET',url,true);
xhr.send(null); */
//不会报错，但不会发送数据
//xhr.send('sex = male');
</script>
</body>
</html>
数据编码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <form id="login" action="https://www.imooc.com/api/http/search/suggest" method="get">
<input type="text" name="username" />
<input type="text" name="words"/>
<input type="password" name="password"/>
<input type="submit" value="提交"/>
</form> -->
<script>
//1.携带数据
//GET请求不能通过请求体携带参数，但是可以通过请求头携带
/* const url ='https://www.imooc.com/api/http/search/suggest?words=js&username=yth&age=18';
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('GET',url,true);
xhr.send(null); */
//不会报错，但不会发送数据
//xhr.send('sex = male');
//2.数据编码
//如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后在发送给后端，不然会造成乱码问题
//可以使用encodeURLComponent（）编码
const url ='https://www.imooc.com/api/http/search/suggest?words=${encodeURLComponent(前端)}';
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('GET',url,true);
xhr.send(null);
</script>
</body>
</html>
POST请求
携带数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST请求</title>
</head>
<form id="login" action="https://www.imooc.com/api/http/search/suggest?words=js" method="post">
<input type="text" name="username" />
<input type="password" name="password"/>
<input type="submit" value="提交"/>
</form>
<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);
//如果想发送数据，直接写在send（）参数位置，一
xhr.send('username=lyw&age=18');
//不能直接传递对象，需要先将对象转换成字符串的形式
/* xhr.send({
username:'lyw',
age:18
}); */
//【object Object】
</script>
</body>
</html>
数据编码
//2.数据编码
xhr.send('username=${encodeURLComponent('张三')}&age=18');
浙公网安备 33010602011771号