get请求和post请求的区别:
1. get请求的参数, 会拼接在地址栏的后面, 但是 post 请求不会的
2. get请求参数会暴露, 相对不安全, post相对安全
3. get请求的参数在地址栏中, 地址栏的长度是有限制的, 不能提交大量的数据, 但是 post 可以提交大量的数据
4. get请求传输速率快!!
5. 一般从服务器获取数据, 一般用 get ，但是如果是提交给服务器数据, 去修改内容等, 一般用 post
get案例的演练
html代码：
<style>
div {
400px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<button>发送get请求</button>
<div>
</div>
js的原生代码：
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function() {
// 1. 创建 ajax 对象
var xhr = new XMLHttpRequest();
// 2. 发送请求 get
// 请求行, get请求的参数拼接在地址栏中
xhr.open('get', '07.php?username=pp&password=123456');
// 请求头, get 不用设置
xhr.send(null); // get请求没有请求体, 直接send
// 3. 处理响应 readyState 就标记了 ajax对象的状态
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// 响应接收完成了
// console.log(xhr.responseText);
// div.innerText = xhr.responseText;
// 响应报文: 状态行 响应头 响应体
// console.log(xhr.responseText); // 响应体
// 1. 获取状态, xhr.status 可以获取响应的状态码
// 200 成功 302重定向 304缓存 404 找不到 5xx 服务器错误
console.log(xhr.status);
// 2. 响应头
console.log(xhr.getAllResponseHeaders()); // 获取所有的响应头信息
console.log(xhr.getResponseHeader('content-type')); // 获取单独的某一条信息
// 3. 响应体
console.log(xhr.responseText);
}
}
}
</script>
php的原生代码：
<?php
// 设置字符集
header('content-type: text/html; charset=utf-8;');
echo '大家好, 我是' . $_GET['username'] . '我的密码是' . $_GET['password'];
?>
post案例的演练
html代码：
<style>
div {
400px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- <form action="" enctype="application/x-www-form-urlencoded"></form> -->
<!-- form表单提交 enctype 属性设置传输的数据格式, 默认就是 application/x-www-form-urlencoded -->
<button>发送post请求</button>
<div>
</div>
js的原生代码：
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function() {
// 1. 创建ajax对象
var xhr = new XMLHttpRequest();
// 2. 发送请求
// 2.1 请求行 open(type, url); post的参数不在地址栏中, 在请求体中
xhr.open('post', '08.php');
// 2.2 请求头 post请求需要设置请求头 content-type必须设置 content-length可以不设置
// 设置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
这两行代码是唯一和get不一样的
// 2.3 请求体 post请求有请求头, 参数拼接在请求体中
xhr.send('username=pp&password=123456');
// 3. 处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// 说明响应回来了
if (xhr.status === 200) {
// 200成功 才做处理
div.innerText = xhr.responseText;
}
}
}
}
</script>
php代码如上述get代码中的一致