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

时间 2020-09-29
标签 ajax 函数封装共性详解栏目 Ajax 繁體版
原文原文链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>javascript
<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>html