Code笔记 之：ajax诡异的错误-请求status为200

Ajax测试：打印出接收到的数据

诡异jquery ajax satus为200却出现错误

今天遇到的问题，不知道如何解决了。出现这样的情况，不是因为jquery的ajax写法失败，也不是请求失败，那是什么呢？

1、jquery的ajax请求的主要参数

beforeSend：发送ajax请求之前

success：发送ajax请求成功

error：发送ajax请求错误，通常是网络失去连接、服务器出错、后台方法错误等造成的

2、目前的现象

自身代码是这样子的

……
    $.ajax({
        url: path+"/**",
        //timeout: 8000,
        cache: false,
        type: "post",
        dataType: "json/html",
        data: {"txtReal": tr,"txtCard": tc,"txtPhone": tp,"txtPhoneCode": tpcod},  //`adm:reg20160616`,"txtPhone","txtPhoneCode"
        error: function(d){
            alert("error");
            alert(curpath);
            alert($("#txtReal").val());
            alert(tc);
            alert(tp);
            alert(tpcod);
        },
        success: function (d, s, r) {
            if(d){
                if(d.status==0){
                    $.jBox.tip(d.message,"fail");
                }else{
                    window.location.href="/member/bank/bindingAccount";
                }
            }
        }        
    });

……

为了能随时复制测试，用以下代码来写

再现一次ajax请求，以下仅提供截图。

$(function()

{

$.ajax(

{

url:location.href,

dataType:'json',

type:'post',

data:{action:'_yundanran-all-cat'},

beforeSend:function()

{

console.log('beforeSend');

},

success:function()

{

console.log('success');

},

error:function()

{

console.log('error');

},

complete:function()

{

console.log('complete');

}

});

});

您可以复制这一段代码到控制台运行试试，返回的结果是这样的：

如图红色选择的区域，出现error，说明jquery的ajax请求失败，失败的代码是textstatus：parsererror，那么我们可以看下实际的请求是怎样的：

如果红色的标记，请求状态是200，表明请求成功，并且已经正确发送了参数action。看下返回的结果是怎样的：

返回的结果确实是对的。

这样就很奇怪了，明确ajax请求正确，并且正确的返回了内容。但jquery的ajax函数里却判断的是错误的请求。并且这种怪现象是从昨晚（2012年11月6日）开始的，之前一直很正常的。

3、解决方案

• 1、删除后台程序的输出部分 。

 

• 2、在ajax的输出结尾加上exit();防止输出额外内容。

如：

// json格式头信息

header("Content-Type: application/json");

// 输出json内容

echo json_encode($json);

// exit结束程序运行

exit;

 

转载自：http://qianduanblog.com/post/jquery-ajax-status-success-200.html

 

Ajax的status值说明

1、status=304

304不是错误，304是服务器告诉你，你请求的这个url，内容没有变化，浏览器可以直接使用本地缓存，避免浪费网络流量，提高用户响应速度

因为ajax请求的时候如果使用get方式请求，同时路径参数相同的时候，ajax会先从本地缓存中取，如果取到了它是不会去请求后台的

如果要避免得到304响应，可以在请求的url添加一个随机参数，如js代码：
url = url + "&" + new Date();

