AJAX问题之XMLHttpRequest status = 0

ajax.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="showInfo"></div>
        <form id="form">
            用户名:<input type="text" name="username" id="username"><br>
            密码:<input type="password" name="password" id="password"><br>
            <input type="button" value="登录" id="btn">
        </form>

        <script>
            window.onload = function () {

                var btn = document.getElementById('btn');

                btn.onclick = function(){
                    var username = document.getElementById("username").value;
                    var password = document.getElementById("password").value;
                    var xhr = null;
                    if (window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                    }else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    var url = './check.php?username='+username+'&password='+password;
                    xhr.open('get',url,true);

                    xhr.onreadystatechange = function(){
                        if (xhr.readyState==4) {
                            if (xhr.status==200) {
                                var data = xhr.responseText;
                                if (data==1) {
                                    document.getElementById('showInfo').innerHTML='用户名或者密码错误';
                                }else if(data==2){
                                    document.getElementById("showInfo").innerHTML ='登录成功';
                                }
                            }
                        }
                    }
                    xhr.send(null);
                }
            }
        </script>

    </body>
</html>

check.php

<?php
    $username = $_GET['username'];
    $password = $_GET['password'];
    if ($username == '1' && $password == '1') {
        echo 2;
    }else {
        echo 1;
    }
?>

XMLHttpRequest status = 0 问题。
xmlhttp.readyState =4的时候,一直xmlhttp.status != 200。便随手输出,发现xmlhttp.status=0,http协议里可是没这个状态码的。最后翻啊翻啊,找啊找啊,最后找到一个XMLHttpRequest的说明:http://www.w3.org/TR/XMLHttpRequest/
The status attribute must return the result of running these steps:
status的值一定会返回运行这些步骤的结果。

1、If the state is UNSENT or OPENED, return 0.(如果状态是UNSENT或者OPENED,返回0)
2、If the error flag is set, return 0.(如果错误标签被设置,返回0)
3、Return the HTTP status code.(返回HTTP状态码)

如果在HTTP返回之前就出现上面两种情况,就出现0了。
先说两个button,一个是url是:file:///E:/test2.html,另外一个是:http://www.baidu.com

第一个button的url访问只是本地打开没有通过服务器,自己可以用Wireshark捉包(感谢某位高人指点)。
这里面还有一个问题,就是xmlhttp.readyState一直会变,
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪。
以这种情况看的话,应该是xmlhttp自己在模拟,因为根本就没通过服务器。本地直接打开而已。OPENED了,所以status为0。

第二个button的url访问虽然是其他域名,抓包是有的,但是,这是跨域访问了,
If the cross-origin request status is network error

This is a network error.

虽然去访问了,应该是浏览器跨域的返回头没有允许,所以浏览器阻止,Access-Control-Allow-Origin这个属性。

真确的方法是在自己的服务器,访问自己域名内的url。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值