Ajax——异步基础知识

Posted 站错队了同志

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax——异步基础知识相关的知识，希望对你有一定的参考价值。

封装异步请求

1、将函数作为参数进行使用

2、因为获取数据是在一个注册事件中获取的，所以只有事件触发的时候才会调用此函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>发送请求</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function () {
        ajax_tool(‘05.php‘, ‘‘, ‘get‘, function (msg) {
            alert(msg);
        })
    }
    /*
    参数1:url
    参数2:数据
    参数3:请求的方法
    参数4:数据成功获取以后 调用的方法
    */
    function ajax_tool(url, data, method, success) {
        var ajax = new XMLHttpRequest();
        if (method == ‘get‘) {
            if (data) {
                url += ‘?‘;
                url += data;
            }
            ajax.open(method, url);
            ajax.send();
        } else {
            ajax.open(method, url);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            if (data) {
                ajax.send(data);
            } else {
                ajax.send();
            }
        }
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                success(ajax.responseText);
            }
        }
    }
</script>
</body>
</html>

 

以上是关于Ajax——异步基础知识的主要内容，如果未能解决你的问题，请参考以下文章

08-最简洁易懂的Ajax+Json+JQuery+案例演示知识整理

Ajax——异步基础知识

Ajax——异步基础知识

Ajax——异步基础知识

原生ajax异步请求基础知识

AJAX中的同步加载与异步加载