php下的原生ajax请求

红太狼 2021-03-19 14:39 603阅读 0赞

浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。

意味着我们的浏览器不提交，通过JS就可以请求服务器。

ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。

1、创建XHR对象

var xhr = new XMLHttpRequest(); //暂不考虑兼容

2、XHR的对象属性和方法

方法：
    open("get/post", url, true/false);
    //有参数则k=v&k1=v1这种形式
    send(null);
    
    属性：
    //代表请求状态，不断变化，为4时，请求结束
    readyState
    //响应的内容
    responseText
    //响应的状态码200，403，404
    status
    //状态文字
    statusText
    
    事件：
    //当readyState变化时会触发此事件
    onreadystatechange = function() {};

3、通过XHR对象发送get请求

<!DOCTYPE html>
    <html>
        <head>
            <title>ajax</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <div id="box">
                <input type="text" name="con" value="" id="con" />
            </div>
        </body>
        <script type="text/javascript">
            var ipt = document.getElementById("con");
    
            ipt.onblur = function () {
                var con = this.value;
                //创建XHR对象
                var xhr = new XMLHttpRequest();
                //设置请求URL
                var url = "./ajax.php?con=" + con;
                //设置XHR对象readyState变化时响应函数
                xhr.onreadystatechange = function () {
                    //readyState是请求的状态，为4表示请求结束
                    if (xhr.readyState == 4) {
                        //responseText服务器响应的内容
                        alert("服务器响应数据：" + this.responseText);
                    }
                };
                //打开链接
                xhr.open("get", url, true);
                //发送请求
                xhr.send(null);
            }
        </script>
    </html>

ajax.php如下：

<?php
    $con = !empty($_GET['con']) ? trim($_GET['con']) : '没有数据';
    echo $con;

填入数据，当鼠标焦点离开input时，触发请求，弹出响应内容。

4、通过XHR对象发送post请求

(1)、open()第1参数为post

(2)、POST的参数以k=v&k1=v1&k2=v2的形式拼接，并用send()发送

(3)、必须要设置Content-Type为 application/x-www-form-urlencoded

<!DOCTYPE html>
    <html>
        <head>
            <title>ajax</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <div id="box">
                <input type="text" name="name" value="" id="name" />
                <input type="password" name="pwd" value="" id="pwd" />
                <input type="submit" name="sub" value="提交" id="sub" />
            </div>
        </body>
        <script type="text/javascript">
            var sub = document.getElementById("sub");
    
            sub.onclick = function () {
                var name = document.getElementById("name").value;
                var pwd = document.getElementById("pwd").value;
                //创建XHR对象
                var xhr = new XMLHttpRequest();
                //设置请求URL
                var url = "./ajax.php";
                //设置XHR对象readyState变化时响应函数
                xhr.onreadystatechange = function () {
                    //readyState是请求的状态，为4表示请求结束
                    if (xhr.readyState == 4) {
                        //responseText服务器响应的内容
                        alert("服务器响应数据：" + this.responseText);
                    }
                };
                //打开链接
                xhr.open("post", url, true);
                //设置请求头部
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //发送请求
                xhr.send("name=" + name + "&pwd=" + pwd);
            }
    
        </script>
    </html>

ajax.php如下：

<?php
    $name = !empty($_POST['name']) ? trim($_POST['name']) : '没有数据';
    $pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '没有数据';
    echo '用户名：', $name, '密码：', $pwd;

单击submit后发送post请求，弹出响应信息。

5、返回值json，html，text，xml

返回值只有两种text，和xml。不过text内容中可以是一段html或json结构的字符串。

(1)、返回json格式

<!DOCTYPE html>
    <html>
        <head>
            <title>ajax</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <div id="box">
                <select id="city"></select>
                <input type="button" value="获取" id="get" />
            </div>
        </body>
        <script type="text/javascript">
            var get = document.getElementById("get");
            var city = document.getElementById("city");
    
            get.onclick = function () {
                //创建XHR对象
                var xhr = new XMLHttpRequest();
                //设置请求URL
                var url = "./ajax.php";
                //设置XHR对象readyState变化时响应函数
                xhr.onreadystatechange = function () {
                    //readyState是请求的状态，为4表示请求结束
                    if (xhr.readyState == 4) {
                        //responseText服务器响应的内容
                        //通过eval把传来的json字符串转成对象
                        var data = eval(this.responseText);
                        var str = "";
                        for(var ix in data) {
                            str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";
                        }
                        city.innerHTML = str;
                    }
                };
                //打开链接
                xhr.open("get", url, true);
                //发送请求
                xhr.send(null);
            }
        </script>
    </html>

ajax.php如下：

<?php
    $data = array(
        array('id' => 1, 'name' => '上海'),
        array('id' => 2, 'name' => '北京'),
        array('id' => 3, 'name' => '深圳'),
    );
    echo json_encode($data);

(2)、返回xml格式

xml通过responseXML来读取， responseXML不是字符串，是DOM对象。

<!DOCTYPE html>
    <html>
        <head>
            <title>ajax</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <div id="box">
                <div id="news"></div>
                <input type="button" value="获取" id="get" />
            </div>
        </body>
        <script type="text/javascript">
            var get = document.getElementById("get");
            var news = document.getElementById("news");
    
            get.onclick = function () {
                //创建XHR对象
                var xhr = new XMLHttpRequest();
                //设置请求URL
                var url = "./ajax.php";
                //设置XHR对象readyState变化时响应函数
                xhr.onreadystatechange = function () {
                    //readyState是请求的状态，为4表示请求结束
                    if (xhr.readyState == 4) {
                        //responseXML服务器响应的内容
                        var data = this.responseXML;
                        var str = "";
                        var title = data.getElementsByTagName("title");
                        str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";
                        str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";
                        str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";
                        news.innerHTML = str;
                    }
                };
                //打开链接
                xhr.open("get", url, true);
                //发送请求
                xhr.send(null);
            }
        </script>
    </html>

ajax.php如下：

<?php
    header('Content-Type: text/xml;charset=utf-8');
    $xml = <<<EOD
    <?xml version="1.0" encoding="utf-8"?>
    <news>
        <title>111</title>
        <title>222</title>
        <title>333</title>
    </news>
    EOD;
    echo $xml;

6、ajax的同步与异步

通过设置open()的第三个参数true/false，来查看请求的效果。

同步请求：

发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。

异步请求：

发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。