前端day11- Ajax网络超时、请求、$.ajax

1- 网络异常超时

btn.onclick=function(){
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 请求地址:ie不使用浏览器默认的捕捉时间，（在?后接变量=）使用当前时间的毫秒值从而产生变化-->可以更新
            xhr.open("get","http://127.0.0.1:4000/delay?t="+Date.now());
            
            
            // 网络异常：断网执行下面功能
            xhr.onerror=function(){
                alert("网络异常")
            }

            // 请求超时：超过3s未执行则判定为超时，执行ontimeout功能
            xhr.timeout = 3000;
            xhr.ontimeout = function(){
                alert("请求超时,稍后再试")
            }

            // 发送请求
            xhr.send();
            // 状态变化时触发事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        div.innerHTML = xhr.response;
                }
                }
            }
        }

在发送ajax请求后，没有启动服务或网络没有连接会弹出提示==>onerror

            // 网络异常：断网执行下面功能

            xhr.οnerrοr=function(){

                alert("网络异常")

            }

 将网速调慢，超时会弹出提示==>timeout==>ontimeout = function

            // 请求超时：超过3s未执行则判定为超时，执行ontimeout功能

            xhr.timeout = 3000;

            xhr.ontimeout = function(){

                alert("请求超时,稍后再试")

            }

2- 停止请求 

        btn2.onclick = function(){

            // 停止请求

            xhr.abort();

        }

         xhr.abort()方法用于停止正在进行的XMLHttpRequest请求。当调用该方法后，正在进行的请求会立即被中止，不管请求是否完成。这可以用于取消正在进行的请求或终止不必要的请求，例如在用户点击取消按钮时停止请求的发送。

        在给按钮btn2绑定点击事件的处理函数中，调用xhr.abort()方法可以立即停止之前创建的XMLHttpRequest对象中的请求。这将导致请求的onreadystatechange事件不再被触发，并且不会接收到后续的响应数据。如果有特定的需求需要停止正在进行的请求，可以使用xhr.abort()方法实现。

点击1后瞬间点击2，div内2秒后不回接收到后端send过来的信息，被终止了 

 3- 停止请求--用于禁止重复点击

关键在于要设置开关 ，写进if判断中，用于是否启用禁止功能

 

 4- jq-ajax（JQ）

    <script>


        $("button").eq(0).click(function(){
            $.get("http://127.0.0.1:4000/jquery-get",{name:"bzy",age:18},function(data){
                // data是js后端里 response.send 的内容
                $("div").html(data.abc)
                console.log(data);
            },'json')
        })


        $("button").eq(1).click(function(){
            $.post("http://127.0.0.1:4000/jquery-post",{name:"bzy",age:18},function(data){
                $("div").html(data.abc)
                console.log(data);
            },'json')

        })

        $("button").eq(2).click(function(){
            $.ajax({
                url:"http://127.0.0.1:4000/jquery-ajax",
                data:{name:"bzy",age:18},
                type:"get",
                // dataType:"json",
                // timeout:3000,
                success:function(data){
                    $("div").html(data.abc)
                    console.log(data);
                },
                error:function(){
                    alert("失败")
                },

            },'json')
        })


    </script>

在上述代码中，eq(0)、eq(1)、eq(2)是jQuery的选择器方法eq()的使用。它们的作用是选择匹配元素集合中指定索引位置的元素，并返回一个新的jQuery对象。在这里，$("button")选择了所有的按钮元素，然后使用eq()方法指定索引位置来选择对应的按钮。 具体作用如下： eq(0)选择第一个按钮，即$("button").eq(0)选择了第一个按钮元素。 eq(1)选择第二个按钮，即$("button").eq(1)选择了第二个按钮元素。 eq(2)选择第三个按钮，即$("button").eq(2)选择了第三个按钮元素。 通过这样的方式，可以对每个按钮元素绑定不同的点击事件处理函数。每个按钮的点击事件处理函数中的代码将在用户点击相应的按钮时执行。在这段代码中，每个按钮点击事件处理函数分别发送不同的请求，eq(0)对应GET请求，eq(1)对应POST请求，eq(2)对应AJAX请求。

在jQuery的$.get方法中，'json'是可选的参数，它用于告诉jQuery将服务器响应的数据解析为JSON格式。如果不写该参数，默认解析为字符串。如果服务器返回的是JSON格式的数据，你需要将该参数设置为'json'，以便在回调函数中直接使用解析后的JSON对象进行操作，而不需要手动进行解析。如果服务器返回的是其他格式的数据（如文本），你可以将其设置为其他合适的值，或者省略该参数。