![[前端开发] MUI框架详解-全面讲解MUI框架使用](https://www.bloglab.cn/wp-content/uploads/thumb/2018/12/fill_w372_h231_g0_mark_80e5f34e03334950b3a4cb73bf4262dd.webp)
![[MySQL] MySQL面试指南](https://www.bloglab.cn/wp-content/uploads/2018/12/1532f1414c3e23.webp)
![[Web安全] 黑客是怎样炼成的视频教程](https://www.bloglab.cn/wp-content/uploads/thumb/2018/12/fill_w372_h231_g0_mark_113cb06a91a3f5.webp)
释放双眼，带上耳机，听听看~！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">点我原生js发送ajax请求</button>
<script>
document.getElementById('btn').onclick = function () {
//原生js发送ajax的get请求
//固定的步骤.
//a.创建一个XMLHttpRequest对象
//b.调用这个对象的open方法,设置请求方式和请求地址.
//c.设置请求成功后的回调函数.
//d.调用这个对象的send方法,开始发送.
//1.原生js发送ajax的get请求-不带参数
// //a.创建一个XMLHttpRequest对象
// let xhr = new XMLHttpRequest();//'亲切的喊他小黄人对象'
// //b.调用这个对象的open方法,设置请求方式和请求地址.
// xhr.open('get','https://autumnfish.cn/api/joke');
// //c.设置请求成功后的回调函数.
// xhr.onload = function(){
// //处理响应回来的内容.
// console.log(xhr.response);
// }
// //d.调用这个对象的send方法,开始发送.
// xhr.send();
//2.原生js发送ajax的get请求-带参数
//a.创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//b.调用这个对象的open方法,设置请求方式和请求地址.
// get请求的参数直接拼接在url地址上.
// 格式: 地址?key1=value1&key2=value2
xhr.open('get','https://autumnfish.cn/api/joke/list?num=5');
//c.设置请求成功后的回调函数.
xhr.onload = function(){
console.log(xhr.response);
}
//d.调用这个对象的send方法,开始发送.
xhr.send();
}
</script>
</body>
</html>
内容投诉
