331 XMLHttpRequest发送get、post请求，获取响应，**readyState**
发送get请求
XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。
- get请求, 设置请求行时, 需要把参数列表拼接到url后面
- get请求不用设置请求头
- get请求的请求体为null
// 使用XMLHttpRequest发送get请求的步骤
// 1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2. 设置请求行
//第一个参数: 请求方式 get/post
//第二个参数: 请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=hucc");
// 3. 设置请求头
// 浏览器会给我们默认添加基本的请求头,get请求时无需设置
xhr.setReqeustHeader('content-type','text/html');
// 4. 设置请求体
// get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);
<!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>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - get</h1>
<p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//点击按钮，获取输入框的值，通过ajax发送给后台
document.querySelector('button').onclick = function() {
var txt = document.querySelector('input').value;
//利用ajax发送数据给后台
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('get', './02-ajax-get.php?name=' + txt);
//2-2请求头
xhr.setRequestHeader('content-type', 'text/html');
//2-3请求主体
xhr.send(null);
//3-监听服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
document.querySelector('.info').innerHTML = r; //显示
}
}
}
</script>
</body>
</html>
发送post请求
-
post必须设置请求头中的content-type为application/x-www-form-urlencoded
-
post请求需要将参数列表设置到请求体中
var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=hucc&age=18");
<!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>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - post</h1>
<p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//点击按钮，获取输入框的值，通过ajax发送给后台
document.querySelector('button').onclick = function() {
var txt = document.querySelector('input').value;
//利用ajax向数据发送给后台
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('post', './03-ajax-post.php');
//2-2请求头
//必须设置content-type属性
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//2-3请求主体
xhr.send('name=' + txt + '&sex=m');
//3-监听服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
demo：判断用户名是否存在
<!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>
<link rel="stylesheet" href="./form.css">
</head>
<body>
<form>
用户名：<input type="text" id="test">
<span class="msg"></span> 密码： <input type="password" name="password"> 电话：
<input type="text" name="tel"> 邮箱：
<input type="text" name="email"> 昵称：
<input type="text" name="nickname">
<input type="button" value="注册">
</form>
<script>
// 当用户名框失去焦点（onblur) ，获取输入框的值，使用ajax传递给后台服务器，
// 判断用户名是否可用
document.querySelector('#test').onblur = function() {
var txt = this.value; //获取输入框的值
// 利用ajax传递给后台，判断用户名是否可用
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('get', './01-register.php?name=' + txt);
//2-2请求头
// xhr.setRequestHeader('content-type', 'text/html');
//2-3请求主体
xhr.send(null);
//3-监听服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
console.log(r);
//把结果显示在页面中
document.querySelector('.msg').innerHTML = r;
}
}
}
</script>
</body>
</html>
<?php
// echo '<pre>';
// print_r($_GET);
// echo '</pre>';
// 1-获取前端传递用户名
$name = $_GET['name'];
// 2-获取数据库中所有用户名 select name from user; 用数组模拟数据库
$names = ['zs', 'ls', 'taotao', 'mage', 'chunge'];
// 3-判断
// in_array(a, b); 判断数据a是否在数组b中
// echo in_array($name, $names);
if (in_array($name, $names)) {
//重名，不可用
echo '×';
} else {
//可用
echo '√';
}
?>
获取响应
HTTP响应分为3个部分，状态行、响应头、响应体。
// 给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//1. 获取状态行
console.log("状态行:"+xhr.status);
//2. 获取响应头
console.log("所有的相应头:"+xhr.getAllResponseHeaders());
console.log("指定相应头:"+xhr.getResponseHeader("content-type"));
//3. 获取响应体
console.log(xhr.responseText);
}
}
readyState
readyState: 记录了XMLHttpRequest对象的当前状态
// 0：请求未初始化（还没有调用 open()）。
// 1：请求已经建立，但是还没有发送（还没有调用 send()）。
// 2：请求已发送，正在处理中
// 3：请求在处理中，通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
// 4：响应已完成，可以获取并使用服务器的响应了。(我们只需要关注状态4即可)
