关于ajax:ajax回掉函数封装共性的详解

9次阅读

共计 1996 个字符，预计需要花费 5 分钟才能阅读完成。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Insert title here</title>
</head>
<body>

<h1>The Ajax 01</h1>
<fieldset>
    <legend>ajax 表单申请 </legend>
    <form>
        <input type="text" name="name" onblur="doCheck()" onfocus="doClear()">
        <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="resultId"></span>
    <!-- 心愿此地位服务端响应后果 -->
</fieldset>

<script type="text/javascript">
    // 点击框分明残留数据    
    function doClear() {document.forms[0].name.value = "";// 框中数据清空
        document.getElementById("resultId").innerHTML = "";// 上面提醒数据清空
    }

    // 封装共性；function doCheck() {
        // 申请 url
        var url = "doCheck";
        // 定义申请参数
        var name = document.forms[0].name.value;// 获取 name 的值
        var params = "name=" + name;// 传参数给服务端
        // 发送异步申请 get
        doAjaxGet(url, params, function(result) {//rsult 轻易起的名字这个参数对应上面的 callback
            document.getElementById("resultId").innerHTML = result;// 获取下面哪个 span 元素的参数

        })

    }
    // 检测名字是否已存在
    function doAjaxGet(url, params, callback) {let xhr = new XMLHttpRequest();
        //2. 定义 HR 对象的监听
        xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {callback(xhr.responseText);//
                // 缓存数据
            }
        }
        // 建设连贯
        //                返回的是 doCheck 然而拼接了 name 这个值？xhr.open("GET", url + "?" + params, true);
        // 发送申请
        xhr.send(null);
    }

    // 点击事件 封装共性；function doSave() {// 另外申明了一个函数
        // 这个是 url 的参数
        var url = "doSave";// 把值传给了 url 的服务端
        // 这个是 name 的参数
        let name = document.forms[0].name.value;// 获取 name 的数值
        var params = "name=" + name;
        doAjaxPost(url, params, function(a) {document.getElementById("resultId").innerHTML = a;// 获取下面哪个 span 元素的参数
        })

    }

    // 点击事件
    function doAjaxPost(url, params, callback) {// 这里有 url 的值和 name 的数值和新定义的一个参数
        //1/ 创立 XHR 对象
        let xhr = new XMLHttpRequest();
        //2. 定义 XHR 对象的监听
        xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {callback(xhr.responseText);// 调用函数
                // 缓存数据
                document.getElementById("resultId").innerHTML = xhr.responseText;
            }
        }
        //3. 建设连贯 (post 须要设置申请头信息)
        xhr.open("POST", url, true)// 异步申请
        xhr.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");// 这个是设置申请头
        //4. 发送申请

        let name = document.forms[0].name.value;// 获取 name 的值
        // 构建参数对象三种形式
        //var p="name="+name; 淘汰
        //let p = `name=${name}`;// 模板字符串            //var p={"name":name};js 对象原生的 ajax 是不能这样用的
        xhr.send(params);//post 的申请参数须要写到此地位
        // 承受 name 的数值
    }
</script>

</body>
</html>

正文完