Ajax学习(5)--后续

78 阅读2分钟

热部署?

在前几节的代码编写过程中一旦我们更改了服务端代码便需要重新启动后端,所以有这样一个工具可以实现热部署,当我们更改了后端代码并且保存时,它会帮助我们重新运行这个后端文件。下面贴上地址。 nodemon

IE缓存问题的解决

Ajax在向后端发送请求,后端传输回结果时IE会将结果进行缓存,后续如果我们再发送相同的请求,我们得到的答案就是缓存中的结果。这对于一些实时显示的数据来说会存在一些问题(比如前端询问时间,后端传回)。那么如何避免这种情况出现,我们的一种思路是确保每次请求不一样即可。下面给出一种依托于时间的解决思路。

xhr.open("GET","http://127.0.0.1:8080/server_json?t=" + Date.now());

由于每次的时间戳都不可能一样,所以每次都是一个新的请求,每一次都能得到最新的请求。(我们用到的工具中大概率会对此进行一个基本的封装,也就是不需要我们考虑IE缓存的问题。

请求异常的一些问题(请求超时,取消请求,重复请求)

在使用过程中无法确保每次都能够及时得到后端的响应,因此需要对应答时间做一个限制与相应的处理,不能让程序一直等。

//超时时间
xhr.timeout = 2000;
//请求超时
xhr.ontimeout = function(){
    alert("请求相应时间过长!");
}
//断网
xhr.onerror = function(){
    alert("断网咯~");
}
//取消请求
xhr.abort();

还有些用户就喜欢多点几下,可能我们的服务器就是土豆做的,因此需要对请求的频率进行一定的限制,防止服务器爆了(重复请求)。

let sending_flag = false;

...

if(sending_flag) xhr.abort();//如果在发送那么就取消第一次请求发送第二次的请求。
xhr = new XMLHttpRequest();
sending_flag = true;

···//设置请求URL与发送的参数

if (xhr.readyState === 4) {
    sending_flag = false;
}

码字不易,还请各位老板点个赞