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

注:以下状态码大部分都是自己项目中遇到的，现记录方便日后查看。

通常前后端使用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等方式均报错。

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

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

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

ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊的对象

(XMLHttpRequest对象，一般称之为ajax对象)异步地（当ajax对象发请求时，浏览

器不会销毁当前页面，用户任然可以对当前页面做其他操作）向服务器发送请求，

服务器送回部分数据（并不是一个完整的页面），利用这些数据更新当前页面。整

个过程，页面无刷新，不打断用户的操作

编程步骤：

step1，获得ajax对象

比如：

var xhr=getXhr();

step2，发请求:

方式一：get请求

xhropen('get','check_usernamedousername=zs',true);

请求参数、请求资源路径、是否异步

注意：

a，get请求必须将请求参数添加到请求资源路径的后面。

b，true表示异步请求、false表示同步请求。

异步请求：发请求时，浏览器不会销毁当前页面，用户可以对当前页面做

其他操作。

同步请求：发送请求时，浏览器不会销毁当前页面，用户不可以对当前页面

做其他操作。

xhronreadystatechange=f1;

xhrsend(null);

方式二：post请求

xhropen('post','','')

step3，编写服务器端的处理程序，一般服务器只需要返回部分的数据。

step4，编写事件处理函数。

function f1(){

if(xhrreadyState==4){

var txt=xhrresponseText;

使用txt更新当前页面

}

}

java服务器端处理ajax发送的请求，和处理其他请求是一样的，只是在客户端页面表现的不同，比如：执行页面发送删除请求，服务器端在执行删除后，页面是需要刷新的。

ajax最经典的用法是验证码，注册页面如果因为验证码输入错误要刷新，之前的信息重填，估计用户会崩溃，采用ajax异步发送请求，就不会影响之前填写的信息

在发送ajax请求的时候，为了保证每次的都与服务器交互，就要传递一个参数每次都不一样，这里就用了时间戳

大家在系统开发中都可能会在js中用到ajax或者dwr，因为IE的缓存，使得我们在填入相同的值的时候总是使用IE缓存

什么是Ajax缓存原理？

Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。

Ajax缓存的好处

这种设计使客户端对一些静态页面内容的请求，比如，css文件，js脚本等，变得更加快捷，提高了页面的响应速度，也节省了网络通信资源。

Ajax缓存的不足

Ajax缓存虽然有上述的好处，但是如果通过Ajax对一些后台数据进行更改的时候，虽然数据在后台已经发生改变，但是页面缓存中并没有改变，对于相同的URL，Ajax提交过去以后，浏览器还只是简单的从缓存中拿数据，这种情况当然就不行了。

四、解决Ajax缓存问题的方法

解决这个问题最有效的办法是禁止页面缓存，有以下几种处理方法：

1、在ajax发送请求前加上 xmlHttpRequestsetRequestHeader(“Cache-Control”,”no-cache”);

2、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);

3、在ajax发送请求前加上 xmlHttpRequestsetRequestHeader(“If-Modified-Since”,”0″);

4、在 Ajax 的 URL 参数后加上 "fresh=" + Mathrandom(); //当然这里参数 fresh 可以任意取了

5、第五种方法和第四种类似，在 URL 参数后加上 "timestamp=" + new Date()getTime();

6、用POST替代GET：不推荐

7、 jQuery 提供一个防止ajax使用缓存的方法：

javascript" language=" JavaScript ">

$ajaxSetup ({

cache: false //close AJAX cache

});

8、修改load 加载的url地址，如在url 多加个时间参数就可以：

function loadEventInfoPage(eventId){

$ajaxSetup ({

cache: true // AJAX cache  下面加上时间后load的页面中的js、css等都会重新加载，

//加上这句action会重新加载，但是js、css、等会走缓存

});

$("#showEventInfo")load(ctx + "/custEvents/viewEventaction",  {"complaintId":eventId, "tt":(new Date())getTime()},function(){})

}

9、设置html的缓存

分类: 电脑/网络 >> 互联网

问题描述:

他和WEB20有没有联系了

解析:

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

主要包含了以下几种技术：

Ajax（Asynchronous JavaScript + XML）的定义

基于web标准（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）进行动态显示及交互；

使用 XML 和 XSLT 进行数据交换及相关操作；

使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文a

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/posite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Inter Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

与传统的web应用比较

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

Ajax应用程序的优势在于：

1 通过异步模式，提升了用户体验

2 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3 Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Inter Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：

动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。

提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在某购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载整个页面的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。

直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。

一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

ajax请求的五个步骤如下

步骤如下五个步骤

1创建异步对象，首先，创建一个XMLHttpRequest异步对象。

2设置请求方式和地址，然后，设置请求方式和请求地址

3用send发送请求，接着，用send发送请求。

4监听状态变化，然后，监听状态变化。

5接收返回的数据，最后，接收返回的数据