7.AJAX初步学习（6）

在项目上线后，经常会遇到请求超时与网络异常的情况。这个时候往往就需要设置一个提醒，告诉用户网络超时/异常。像前几天B站崩了，打开B站时也会显示响应提醒。

而这在AJAX中如何实现呢。
现在就学习着先做一个有3s延时响应的页面。setTimeout是设置延时的函数。
在服务端中设置一个接口

app.get('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000);
    //设置响应体
});

HTML页面中的代码与之前一样，设置一个按钮和一个div盒子。
在页面中，就会实现点击按钮过两秒再出现内容的情况。

这个时候做一个超时设置，即经过2s如果还没有结果返回，就取消这个请求。
只用再原来的事件绑定中加一串超时设置的代码即可。

这个时候再打开页面按下按钮，打开F12检查。

会发现过了一会delay被cancel（取消）了。页面中也没有响应结果显示。
这个时候可以设置一个超时回调，就是请求超时的时候，会执行的函数，比如我写了一个警告。

ontimeout就是超时回调的函数。这个时候再打开页面。

就会显示响应内容了。
这里还有一个网络异常回调函数。
写法与超时回调类似，这里写成

xhr.onerror = function () {
                alert("你的网络好像炸了！！！");
            }

打开后，要在断网情况下，就会显示响应结果。可以在chrome浏览器的F12的network中选择offline。

这样在页面中就显示出来了

这次主要学了AJAX对请求超时与网络异常的处理。