ajax异步错误原因,记一次使用ajax时忽略其“异步”性质而犯的低级错误

记一次使用ajax时忽略其“异步”性质而犯的低级错误

2020年07月14日

| 萬仟网IT编程

 | 我要评论

前言前些天在使用ajax的时候，犯了傻，改一个bug改了很久，今天特地记录一下。问题描述使用ajax请求后台数据，然后加入到html页面中，思路流程大概是这样的：ajax请求后台数据全部后台数据保存到一个全局变量(数组)将请求到的部分数据动态加入页面的innerHTML中之所以不直接加入全部数据，是因为数据量太大，加载慢，故使用【懒加载】的方式，即用户滑屏幕到最下方才加载新一部分的数据。看起来好像没啥问题，逻辑上也说得通。但是实际执行的时候，发现第一次载入数据时，全局变量总是undef

前言

前些天在使用ajax的时候，犯了傻，改一个bug改了很久，今天特地记录一下。

问题描述

使用ajax请求后台数据，然后加入到html页面中，思路流程大概是这样的：

ajax请求后台数据

全部后台数据保存到一个全局变量(数组)

将请求到的部分数据动态加入页面的innerHTML中

之所以不直接加入全部数据，是因为数据量太大，加载慢，故使用【懒加载】的方式，即用户滑屏幕到最下方才加载新一部分的数据。

看起来好像没啥问题，逻辑上也说得通。但是实际执行的时候，发现第一次载入数据时，全局变量总是undefined的，导致第一次数据刷新不出来，进而导致页面没有滑到最下方，进而导致加载卡死。

这个bug我改了很久，上网查了很多资料，终于找到原因。

问题分析

因为ajax是异步的。对 异步，这意味着，我们第一次载入数据的时候，可能ajax的请求还未完成。因为异步请求之后，马上就会载入数据，而不是等待请求的完成。

因为向服务器请求数据的时间代价远大于执行JavaScript的时间，所以下文执行载入数据的代码的时候，全局变量仍然未被ajax的返回数据赋值，所以是undefined，这导致了第一次加载的失败

解决方案1：同步ajax

将ajax的请求模式设置为同步，这意味着不会在两个时间线执行JavaScript，必须等待请求结果返回，再执行下面的代码。

解决方案2：ajax请求返回时载入数据

在ajax请求返回时(即回调函数)，再给全局变量赋值，进而加载部分数据(这是初次加载数据)，可以有效保证全局变量不会undefined

本文地址：https://blog.csdn.net/weixin_44176696/article/details/107317335

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

相关文章:

'转发时请保留此声明信息,这段声明不并会影响你的速度! '****天枫AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示...

ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错,

在很多时候,即使ajax提交、返回都正常

...

使用如上方法确实可以实现Ajax分页效果，但我总觉得不够简洁，研究了一下午，终于捣鼓出了点东西O_o首先创建前台页面MyAjaxPa...

使用ajax获取用户所在地的天气，供大家参考，具体内容如下

1.要获取用户归属地的天气，首先得获取用户所在的市区，这里先获取用户的...

复制代码 代码如下:-----------------------------jack的注释  ajaxjs.j...

大家应该可以举出几种常用的异步文件上传功能的实现方式，使用频率较多的有原生ajax和iframe框架，实现图片文件上传，下面就为大家...

由于一中考评系统要加入一个新的功能“调查问卷”，我想沿用别人做好的调查问卷，用别人的有一个好处就是：人家做的专业，界面美化等非常人性...

ajax (ajax开发)

ajax即“asynchronous javascript and xml”(异步javascr...

url:

要求为string类型的参数，(默认为当前页地址)发送请求的地址。

type:

要求为string类型的参数，请求方...

摘要: ajax请求一个二进制流(文件)，转换为blob进行处理或者下载保存文件

需求

管理后台需要随时下载数据报表，数据要实时...

网友评论

验证码：