Ajax前端网络

最新推荐文章于 2025-04-10 11:26:13 发布

原创最新推荐文章于 2025-04-10 11:26:13 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js

JavaScript零散知识专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个兼容不同浏览器的Ajax函数封装方法。通过创建XMLHttpRequest或ActiveXObject对象，该函数支持GET和POST请求，并根据不同请求类型设置URL参数。同时，通过onreadystatechange事件监听响应状态变化，并在status为200时调用回调函数处理返回的数据。

封装Ajax

原理：
1、浏览器
2、ajax对象
3、ajax.open(method,url,true); 发送请求
4、ajax.send();
5、onreadystatechage 监听事件
6、status == 200 403 503

//封装兼容函数，Ajax函数 ajaxFunc(method, url , data, callback, flag) 
function ajaxFunc(method, url, data, callback, flag) {
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    method = method.toUpperCase();
    if (method == 'GET') {
        xhr.open(method, url + '?' + data, flag);
        xhr.send();
    } else {
        xhr.open(method, url, flag);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseText);
            }
        }
    }
}