AJAX——AJAX的异步与同步、AJAX代码封装

2022-08-15
3

活动地址:CSDN21天学习挑战赛

AJAX的异步与同步

  • 什么是异步?什么是同步?

    • ajax请求1和ajax请求2,同时并发,谁也不用等谁,这就是异步。(a不等b,b也不等a)
    • 如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送,那么这就是同步。(a等待b,或者b等待a,只要发生等待,就是同步。)
  • 异步和同步在代码上如何实现?

    // 假设这个是ajax请求1
    // 如果第三个参数是false:这个就表示“ajax请求1”不支持异步,也就是说ajax请求1发送之后,会影响其他ajax请求的发送,只有当我这个请求结束之后,你们其他的ajax请求才能发送。
    // false表示,不支持异步。我这个请求发了之后,你们其他的请求都要靠边站。都等着。你们别动呢,等我结束了你们再说。
    xhr1.open("请求方式", "URL", false)
    xhr1.send()
    
    // 假设这个是ajax请求2
    // 如果第三个参数是true:这个就表示“ajax请求2”支持异步请求,也就是说ajax请求2发送之后,不影响其他ajax请求的发送。
    xhr2.open("请求方式", "URL", true) 
    xhr2.send()
    
  • 什么情况下用同步?(大部分情况下我们都是使用ajax异步方式,同步很少用。)

    • 举一个例子
      • 用户注册
        • 用户名需要发送ajax请求进行校验
        • 邮箱地址也需要发送ajax请求校验
        • 其他的也可能需要发送ajax请求。。。
        • 并且最终注册按钮的时候,也是发送ajax请求进行注册。
        • 那么显然,注册的Ajax请求和校验的ajax请求不能异步,必须等待所有的校验ajax请求结束之后,注册的ajax请求才能发。

AJAX代码封装

  • AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。

  • 接下来,手动封装一个工具类,这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字,叫做jQuery。(我这里封装的jQuery只是一个前端的库,和后端的java没有关系,只是为了方便web前端代码的编写,提高WEB前端的开发效率)

  • 手动开发jQuery,源代码

    function jQuery(selector){
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                domObj = document.getElementById(selector.substring(1))
                return new jQuery()
            }
        }
        if (typeof selector == "function") {
            window.onload = selector
        }
        this.html = function(htmlStr){
            domObj.innerHTML = htmlStr
        }
        this.click = function(fun){
            domObj.onclick = fun
        }
        this.focus = function (fun){
            domObj.onfocus = fun
        }
        this.blur = function(fun) {
            domObj.onblur = fun
        }
        this.change = function (fun){
            domObj.onchange = fun
        }
        this.val = function(v){
            if (v == undefined) {
                return domObj.value
            }else{
                domObj.value = v
            }
        }
    
        // 静态的方法,发送ajax请求
        /**
         * 分析:使用ajax函数发送ajax请求的时候,需要程序员给我们传过来什么?
         *      请求的方式(type):GET/POST
         *      请求的URL(url):url
         *      请求时提交的数据(data):data
         *      请求时发送异步请求还是同步请求(async):true表示异步,false表示同步。
         */
        jQuery.ajax = function(jsonArgs){
            // 1.
            var xhr = new XMLHttpRequest();
            // 2.
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 我们这个工具类在封装的时候,先不考虑那么多,假设服务器返回的都是json格式的字符串。
                        var jsonObj = JSON.parse(this.responseText)
                        // 调用函数
                        jsonArgs.success(jsonObj)
                    }
                }
            }
    
            if (jsonArgs.type.toUpperCase() == "POST") {
                // 3.
                xhr.open("POST", jsonArgs.url, jsonArgs.async)
                // 4.
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                xhr.send(jsonArgs.data)
            }
    
            if (jsonArgs.type.toUpperCase() == "GET") {
                xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
                xhr.send()
            }
    
        }
    }
    $ = jQuery
    
    // 这里有个细节,执行这个目的是为了让静态方法ajax生效。
    new jQuery()
    
    
    
  • 使用以上库,怎么用?

    <script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $.ajax({
                    type : "POST",
                    url : "/ajax/ajaxrequest11",
                    data : "username=" + $("#username").val(),
                    async : true,
                    success : function(json){
                        $("#div1").html(json.uname)
                    }
                })
            })
        })
    </script>
    

相关信息

    评论