2、status=302

    $.ajax({
        url: curpath+"/regFinal",
        //timeout: 8000,
        cache: false,
        type: "post",
        dataType: "json/html",
        data: {"txtReal": tr,"txtCard": tc,"txtPhone": tp,"txtPhoneCode": tpcod},  //`adm:reg20160616`,"txtPhone","txtPhoneCode"
…………

当服务器将302响应发给浏览器时，浏览器并不是直接进行ajax回调处理，而是先执行302重定向——从Response Headers中读取Location信息，然后向Location中的Url发出请求，在收到这个请求的响应后才会进行ajax回调处理。大致流程如 下：

ajax -> browser -> server -> 302 -> browser(redirect) -> server -> browser -> ajax callback

而在我们的测试程序中，由于302返回的重定向URL在服务器上没有相应的处理程序，所以在ajax回调函数中得到的是404状态码；如果存在对应的URL，得到的状态码就是200。

所以，如果你想在ajax请求中根据302响应通过location.href进行重定向是不可行的。

如何解决？

【方法一】

继续用ajax，修改服务器端代码，将原来的302响应改为json响应，比如下面的ASP.NET MVC示例代码：

return Json(new { status = 302, location = "/oauth/respond" });

ajax代码稍作修改即可：

$.ajax({
    url: '/oauth/respond',
    type: 'post',
    data: data,
    dataType: 'json',
    success: function (data) {
        if (data.status == 302) {
            location.href = data.location;
        }
    }
});        

【方法二】

 不用ajax，改用form。 

<form method="post" action="/oauth/respond">
</form>

 

3、status=200

状态码为200表示成功获取资源。

当浏览器第一次加载资源的时候，返回一般为200，意思是成功获取资源，并会在浏览器的缓存中记录下max-age，第二次访问的时候：
如果只是用浏览器打开，那么浏览器会去判断这个资源在缓存里有没有，如果有的话，会去判断max-age，看看过期没有，如果没有过期，则直接读缓存，根本不会和服务器进行交互，换句话说，断网都能打开，就和本地跑一样！如果已经过期了，那就去服务器请求，等待服务器响应，这是很费时间的，服务器如果发现资源没有改变过，那么就会返回304，告诉浏览器，我没变过，你去读缓存吧，于是浏览器也不用从服务器拉数据了，然而，等待服务器响应也是一个很要命的问题，在网速发达的今天，等一个响应，有时比下载还慢。
如果是用浏览器刷新的，那么浏览器不会去判断max-age了，直接去服务器拿，如果服务器判断资源没变过，则还是会返回304，和上面是一样的，所以刷新一下，其实很可怕，等于把所有的资源都要去服务器请求一边，问问服务器我过期了没有。
综上，尽量减少网页的资源数量！尽量合并JS CSS 图片！响应速度将会猛增！
当今，响应速度比网速重要！！

 

 

Ajax测试：打印出接收到的数据

 

PS：JavaScript测试-Ajax

　　ajax传递参数到后台，使用json类型（dataType:json）返回

　　　若想知道，链接或返回错误在后台什么位置出现的，可以简单些一段测试代码逐步运行测试

　　　测试代码（PHP语言）可以是这样，比如：

　　方法一：

　　　　直接在PHP代码中使用  print_r($data);或print($data);

　　　　然后，在html页面中使用 ajax 接收

　　　　$.ajax({　　　　　　

　　　　　　url: "你的方法url",

　　　　　　data: 'str='+str+'&str1='+str1+…………,

　　　　　　dataType: "json",

　　　　　　type: "post",

　　　　　　cache: false,

　　　　　　error: function(){ alert("error~"); },

　　　　　　success: function(d){

　　　　　　　　alert(d);

　　　　　　}

　　　　});

　　方法二：

　　　if(true){

　　　　$json['status']=0;

　　　　$json['message']="代码已运行至此~~";

　　　　echo json_endecode($json);

　　　　exit; 

　　　}

 　　　　html页面前台反馈代码是这样：

　　　　$.ajax({

　　　　　　url: "你的方法url",

　　　　　　data: {'str':str,str1:str1,…………},

　　　　　　dataType: "json",

　　　　　　type: "post",

　　　　　　cache: false,

　　　　　　error: function(){ alert("error~"); },

　　　　　　success: function(d){

　　　　　　　　alert(d.status + d.message);

　　　　　　　　//alert(d.message);

　　　　　　}

　　　　});

 

 

 

--------------------------------------------------------------

由于个人对技术知识的表达不是很专业，还望各位看官

多多见谅，多多评论，多多指导！

不吝赐教~(~_~)

---------------------------------------------------------------

撰写日期：2016-6-17 15:59:25

更新时间：2016-6-20 11:24:04