前端ajax请求常见的状态码以及产生的原因

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端ajax请求常见的状态码以及产生的原因相关的知识,希望对你有一定的参考价值。

参考技术A

注:以下状态码大部分都是自己项目中遇到的,现记录方便日后查看。
通常前后端使用ajax交互时,客户端向服务器发送请求时,然后服务器向我们返回状态码。 状态码就是告诉我们服务器响应的状态 ,由3位数字组成,其中第一位数字表示响应类别,响应类别从1到5分为五种 。

表示请求被服务器正常处理 ,最常见的就是这个

表示请求已成功处理,但是没有内容返回
也就是返回的响应报文中没有报文实体
一般用在只是客户端向服务器发送信息,而服务器不用向客户端返回什么信息的情况

永久重定向,表示请求的资源已经永久的搬到了其他位置 ,资源已经被分配了新的URI

临时重定向,表示请求的资源临时搬到了其他位置 ,请求的资源暂时被配到到了新的URI,和301很像,只不过资源是临时移动

表示请求资源存在另一个URI,应使用GET定向获取请求资源
303功能与302一样,区别只是303明确客户端应该使用GET访问

表示客户端自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。
304通常在IE浏览器下多次请求同一个地址出现的。
场景:删除表格其中一条数据后重新请求列表数据渲染表格,第二次请求时状态码是304导致被删除的数据还是出现在前端。
原因:IE浏览器下同一地址的ajax请求优先读取本地缓存数据
解决方法:在请求地址后面加上时间戳,保证每次请求的地址都不一样,这样浏览器就无法读取缓存。

表示请求报文存在语法错误或参数错误,服务器不理解 ,需要修改请求内容后再次发送

表示发送的请求需要有HTTP认证信息或者是认证失败了
返回401的响应必须包含一个适用于被请求资源的WWW-Authenticate首部以质询用户信息

表示对请求资源的访问被服务器拒绝了,通常是 没有权限或者跨域

表示服务器找不到请求的资源

表示请示方式不对,注意检查method,比如后端定义post请求方式而我们用了get,delete,put,path等方式均报错。

表示服务器执行请求的时候出错了。(后端的问题)

表示服务器超负载或正停机维护,无法处理请求

以上,如有错误欢迎指正,如果喜欢还请点个赞再走,谢谢!更多项目实战源码请移步我的 码云地址

http常见状态码有哪些?

ajax常见面试题

1:什么是ajax?ajax作用是什么?

异步的javascript和xml  AJAX 是一种用于创建快速动态网页的技术。  ajax用来与后台交互

2:原生js ajax请求有几个步骤?分别是什么

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open(‘GET‘,url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
};

3:json字符串转换集json对象、json对象转换json字符串

//字符串转对象
JSON.parse(json)
eval(‘(‘ + jsonstr + ‘)‘)   
// 对象转字符串
JSON.stringify(json)

4:ajax几种请求方式?他们的优缺点?

常用的post,get,delete。不常用copy、head、link等等。

###代码上的区别
 1:get通过url传递参数
 2:post设置请求头  规定请求数据类型
###使用上的区别
 1:post比get安全
 (因为post参数在请求体中。get参数在url上面)
 2:get传输速度比post快 根据传参决定的。
 (post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
 3:post传输文件大理论没有限制  get传输文件小大概7-8k ie4k左右
 4:get获取数据	post上传数据
 (上传的数据比较多  而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

5:什么情况造成跨域?

同源策略限制 不同源会造成跨域。以下任意一种情况不同,都是不同源。

http://www.baidu.com/8080/index.html

http://协议不同
www 子域名不同
baidu.com 主域名不同
8080 端口号不同
www.baidu.com ip地址和网址不同

6:跨域解决方案有哪些?

1:jsonp 只能解决get跨域(问的最多)

  • 原理:动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
  • 步骤:
  1. 去创建一个script标签
  2. script的src属性设置接口地址
  3. 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
  4. 通过定义函数名去接收后台返回数据
//去创建一个script标签
var  script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}

2:CORS:跨域资源共享

  • 原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求
  • 限制:浏览器需要支持HTML5,可以支持POST,PUT等方法兼容ie9以上
需要后台设置
Access-Control-Allow-Origin: *              //允许所有域名访问,或者
Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

3:设置 document.domain

  • 原理:相同主域名不同子域名下的页面,可以设置document.domain让它们同域
  • 限制:同域document提供的是页面间的互操作,需要载入iframe页面
// URL http://a.com/foo
var ifr = document.createElement(‘iframe‘);
ifr.src = ‘http://b.a.com/bar‘; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};

ifr.style.display = ‘none‘;
document.body.appendChild(ifr);

4:用Apache做转发(逆向代理),让跨域变成同域

7:http常见状态码有哪些?

一: 2开头状态码

2xx (成功)表示成功处理了请求的状态代码
200 (成功) 服务器已成功处理了请求。 通常。

二: 3开头状态码

3xx (重定向) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。

三: 4开头状态码

4xx(请求错误) 这些状态代码表示请求可能出错,妨碍了服务器的处理
1:400 (错误请求) 服务器不理解请求的语法。
 
2:403 (禁止) 服务器拒绝请求。

3:404 (未找到) 服务器找不到请求的网页。

四: 5开头状态码

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错
500 (服务器内部错误) 服务器遇到错误,无法完成请求。

501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。

502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。

503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。

504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。

505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。


转载:https://juejin.im/post/5aa2b26b518825556020873f
原作者:不爱写代码的程序员
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。




以上是关于前端ajax请求常见的状态码以及产生的原因的主要内容,如果未能解决你的问题,请参考以下文章

前端面试-Web-API-Ajax

ajax成功请求到后台,但是前端报404错误

HTTP请求状态码为400时的原因

前端面试必问的Http状态码以及代表的意义

前端技能树,面试复习第 32 天—— 计算机网络:HTTP 状态码详解

javascprit form表单提交前验证以及ajax返回json