什么是XMLHttpRequest
XMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的
使用xhr发起GET请求
步骤:
- 创建xhr对象
- 调用xhr.open()函数
- 调用xhr.send()函数
- 监听xhr.onreadystatechange事件
代码示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
// 创建XHR对象
var xhr = new XMLHttpRequest();
// 调用open函数 指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
// 调用send函数
xhr.send();
// 监听onreadystatechange事件
xhr.onreadystatechange = function() {
//监听xhr对象的请求状态readyState 与服务器响应的状态status
if (xhr.readyState === 4 && xhr.status === 200) {
//打印服务器响应回来的数据
console.log(xhr);
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
了解xhr对象的readyState属性
XMLHttpRequest对象的readyState属性用来表示当前Ajax请求所处的状态,每个Ajax请求必然处于一下状态中的一个
使用xhr发起带参数的GET请求
使用xhr对象发起带参数的GET请求时,只需在调用xhr.open期间,为URL地址指定参数即可
/*省略*/
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
/*省略*/
这种在URL地址后面拼接的参数,叫做查询字符串
代码示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr);
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
使用xhr发起POST请求
步骤:
- 创建xhr对象
- 调用xhr.open()函数
- 设置Content-Type属性(固定写法)
- 调用xhr.send()函数,同时指定要发送的数据
- 监听xhr.onreadystatechange事件
代码示例:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
//创建xhr对象
var xhr = new XMLHttpRequest();
//调用open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
//设置Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//调用send()函数,同时将数据以查询字符串的形式,提交给服务器
xhr.send('bookname=你好你好&author=施耐庵&publisher=天津图书出版社');
//监听onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>