AJAX与后端联调问题

在以前，传统的Web应用使用的是用户端填写表单（form），当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求，应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

前后端联调的时候，很容易出现ajax报错，具体报错内容我们可以使用ajax对返回状态的处理，ajax出错一般会进入到error之中。错误返回参数有jqXHR jqXHR, String textStatus, String errorThrown这三个。

$.ajax({url: '/url',            success: function (data) {/*程序片*/},error: function (jqXHR, textStatus, errorThrown) {/*错误信息处理*/}});

第一个参数有主要有4个属性：

readyState :目前状态值
0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
status ：返回的HTTP状态码，比如常见的404,500,405等错误代码。
statusText ：对应状态码的错误信息
responseText ：服务器响应返回的文本信息

第二个参数返回的是字符串类型，它表示返回的状态，根据服务器不同的错误可能返回下面这些信息：“timeout”（超时）, “error”（错误）, “abort”(中止), “parsererror”（解析错误），还有可能返回空值。
第三个参数返回的是字符串类型，它表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息。
用户可以根据这几个数值准确找到具体的问题，并进行解决。
当然还有，在我使用ajax的时候，前端调用了后端的接口，但ajax进入error操作，提示404/500.这种情况一般是由于对ajax的contentType以及dataType这两个值设置与后端接受和发送的数值不同而导致的。
其中常出现的状态码有：
200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
404（未找到）服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。
405（方法禁用）禁用请求中指定的方法。
500（服务器内部错误）服务器遇到错误，无法完成请求。
其余状态码，引用其他伙伴写好的内容：
http statusCode(状态码) 200、300、400、500序列

AJAX与后端联调问题相关推荐

vue框架前后端联调流程
什么是前后端联调定义在我们开发的过程中,发送请求的ajax数据都不是后端返回的真数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完成后,后端的接口也写好后,我们就需要把mock数据 ...
java request payload_前后端联调之Form Data与Request Payload，你真的了解吗？
前言做过前后端联调的小伙伴,可能有时会遇到一些问题.例如,我明明传递数据给后端了,后端为什么说没收到呢?这时候可能就会就会有小伙伴陷入迷茫,本文从chrome-dev-tools(F12调试器)中看 ...
前后端联调（1） ——Web前端部分
前后端联调问题引出在前后端约定好api接口后,同步进行开发,前端没有数据支持,造成了阻塞. 这时候一般前端只能做假数据(专业点叫mock数据,^_^)理想情况下定义好api路径和数据之间的映射即可 ...
webApi前端ajax调用后端返回{“readyState“:0,“status“:0,“statusText“:“error“}解决方案
webApi前端ajax调用后端返回{"readyState":0,"status":0,"statusText":"error& ...
用了这个 IDE 插件，5分钟解决前后端联调！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 李海庆我是一个 Web 开发前端工程师,受到 ...
5 分钟解决前后端联调问题，说一说前端代理这件事
简介: 简洁,又能触达痛点的一站式前端代理解决方案,你值得拥有. 作者:寒斜说到前端代理,相信每一个做过前后端联调的同学都有遇到过.当下涉及前后端工程项目的研发,主流模式一定是前后端的分离.它让前后 ...
Vue前端和Java后端联调使用AES 前后端加密解密
Vue前端和Java后端联调使用AES 前后端加密解密最近在项目中需要针对重要数据进行加密传输,在网上找了一大推加密方式最终采用AES 加密 Java端 package com.zk.web.u ...
京东java前后端联调_前端工程化、组件化实践JDM分享
前端技术原创文前端工程化.组件化实践JDM分享该文由孵化创新一部曾瑞文在研究院技术分享会的分享内容总结而成,主要讲解了团队创新的前端工程化.组件化的思想及实践应用. 为什么要搞前端框架? Java ...
前后端联调的一般步骤和Nginx简单配置
前后端联调的一般步骤 1.创建前端工程(这里创建的是vue-cli项目) 2.编写后端登录业务 3.替换页面元素为自己需要的,比如图标,标题之类的 4.编写前端页面Vue组件 5.编写跳转到组件的路由 ...

AJAX与后端联调问题

AJAX与后端联调问题相关推荐

最新文章

热门文章