get请求和post请求的区别:

1. get请求的参数, 会拼接在地址栏的后面, 但是 post 请求不会的

2. get请求参数会暴露, 相对不安全, post相对安全

3. get请求的参数在地址栏中, 地址栏的长度是有限制的, 不能提交大量的数据, 但是 post 可以提交大量的数据

4. get请求传输速率快!!

5. 一般从服务器获取数据, 一般用 get ，但是如果是提交给服务器数据, 去修改内容等, 一般用 post

get案例的演练

html代码：

<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代码：

</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代码中的一致