<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="ajax_get()">原生ajax-get</button>
<button onclick="ajax_post()">原生ajax-post</button>
<script>
// 原生ajax - get请求
function ajax_get() {
// 1、创建请求对象
var xhr = new XMLHttpRequest();
// 2、设置请求方式和请求地址
xhr.open(
"get",
"https://autumnfish.cn/search?keywords=海阔天空"
);
// 3、发送请求
xhr.send();
// 4、监听请求状态事件，请求成功时，获取请求结果
xhr.onreadystatechange = () => {
// readyState状态值有4个：
// 1 表示xhr对象已创建，初始化状态值为1
// 2 表示设置了请求方式和地址，还没发送
// 3 表示请求被发出，还没得到响应
// 4 表示已经拿到服务器响应结果
if (xhr.readyState == 4) {
console.log("get请求成功");
// console.log(xhr.responseText);
// 把json字符串解析成json对象
var result = JSON.parse(xhr.responseText);
console.log(result);
}
};
}
// 原生ajax - post请求
function ajax_post() {
// 1、创建请求对象
var xhr = new XMLHttpRequest();
// 2、设置请求方式和请求地址，post请求的url上不加请求参数
xhr.open("post", "https://autumnfish.cn/search");
// 3、设置请求头的数据格式，保证服务器可以正确解析请求参数，返回正确的结果
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);
// 4、发送请求，send函数的参数是请求体，放请求参数
xhr.send("keywords=海阔天空");
// 5、监听请求状态事件，请求成功时，获取请求结果
xhr.onreadystatechange = () => {
// readyState状态值有4个：
// 1 表示xhr对象已创建，初始化状态值为1
// 2 表示设置了请求方式和地址，还没发送
// 3 表示请求被发出，还没得到响应
// 4 表示已经拿到服务器响应结果
if (xhr.readyState == 4) {
console.log("post请求成功");
// console.log(xhr.responseText);
// 把json字符串解析成json对象
var res = JSON.parse(xhr.responseText);
console.log(res);
}
};
}
/* // 由于ajax请求的url路径不支持中文，所以需要把中文转码成url编码才行
var url = encodeURI("海阔天空");
console.log(url); // %E6%B5%B7%E9%98%94%E5%A4%A9%E7%A9%BA
// 把编码后的url格式，解码成原来的中文
var str = decodeURI(url);
console.log(str); // 海阔天空
// 在开发时，不需要手动编码，浏览器会自动执行中文url编码 */
/* // url路径构成解析，一个url路径由5部分组成
// https://autumnfish.cn/search?keywords=海阔天空
// 1、https 请求协议 http,file...
// 2、autumnfish.cn 服务器域名或ip
// 3、443 服务器端口号 http协议的默认端口80 https默认端口443 默认端口可以省略
// 4、/search 服务器接口路径
// 5、?keywords=海阔天空&page=3 查询字符串：以键值对形式表示数据，多个数组用&分割 */
</script>
</body>
</html>
