ajax前后端交互

ajax

        是：  *Ajax* 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

---

ajax的基本使用       （详见ajax案例）

    1.新建XMLHttpRequest对象

             let xhr = new XMLHttpRequest()

    2.配置请求参数

            xhr.open("get","/checkUser",true);                 //checkUser地址。true是异步，false是同步

    3.接收返还值

            xhr.onload = function(){

                let res = JSON.parse(xhr.responseText);

             }

    4.发送服务器

            xhr.send();

readyStatus      （老的方式，请求状态，可以不用）

---

针对ajax的详细解释

get注意点

        get和querystring的问题，通过url传参    （带参方式）

        get通过parmas传参    （跟querystring区别是不带参数会错误）

带个4的参数

在后台路由指定是什么

post注意点

        发送数据时候需要设置http正文头格式

            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");      //默认编码

            xhr.setRequestHeader("Content-type","multipart/form-data");      //二进制编码

            xhr.setRequestHeader("Content-type","application/json");      //json编码

获取头部信息；

            getAllResponseHeaders  或者是getResponseHeader 

---

onreadystatechange

    onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

    readyState：存有服务器响应的状态信息

                0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

                1: 服务器连接已建立（`open`方法已经被调用）

                2: 请求已接收（`send`方法已经被调用，并且头部和状态已经可获得）

                3: 请求处理中（下载中，`responseText` 属性已经包含部分数据）

                4: 请求已完成，且响应已就绪（下载操作已完成）

    status常用状态码

            HTTP                状态码描述

            100                    继续。继续响应剩余部分，进行提交请求

            200                    成功

            301                    永久移动。请求资源永久移动到新位置

            302                    临时移动。请求资源零时移动到新位置

            304                    未修改。请求资源对比上次未被修改，响应中不包含资源内容

            401                    未授权，需要身份验证

            403                    禁止。请求被拒绝

            404                    未找到，服务器未找到需要资源

            500                    服务器内部错误。服务器遇到错误，无法完成请求

            503                    服务器不可用。临时服务过载，无法处理请求

---

返还数据类型  

        服务器返还json数据

                xhr.responseText  //来获取     文本

        服务器返还xml数据

                xhr.responseXML //获取值     页面

---

重写response里的content-type内容

        xhr.overrideMimeType('text/xml; charset = utf-8')

---

同步及异步ajax

        设置true和false区别；

                1.异步，任务不需等待不受影响

                2.同步，等待其他任务完成

---

利用FormData来实现文件上传      （详见FormData案例）

        创建FormData对象

        监控上传进度

              upload 事件

                onloadstart   上传开始

                onprogress  数据传输进行中

                evt.total ：需要传输的总大小；

                evt.loaded :当前上传的文件大小；

                onabort 上传操作终止

                onerror  上传失败

                onload 上传成功

                onloadend 上传完成（不论成功与否）

---