原生Ajax使用

最新推荐文章于 2024-04-16 21:02:01 发布

Jokerdop

最新推荐文章于 2024-04-16 21:02:01 发布

阅读量113

点赞数

分类专栏：前端 javascript 文章标签： ajax javascript html5

本文链接：https://blog.csdn.net/jkdop/article/details/120603400

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

ajax=>>> Async Javascript And XML, Asynchronous 是异步的意思

ajax可以在网页不刷新的情况下请求数据，实现网页局部刷新

ajax是异步的，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript 来操作 DOM 来更新页面。

-创建 Ajax 的核⼼对象 XMLHttpRequest 对象
-通过 XMLHttpRequest的 open() ⽅法与服务端建⽴连接 get、post请求数据
-通过 XMLHttpRequest的 send() ⽅法把请求所需的数据内容发送给服务器端
-通过 XMLHttpRequest 的 onreadystatechange 事件监听服务器端的通信状态
-readystate==4请求完成（成功和失败）if(status==200)成功else失败
-将处理结果更新到 HTML ⻚⾯中。

XMLHttpRequest对象的属性

它的属性有：

onreadystatechange：每次状态改变所触发事件的事件处理程序。

responseText ：从服务器进程返回数据的字符串形式。

responseXML：从服务器进程返回的DOM兼容的文档数据对象。

status ：从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

status Text ：伴随状态码的字符串信息

readyState: 0 请求未初始化刚刚实例化xmlHttpRequest

readyState: 1 客户端与服务器建立链接调用了open方法

readyState: 2 请求已经被接受

readyState: 3 请求正在处理中

readyState: 4 请求处理完成,响应已就绪已经拿到了服务器的返回结果

let xhr = new XMLHttpRequest();

   //2.为xhr.onreadystatechange设置事件监听

    xhr.onreadystatechange = function (){

        if(xhr.readyState === 4){

            switch (xhr.status){

                case 200:{

                    console.log(JSON.parse(xhr.responseText));

                    break;

                }

                case 404:{

                    console.log("页面或者资源找不到");

                    break;

                }

            }

        }

    }

//3.调用xhr.open(请求方式,请求地址,同步异步)

    xhr.open("GET","https://cnodejs.org/api/v1/topicss",false);

    //method(请求方式  string

    //GET获取数据 POST发送数据 DELETE删除 PUT修改

    //url(请求地址  string

    //async(同步异步  布尔 false=>异步    true=>同步  默认值是false

    //username password



 //4.发送请求的数据

    xhr.send(null)

    console.log(xhr);

function ajax(url, success) {
    // 1. 准备一个电话(创 建一个ajax对象)
    var xhr = new XMLHttpRequest()
    // 2.拨号（连接到服务器）
    xhr.open('get', url, true);
    // 3.说出你的需求(发送请求)
    xhr.send();
    // 4.对方的反馈（接收返回值）
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) { // 请求完成
            if(xhr.status === 200) { // 成功
                success && success(xhr.responseText) // responseText: 响应文本（服务器返回的数据）
            } else { // 失败了
                console.log('失败了');
            }
        }
    }
}

ajax('data.json', function(data) {
    console.log(data);
})