ajax实现异步请求的原理,是通过浏览器内置的XMLHttpRequest对象发送异步请求的,这里展示如何利用XMLHttpRequest对象实现简易的异步请求:
GET请求方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 调用open方法传入请求方式和请求的url
xhr.open('GET', 'http://hmajax.itheima.net/api/province')
// 绑定加载完成事件
xhr.addEventListener('loadend', () => {
console.log(JSON.parse(xhr.response))
})
// 放送请求
xhr.send()
</script>
</body>
</html>
如果GET请求方式需要添加查询参数,直接在url路径后面通过?加在后面即可。
POST请求方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
// 调用open方法传入请求方式和请求的url
xhr.open('POST', 'http://hmajax.itheima.net/api/register')
// 绑定加载完成事件
xhr.addEventListener('loadend', () => {
console.log(JSON.parse(xhr.response))
})
// 设置xhr的请求头
xhr.setRequestHeader('Content-Type', 'application/json')
// 模拟提交的数据
const obj = {
username: 'xhr2024730',
password: '12345654321'
}
// 将对象数据转为json字符串
const objStr = JSON.stringify(obj)
// 放送请求
xhr.send(objStr)
</script>
</body>
</html>
使用post请求方式进行提交数据时,需要添加请求头中的Content-Type属性。