<万博manbetx平台> 处理GET请求一个实例 - JavaScript 经典案例 - 万博manbetx平台中文网
点击切换帐号登陆
帐号密码登陆

处理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.万博manbetx平台
```万博manbetx平台
<!DOCTYPE 万博manbetx平台>
<万博manbetx平台>
<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.inner万博manbetx平台 = '';
    };


    // 发起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.inner万博manbetx平台 = 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>
</万博manbetx平台>
```

### 服务器脚本 : code/temp/demo08.php

```php
<?php 
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : null;
$name = 万博manbetx平台specialchars(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();

```


任务

?不会了怎么办
无数据提示暂无评论哟...
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号