原生ajax

最新推荐文章于 2024-07-08 21:36:46 发布

幼儿园园长~

最新推荐文章于 2024-07-08 21:36:46 发布

阅读量56

点赞数

分类专栏： JavaScript 文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_40981660/article/details/120232447

版权

JavaScript 专栏收录该内容

30 篇文章 5 订阅

订阅专栏

原生ajax步骤：创建XMLHttpRequest对象 → 输入网址（配置请求参数）→回车（发送请求）→回调函数获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajax</title>
</head>
<body>
    <script>
        var xmlhttp = null;
        //1.创建XMLHttpRequest镀锡
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject('Mircrosoft.XM:HTTP');
        } else {
            alert('浏览器不支持')
        }
        function callback() {
            if (xmlhttp.readyState === 4) {
                console.log(xmlhttp)
                console.log(xmlhttp.status);
                console.log(xmlhttp.responseText)
            }
        }
        var url = ' https://jsonplaceholder.typicode.com/users?id=1';
        //2.输入网址
        xmlhttp.open('GET', url)
        //3.按回车键
        xmlhttp.send(null);
        //4.回调函数 → 之所以称为回调，是因为可以获取各种数据
        xmlhttp.onreadystatechange = callback;
    </script>
</body>
</html>

请添加图片描述
两个知识点：

1、xmlhttp.onreadystatechange = callback 等价于函数表达式

function callback(){
    if(xmlhttp.readyState===4){
        console.log(xmlhttp.status);
    }
}
xmlhttp.onreadystatechange = callback;
//等价于
xmlhttp.onreadystatechange = function(){
    if(this.readyState){
        console.log(this.responseText)
    }
}

解释：函数调用者是xmlhttp，因此this最终指向了xmlhttp

2、因为是等价于函数表达式，因此this指向函数的调用者，可以将xmlhttp改为this

function callback() {
    if (xmlhttp.readyState === 4) {
        console.log(this)
        console.log(this.status);
        console.log(this.responseText)
    }
}

笔记素材来源：拉勾大前端训练营。

幼儿园园长~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生ajax

原生ajax步骤：创建XMLHttpRequest对象 → 输入网址（配置请求参数）→回车（发送请求）→回调函数获取数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生ajax</title></head><body> <script> var xmlhttp
复制链接

扫一扫