原生封装Ajax与jQuery实现Ajax

最新推荐文章于 2025-04-02 23:17:21 发布

石头大哥啊

最新推荐文章于 2025-04-02 23:17:21 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42616910/article/details/82702342

本文详细介绍了原生封装Ajax的方法及与jQuery封装的对比，通过实例演示了创建XMLHttpRequest对象、发送请求、注册回调函数及服务器响应的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生封装Ajax

对比使用JQuery直接封装好的ajax方法，利用原生封装AJax在使用的代码就要多得多，但是，原生封装AJax并不难，在刚接触到AJax时，相信很多人都不明白是什么东西，下面我举出两个例子、分别用原生封装Ajax实现demo与直接调用JQuery封装好的AJax来实现demo，帮助大家跟进一步的理解。

首先，大家在写原生AJax时，有下面四个步骤
1. 创建XMLHttpRequest对象，建立连接
var xmlhttp=new XMLHttpRequest();
2. 向服务器发送请求，设置配置参数
xmlhttp.open(“GET”,”test1.txt”,true);
xmlhttp.send();
3. 注册回调函数，服务器响应后执行一些基于响应的任务
xmlHttp.onreadystatechange = function () {};
4. 服务器响应

Demo1—原生封装

//1，封装Ajax函数
function Ajax(Obj) {
        //1，创建XMLHttpRequest对象，建立连接
        var xhr;
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2，打开连接，配置参数
        xhr.open(Obj.type, Obj.url, Obj.async);
        xhr.send(null);
        //3，注册回调函数，服务器响应后执行一些基于响应的任务
        xhr.onreadystatechange = function () {
            // readyState == 4说明请求已完成
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 4,服务器响应，从服务器获得数据，处理返回数据 
                var data = JSON.parse(xhr.responseText);
                Obj.success(data)

            }
        }
    }
//接下来，以上简单的封装完成，就可以使用了
    Ajax({
        type: 'get或者post方法',
        async: "是否异步",
        url: '接口地址',
        success: function (information) {
                 //响应成功后执行你想要的操作
        }
    });

Demo2–JQuery直接使用

   $.ajax({
             type: 'get或者post方法',
             async: "是否异步",
             url: '接口地址',
             success: function (information) {
                 //响应成功后执行你想要的操作
             }
        })

不难看出，使用时我们封装的Ajax函数就相当于JQuery封装好的函数$ .ajax