原生js的ajax请求

原生js发送请求

​ 1、实例化ajax对象

​ 2、使用ajax对象调用open设置请求的基本信息（请求方式和url）

​ 3、给这个ajax对象绑定监听状态改变函数，在处理函数可获取响应数据，ajax.onreadystatechange

​ 4、手动发送请求 xhr.send()

// get请求
        var xhr = new XMLHttpRequest()
        console.log(xhr);
        // get请求传参，在url最后加上需要传递的参数，例如： '?orderType=${num.value}&currentPage=${num1.value}'
        xhr.open('get', 'http://kumanxuan1.f3322.net:8809/travels/query')
        // 监听状态改变的函数
        xhr.onreadystatechange = function () {
            // xhr.readyState == 4 && xhr.status == 200表示请求和响应都成功了
            if (xhr.readyState == 4 && xhr.status == 200) {
                // JSON.parse()反序列化
                console.log(JSON.parse(xhr.responseText));
            }
        }
        // 手动发送请求
        xhr.send()


// post请求
            btn.onclick = function () {
            // 取值
            var username = user.value.trim()
            var password = pwd.value.trim()
            // 非空判断
            if (username && password) {
                // 创建xhr实例
                var xhr = new XMLHttpRequest()
                // 调用open请求方式
                xhr.open('post', 'http://kumanxuan1.f3322.net:8809/users/login')
                // 设置请求头的Content-type
                /* 
                    application/x-www-form-urlencoded：字符串/浏览器默认
                    application/json json格式数据
                    application/form-data 有一些上传东西格式
                */
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                // 监听状态改变的函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 打印响应成功的内容
                        console.log(xhr.responseText);
                    }
                }
                // 发送请求
                xhr.send(`username=${username}&password=${password}`)
            } else {
                alert('请输入用户名和密码')
            }
        }
        

处理兼容：

JS的Ajax对象：XMLHttpRequest 对象用于在后台与服务器交换数据。

响应处理和响应流程

AJAX 对象中有 4 个属性：

• readyState 总共有 5 个状态值，分别为 0 ~ 4，每个值代表了不同的含义：

  • 0：初始化，AJAX 对象还没有完成初始化
  • 1：载入，AJAX 对象开始发送请求
  • 2：载入完成，AJAX 对象的请求发送完成
  • 3：解析，AJAX 对象开始读取服务器的响应
  • 4：完成，AJAX 对象读取服务器响应结束

• status 表示响应的 HTTP 状态码，常见状态码如下：

  • 200 OK：请求成功
  • 302 Found：重定向，新的 URL 会在 response 中的 Location 中返回，浏览器将会使用新的 URL 发出新的 Request
  • 304 Not Modified：已缓存，文档已经被缓存，直接从缓存调用
  • 400 Bad Request：客户端请求有语法错误，不能被服务器所理解
  • 403 Forbidden：服务器收到但拒绝服务，引用外部资源触发防盗链
  • 404 Not Found：找不到资源，请求资源不存在
  • 500 Internal Server Error：服务端错误，服务器发生了不可预期的错误
  • 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常

• responseText 获得字符串形式的响应数据。

• responseXML 获得 XML 形式的响应数据。

  在状态改变的处理函数一般针对 readyState == 4 且 status == 200 的情况才处理，再根据后台返回的数据类型决定从 responseText 或者 responseXML 获取服务器响应回去来的数据。

  总结：

  1. 需要获取数据的时候，使用get请求
  2. 需要传递参数给后台并完成某些功能的时候，使用post请求