Ajax入门

什么是客户端？

凡是能发送 url 请求的，都是客户端。可以是软件、命令或一段代码。

什么是Ajax？

Asynchronous JavaScript And XML : 异步的JavaScript和XML
实现流程：

同步和异步请求的区别

同步：客户端发送一个请求，客户端处理这个请求，期间客户端什么都不做，等待服务器端响应返回，这叫同步。（客户端与服务器端处理同一个请求）
异步：客户端发送一个请求，不必等待服务器端响应返回，就可以发送下一个请求，期间有个监听脚本监听上一个请求是否响应成功，一旦响应成功，就处理成功的这个请求。这叫异步。（客户端与服务器端处理不一定是同一个请求）

XMLHttpRequest

$QC$_OLPP(9(D5{FX4`90XFK.png$
open( 'GET/POST', 'HTTP/FTP/....', 'true/false') (true:异步，默认值； false：同步）
onreadystatechange = function() { }

请求状态改变时调用
必须在send（）之前调用
function（）事件回调函数
回调是由执行条件的函数，由特定事件触发

send（‘请求数据’）

请求状态改变时调用
get请求时为null send(null);
post是为请求的键值对 post('name=peter&pass=123');

readyState //发送请求的状态

0：open() 未调用，未打开；
1：send() 未调用，未发送；
2：send() 已调用，获取到响应头；
3：正在下载响应数据
4：请求完成

status

status=200，响应成功

setRequestHeader(‘请求头信息’)

必须是open（）与send（）之间调用
常用于POST调用
open('post', 'login.php', true);
setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //表单提交
send(serialize(form));

responseText：存储返回的字符串，包括纯文本，JSON数据等；
responseXML：存储返回的XML/HTML对象，可以直接用DOM方法解析；

Ajax脚本的结构

1.创建Ajax对象
2. 设置onreadystatechange事件回调，处理响应返回的数据
3. 初始化一个请求：执行xhr的open（）方法
4. 设置请求头对象（可选）
5. 发送请求：send()

Ajax 完成 get 请求

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录（Ajax发送get请求）</title>
</head>
<body>
    <div align="center">
        <h3>用户登录</h3>
        <form>
            <p>账号：<input type="text" name="name" id="name"></p>
            <p>密码：<input type="password" name="pwd" id="pwd"></p>
            <p><input type="submit" id="submit" value="提交"></p>
        </form>

        <h3 id="tips"></h3>
    </div>
</body>

<script>
    var submit = document.getElementById('submit');

    submit.onclick = function () {
        //1.创建Ajax对象
        var xhr = new XMLHttpRequest();

        //2. 创建请求事件的监听
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);

                var json = JSON.parse(xhr.responseText);
                var tips = document.getElementById('tips');
                tips.innerHTML = '欢迎' + json.name + '来到wjh的梦想世界！';
            }
        }

        //3. 初始化一个url请求
        var name = document.getElementById('name').value;
        var pwd = document.getElementById('pwd').value;
        var url = 'check.php?name=' + name + '&pwd=' + pwd ;

        xhr.open('get', url, true);

        //4. 发送url请求
        xhr.send(null);

        return false; //禁止提交按钮的默认行为
    }



</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例
```
<?php

echo json_encode($_GET);
```
运行实例 »
点击 "运行实例" 按钮查看在线实例

Ajax 完成 post 请求

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录（Ajax发送post请求）</title>
</head>
<body>
<div align="center">
    <h3>用户登录</h3>
    <form>
        <p>账号：<input type="text" name="name" id="name"></p>
        <p>密码：<input type="password" name="pwd" id="pwd"></p>
        <p><input type="submit" id="submit" value="提交"></p>
    </form>

    <h3 id="tips"></h3>
</div>
</body>

<script>
    var submit = document.getElementById('submit');

    submit.onclick = function () {
        //1.创建Ajax对象
        var xhr = new XMLHttpRequest();

        //2. 创建请求事件的监听
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.responseText);

                var json = JSON.parse(xhr.responseText);
                var tips = document.getElementById('tips');
                tips.innerHTML = '欢迎' + json.name + '来到wjh的梦想世界！';
            }
        }

        //3. 初始化一个url请求
        var name = document.getElementById('name').value;
        var pwd = document.getElementById('pwd').value;
        var data = 'name=' + name + '&pwd=' + pwd ;
        var url = 'check.php' ;

        xhr.open('post', url, true);

        //4. 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //5. 发送url请求
        xhr.send(data);

        return false; //禁止提交按钮的默认行为
    }



</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例
```
<?php

echo json_encode($_POST);
```
运行实例 »
点击 "运行实例" 按钮查看在线实例

实例

实例

实例

实例

相关文章