ajax无参请求学习

作者: 黄稚女 | 来源:发表于2019-02-05 22:25 被阅读0次

ajax无参请求学习
IE浏览器ajax缓存问题
2020-06-24
前段到后台
前端跨域
js 异步系列(1) -发展
Python应用01--接口测试
ajax
Vue 封装axios，返回指定的response
Python3 内置http.client,urllib.req

ajax【点击】请求流程
test.html代码流程

创建button按钮，为button绑定一个点击事件（函数）
在函数内书写ajax代码
2.1 创建ajax对象
2.2 设置onreadystatechange属性用来监听变化如果有变化会响应一个函数
2.2.1 判断readyState 是否等于4并且status 是否等于200
2.2.2 获取请求得结果
2.3 设置请求参数（请求方式，文件名字，同步异步）
2.4 发送请求
test.php代码
返回给[test.html请求]一个结果

test.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>显示欢迎词</button>
<h2></h2>
</body>
<script>
    var btn = document.getElementsByTagName('button')[0];           // 获取到按钮 按钮序号为0
    btn.onclick = function () {                                     // 为按钮绑定点击事件 值是一个函数
        var xhr = new XMLHttpRequest();                             // 创建Ajax对象
        xhr.onreadystatechange = function () {                      // 设置onreadystatechange属性 这个属性监听ajax请求的变化                    
            if (xhr.readyState == 4 && xhr.status == 200){          // readyState状态为4时 ajax请求结束 status为服务器返回的状态码 状态码为200时 正确返回数据 404为错误
                var h2 = document.getElementsByTagName('h2')[0];    // 获取到h2标签 按钮序号为0
                h2.innerHTML = xhr.responseText;                    // 为h2标签传值
            }
        }
        xhr.open('get','test.php',true);                            // 初始化ajax请求[类型 地址 异步]
        xhr.send(null);                                             // 将请求发送到浏览器 get请求不需要传参
    }
</script>
</html>

test.php代码如下