ajax 学习笔记

没有使用jQuery封装的“GET”请求
function ajax(url,data,timeout,success,error) {
        var timer; //计时器
        // 1. 创建异步请求对象
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlHttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.设置请求方式和请求地址
        xmlHttp.open("GET",url + "?" + obj2str(data),true);

        // 3.发送请求
        xmlHttp.send();
        // 4.监听状态变化
        xmlHttp.onreadystatechange = function () {
            // 5.处理请求结果
            if(xmlHttp.readyState == 4){ // 判断请求是否成功(表示客户端已经成功请求到服务器,并得到服务器响应,但是不一定是成功的响应)
                clearInterval(timer); // 请求成功,关闭计时器
                if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304){ // 服务器成功响应
                    success(xmlHttp);
                    console.log("服务器返回的数据: " + xmlHttp.responseText);
                }
                else{ // 如 404 这些
                    error(xmlHttp);
                    console.log("未获得服务器返回的数据");
                }
            }
            else { // 表示请求未发送成功或没有得到服务器响应
                console.log("error");
            }
        }

        // 超时处理
        if(timeout){
            timer = setInterval(function () {
                console.log("请求超时,中断请求")
                xmlHttp.abort();
                clearInterval(timer);
            },timeout)
        }
}

function obj2str(obj) {
    obj.t = new Date().getTime(); // 用于解决 IE浏览器缓存问题 (保证每次请求都能获得最新的数据)
    var res = [];

    for (var key in obj){
        res.push(key + "=" + obj[key]);
    }
    return res.join("&");
}
html 文件
<script>
    window.onload = function () {

        var btn = document.getElementById("btn");
        btn.onclick = function (){
            ajax("ajax_get.php",{"username":"zw","password":"123"},3000,function (xhr) {
                alert(xhr.responseText);
            },
            function (xhr) {
                alert("error response.");
            });
        }
    }
</script>
随手写的计时器,娱乐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var t = 0;
        var timer;
        is_pause = false;
        function get_timer() {
            timer = window.setInterval("clock()",1000);
                t = 0;
                document.getElementById("clock").value = t;
        }

        function go_on() {
            is_pause = false;
        }

        function clean_timer(timer) {
            window.clearInterval(timer);
        }

        function pause() {
            is_pause = true;
            document.getElementById("clock").value = t;
        }

        function clock() {
            if(!is_pause){
                t += 1;
                document.getElementById("clock").value = t;
            }
        }
    </script>

</head>
<body>
    <input type="text" id="clock" value="0"/>
    <button onclick="get_timer()">开始</button>
    <button onclick="pause()">暂停</button>
    <button onclick="go_on()">继续</button>
    <button onclick="clean_timer(timer)">停止</button>
</body>
</html>

你可能感兴趣的:(前端)