处理GET请求一个实例
# 2:处理GET请求一个实例
**知识点**
- Ajax请求的过程
## Ajax请求的过程
1. `new XMLHttpRequest()`: 创建`request`请求对象
2. `onreadystatechange=function(){...}`: 监听请求状态
3. `request.open('GET',url,false)`: 设置请求参数
4. `request.send(null)`: 发送请求
---------------------------------------------------
### 示例: code/demo08-1.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>处理GET请求一个实例</title>
</head>
<body>
<p>
<label for="name">用户名:</label>
<input type="text" name="name" id="name" placeholder="用户名">
<span id="tips"></span>
</p>
<script>
let p = document.getElementsByTagName('p').item(0);
let input = document.getElementById('name');
let tips = document.getElementById('tips');
// 处理请求的脚本
let url = 'temp/demo08.php';
// 失去焦点时验证
input.onblur = function () {
let data = {name: input.value};
getData(url, data, callback);
};
// 重获焦点清空提示信息
input.onfocus = function () {
tips.innerHTML = '';
};
// 发起GET请求
function getData(url, data, callback) {
// 创建XHR请求对象
let request = new XMLHttpRequest();
// 设置XHR请求状态变化监听事件
request.onreadystatechange = function () {
if (request.readyState === 4 && callback) callback(request);
};
// 设置请求参数
request.open('GET', url + '?' + encodeFormData(data));
// 发送请求
request.send(null);
}
// 请求成功后的回调处理: DOM操作
function callback(requst) {
tips.innerHTML = requst.responseText;
p.appendChild(tips);
}
// 解析请求参数
function encodeFormData(data) {
if (!data) return '';
let pairs = []; // 配对容器
for (let name in data) {
// 过滤掉继承属性和函数属性,确保是自有属性,且没有方法(即函数类型的属性)
if (data.hasOwnProperty(name) && typeof data[name] !== 'function') {
// 将值转为字符串
let value = data[name].toString();
// encodeURIComponent()对URL中的键值对进行编码
name = encodeURIComponent(name.replace('%20', '+'));
value = encodeURIComponent(value.replace('%20', '+'));
// 将转换好的键值对,存入容器中
pairs.push(name + '=' + value);
}
}
return pairs.join('&'); // 将键值对之间用'&'拼接后返回
}
</script>
</body>
</html>
```
### 服务器脚本 : code/temp/demo08.php
```php
<?php
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : null;
$name = htmlspecialchars(trim($name));
$userList = ['admin','peter','zhu'];
if (in_array($name, $userList)) {
echo '<span style="color:red">用户名已存在,换一个呗~~</span>';
} else {
echo '<span style="color:green">用户名可用</span>';
}
exit();
```