1.Ajax是什么?
“Asynchronous Javascript And XML”(异步JavaScript和XML)
Ajax就是让浏览器跟服务器交互的一套API。它的作用就是让浏览器和服务器进行交互。
是向服务器请求数据的局部刷新页面的技术。
2.学习Ajax的目标是什么?
学会使用Ajax根据接口文档和服务器交互。
目前,我们网页所有的数据都是写死的。实际开发中,网页的数据需要从服务器获取
而Ajax技术就是来实现这一功能的。
3.Ajax基本使用结构
<!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>
<script>
// 1.创建一个请求对象
let xhr = new XMLHttpRequest()
// 2.调用xhr的open方法,开启请求
// 传入请求方法和请求地址
xhr.open('get', 'https://autumnfish.cn/api/joke')
// 3.设置请求成功后的回调函数
xhr.onload = function () {
console.log(xhr.response);
}
//4.调用send方法
xhr.send()
</script>
</body>
</html>
4.get请求
GET (SELECT):服务器取出资源(一项或多项)我们之前是向服务器要内容 是获取资源 用的是get请求方法
<!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>
<script>
//AJAX发送get请求,通过url地址拼接传递参数
// url地址?key=value
//1.创建请求对象
let xhr = new XMLHttpRequest()
// 2.调用open,设置请求方式和请求地址
xhr.open('get', 'https://autumnfish.cn/api/joke/list?num=10')
//3.设置请求成功后的回调函数
xhr.onload = function () {
// console.log(xhr.response);
let obj = JSON.parse(xhr.response)
console.log(obj);
}
// 发送请求
xhr.send()
</script>
</body>
</html>
5.Ajax发送get请求
<!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>
<style>
body {
/* 居中 */
text-align: center;
}
input {
border: 4px solid greenyellow;
background-color: aqua;
}
.joke-container {
border: 1px solid rgb(55, 44, 44);
height: 500px;
width: 500px;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<input type="button" value="点我看笑话" class="getJoke">
<div class="joke-container"></div>
<script>
document.querySelector('.getJoke').onclick = function () {
// 1.创建一个请求对象
let xhr = new XMLHttpRequest()
// 2.调用xhr的open方法,开启请求
// 传入请求方法和请求地址
xhr.open('get', 'https://autumnfish.cn/api/joke')
// 3.设置请求成功后的回调函数
xhr.onload = function () {
// 把响应的内容打印在控制台里
// console.log(xhr.response);
// 把响应的内容显示在div区域
document.querySelector('.joke-container').innerHTML = xhr.response;
}
//4.调用send方法
xhr.send()
}
</script>
</body>
</html>
6.post请求
POST (CREATE):在服务器新建一个资源 我们现在做的是注册用户 是在服务器新建一个资源 用的是post请求
<!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>
<!-- AJAX发生post请求
1.创建请求对象,实例化一个ajax对象
2.调用open方法,设置请求方式和地址
3.设置请求头(post请求才需要设置)(固定语法)
4.设置请求成功后的回调函数
5.send()方法去发生ajax请求 -->
<script>
// AJAX发生post请求
// 1.创建请求对象,实例化一个ajax对象
let xhr = new XMLHttpRequest();
// 2.调用open方法,设置请求方式和地址
xhr.open('post', 'https://autumnfish.cn/api/user/register')
// 3.设置请求头(post请求才需要设置)(固定语法)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// 4.设置请求成功后的回调函数
xhr.onload = function () {
console.log(xhr.response);
}
//5.send()方法去发生ajax请求,要注意 用send方法传递我们的参数时 一定在等号前后 不能有空格 不然这个参数就传递失败了
xhr.send('username=陈mour是')
</script>
</body>
</html>