ajax 02: 封装自己的jQuery库和ajax请求

2年前 (2022) 程序员胖胖胖虎阿

266 0 0

首先封装自己的 jQuery库

启发：css的元素选择器思想

简单的代码实现

function jQuery(selector){

    if(typeof selector == "string"){
        if(selector.charAt(0) == "#"){
            //原先的dom对象还要留着，因为最终的实现还要用这些对象的方法去实现，我们无法完成
            //domObj为全局变量
            domObj = document.getElementById(selector.substring(1))
            //但是由于封装了新方法，所以原先的dom对象就暂时不能用了(调用不了我们自定义的方法)，要返回自定义的jQuery对象
            return new jQuery()
            //如果要真正起到修改作用，必须用domObj,如果要调用我们自己扩展的方法必须用 jQuery对象
            //所以可行的方法是：在我们自定义的方法里操作原生的domObj对象
        }
    }

    if(typeof selector == "function"){
        window.onload = selector
    }

    this.html = function(innerData){
        domObj.innerHTML = innerData
    }

    this.click = function(fun){
        domObj.onclick = fun
    }

    //既可以取值，又可以改值
    this.val = function(v){
        if(v == undefined){
            return domObj.value
        }else{
            domObj.value = v
        }
    }

    this.change = function(fun){
        domObj.onchange = fun
    }

$ = jQuery

封装自己的ajax请求

简单代码实现

function jQuery(selector){

    if(typeof selector == "string"){
        if(selector.charAt(0) == "#"){
            //原先的dom对象还要留着，因为最终的实现还要用这些对象的方法去实现，我们无法完成
            domObj = document.getElementById(selector.substring(1))
            //但是由于封装了新方法，所以原先的dom对象就暂时不能用了(调用不了我们自定义的方法)，要返回自定义的jQuery对象
            return new jQuery()
        }
    }

    if(typeof selector == "function"){
        window.onload = selector
    }

    this.html = function(innerData){
        domObj.innerHTML = innerData
    }

    this.click = function(fun){
        domObj.onclick = fun
    }

    this.val = function(v){
        if(v == undefined){
            return domObj.value
        }else{
            domObj.value = v
        }
    }

    this.change = function(fun){
        domObj.onchange = fun
    }

    /**
     * 有一些动态的数据不能写死
     * 动态的信息有:
     * 1. 请求的类型
     * 2. 请求的地址
     * 3. 是否异步
     * 4. 提交的数据
     */
    jQuery.ajax = function(jsonArgs) {
        var method = jsonArgs.type.toUpperCase()
        var xhr = new XMLHttpRequest()
        //发送ajax请求，将文本框里的数据提交至后端
        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    var jsonObj = JSON.parse(this.responseText)
                    jsonArgs.callBack(jsonObj)
                } else {
                    alert("异常状态码: " + this.status)
                }
            }
        }
        if (method == "POST") {
            xhr.open(method, jsonArgs.url, jsonArgs.async)
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(jsonArgs.data)
        }
        if (method == "GET") {
            jsonArgs.data = "?" + jsonArgs.data
            xhr.open(method, jsonArgs.url + jsonArgs.data, jsonArgs.async)
            xhr.send()
        }
    }
}

$ = jQuery

new jQuery()

调用的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>全面测试jQuery类库</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="/ajax/js/jQuery-1.0.0.js"></script>
        <script>
            $(function(){
                $("#btn").click(function (){
                    $.ajax({
                        type : "POST",
                        data : "username=" + $("#username").val(),
                        async : true,
                        url : "/ajax/ajaxRequest10",
                        callBack : function(json){
                            $("#the-div").html(json.name)
 			    //自定义回调函数，个性化的处理后端返回的数据
                        }
                    })
                })
            })
        </script>
        <input type="text" id="username">
        <input type="button" id="btn" value="点击回显数据">
        <div id="the-div"></div>
    </body>
</html>

版权声明：程序员胖胖胖虎阿发表于 2022年9月5日下午3:08。
转载请注明：ajax 02: 封装自己的jQuery库和ajax请求 | 胖虎的工具箱-编程导航