绕来绕去，我发现还是得用php

node 也可以用，但是部署起来，我不太会啊，要是Php 到时可以随便部署！

废话少说，我们先测试！

服务器好了，我们就可以用ajax 测试了，为了防止跨域问题，我们将一个页面放入网站内：

axios.html 和 index.php 都在一个网站内！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <h1>我是需要async call 的</h1>
    <h2>我来测试axios </h2>
    <button id="oBtn">ajax</button>
    <script type="text/javascript">
        window.onload = function () {

            var OBtn = document.getElementById('oBtn')
            OBtn.onclick = function () {
                // ajax 请求的封装
                // （1）创建异步对象
                var ajaxObj = new XMLHttpRequest();
                // 在同一个网站内，我们可以直接访问
                // （2）设置请求的参数。包括：请求的方法、请求的url。
                ajaxObj.open('get', 'index.php');

                // （3）发送请求
                ajaxObj.send();

                //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
                //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
                ajaxObj.onreadystatechange = function () {
                    // 为了保证 数据 完整返回，我们一般会判断 两个值
                    if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                        // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                        // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                        console.log('数据返回成功');

                        // 数据是保存在 异步对象的 属性中
                        console.log(ajaxObj.responseText);

                        // 修改页面的显示
                        document.querySelector('h1').innerHTML = ajaxObj.responseText;
                    }
                }
            }
        }
    </script>
</body>

</html>

行，经过测试，发现ajax get 请求没有任何问题！

一般get 请求都没有问题！

post 请求也简单

axios.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <h1>我是需要async call 的</h1>
    <h2>我来测试axios </h2>
    <button id="oBtn">ajax</button>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('oBtn').onclick = function () {
                var xhr = new XMLHttpRequest();

                // 设置属性
                xhr.open('post', 'pp2.php');

                // 如果想要使用post提交数据,必须添加此行
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                // 将数据通过send方法传递
                xhr.send('name=fox&age=18');

                // 发送并接受返回值
                xhr.onreadystatechange = function () {
                    // 这步为判断服务器是否正确响应
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        alert(xhr.responseText);
                    }
                };
            }            // 异步对象

        }
    </script>
</body>

</html>

也可以得到相应的数据！ post 请求没有任何问题！

XMLHttpRequest 对象详解

我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。

发送请求

发送请求的方法：

	open(method, url, async);

参数解释：

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

另外还有个方法：（仅用于 POST 请求）

	send(string);

POST请求时注意

如果想让像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

	xmlhttp.open("POST","ajax_test.php", true);

	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

	xmlhttp.send("name=smyhvae&age=27");

onreadystatechange 事件

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：

200: “OK”。
404: 未找到页面。

在 onreadystatechange 事件中，

当 readyState 等于 4，且状态码为200时，表示响应已就绪

。

服务器响应的内容

responseText：获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。

如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。

在继续写之前，先回顾api

js 中

let string = JSON.stringify(obj) // 对象–》转字符串

let object = JSON.parse(jsonstring)// 字符串转对象

php 中

PHP中：json 字符串 <–> js 对象

json_decode()

方法：将
json
字符串转化为变量。
json_encode()

方法：将变量转化为
json
字符串。

我们修改下php ，让它返回json 字符串

访问测试下：

行，后端服务器没任何问题，现在我们ajax 请求下：

后端：

前端：

axios.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <button id="oBtn">ajax</button>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('oBtn').onclick = function () {
                var ajax = new XMLHttpRequest();

                ajax.open('get', 'pp2.php');

                ajax.send();

                ajax.onreadystatechange = function () {
                    if (ajax.readyState == 4 && ajax.status == 200) {
                        // json 字符串 是字符串 所以我们可以 通过  responseText获取
                        console.log(ajax.responseText);

                        // 转化为 js对象
                        var jsObj = JSON.parse(ajax.responseText);

                        console.log(jsObj);

                        // 拼接ul s
                        var str = '';
                        str += '<ul>';
                        str += '<li>' + jsObj.name + '</li>';
                        str += '<li>' + jsObj.skill + '</li>';
                        str += '<li>' + jsObj.friend + '</li>';
                        str += '</ul>';

                        // 设置到界面上

                        document.body.innerHTML = str;
                    }
                }



            }

        }
    </script>
</body>

</html>

显示结果：

——————————————————————————————————

在Php中，无法接收json 数据：

先看后端：

axios.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <button id="oBtn">ajax</button>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('oBtn').onclick = function () {

                var xhr = new XMLHttpRequest();

                data = {
                    "name": "action is power"
                };

                xhr.open("post", "pp2.php");
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send(JSON.stringify(data));

                xhr.onreadystatechange = function () {
                    let { status, readyState } = xhr;
                    if (readyState == 4) {
                        if (200 <= status && 300 > status) {
                            console.log(xhr.responseText);
                        }
                    }

                }

            }

        }
    </script>
</body>

</html>

结果：

我们发现确实php 得不到数据，要命了

这个时候我们必须解决这个问题：

我们只有一个办法，就是将json 变成 querystring 的形式：

axios.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <button id="oBtn">ajax</button>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('oBtn').onclick = function () {

                var xhr = new XMLHttpRequest();

                data = {
                    "name": "action is power",
                    "age": 18
                };
                let result = "";
                for (let key in data) {

                    result += "&" + key + "=" + data[key];
                }
                result = result.substring(1);

                xhr.open("post", "pp2.php");
                // xhr.setRequestHeader("Content-Type", "application/json");
                // 如果想要使用post提交数据,必须添加此行
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(result);
                xhr.onreadystatechange = function () {
                    let { status, readyState } = xhr;
                    if (readyState == 4) {
                        if (200 <= status && 300 > status) {
                            console.log(xhr.responseText);
                        }
                    }

                }

            }

        }
    </script>
</body>

</html>

后台：

显示结果：

行，就到这吧，我们总结下

1， ajax 请求方式 get

post 其中post 只能发送 querystring 形式，因为 php 不支持接收 json 数据！

————————————————————

原文链接：https://blog.csdn.net/qq_15009739/article/details/108803698

XMLHttpRequest 对象详解

发送请求

POST请求时注意

onreadystatechange 事件

服务器响应的内容

PHP中：json 字符串 <–> js 对象

你可能也喜欢