javascript——ajax使用以及状态码详解

ajax主要用于异步操作，与服务器或者其他网站进行交互，在不用刷新整个页面的情况下也可以更新数据

// 当然，这与服务器请求没有做跨域处理，所以会报错

<script>
    var xhr=new XMLHttpRequest();  // 创建XMLHttpRequest，以进行ajax交互
    // 侦听ajax对象的状态码是否改变，并声明ajax回调函数
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4 && xhr.status === 200){
            console.log(xhr.responseText)
        }else{
            // 请求中
        }
         
    }
    // 定义ajax的请求方法以及请求路由，是否启用异步，在服务器需要验证登录时后面还可以加两个参数，分别为用户名以及密码
    xhr.open('GET','http://localhost:3002',true)
    // 发送用户请求
    xhr.send()
</script>

以上代码中的onreadystatechange变量为ajax的回调函数，通过侦听ajax返回的状态码变化，来判断请求是否完成

readyState的状态有五种

状态为 0 时，为 XMLHttpRequest 对象已经初始化状态，但是还没有调用open函数设置请求的方法以及路由等，

状态为 1 时，表示XMLHttpRequest对象正在向服务器发送数据，为正在进行时，XMLHttpRequest对象已经调用了open函数，并设置好了请求方法等

状态为 2 时，表示XMLHttpRequest对象已经接收完服务器的数据，但是还不能做进一步处理。也就是send方法执行完成，并且接受了服务器的数据，但是还没有处理数据

状态为 3 时，表示XMLHttpRequest对象正在解析服务器传过来的数据，根据服务器传过来的MIME类型进行解析成可以通过responseBody、responseText或responseXML属性存取的格式，但是处于解析中，为正在进行时

状态为 4 时，表示XMLHttpRequest对象已经解析完数据，可以在客户端进行操作了

 

XMLHttpRequest对象的整个流程就是，创建XMLHttpRequest对象，调用open方法设置请求的方法，请求的URL，是否启用异步（默认为true），还有两个可选参数（当服务器需要验证时启用）为用户名、密码，然后调用send方法发送数据给服务器端，设置回调函数来侦听状态码的变化，以判断进度。readState的状态变化为 ：

创建XMLHttpRequest对象——>readState为 0（初始化请求）——>readState为 1 （发送请求）——>readState为 2（接收数据）——>readState为 3（解析数据）——>readState为 4（请求完成）

status状态码

常见的status概述（仅供参考）

0-199表示需要用户进一步操作，数据为临时响应数据

200-299表示成功处理了请求的代码

300-399为重定向状态码，表示如果要完成，需要进一步操作

400-499为请求错误，妨碍了服务器处理

500+为服务器错误，多为服务器内部错误，而不是请求端的错误

 

status的详情状态码可以参考这篇文档