Javascript Ajax

1.基本使用

• AJAX = Asynchronous JavaScript and XML，即异步 JavaScript 和 XML， 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
• get请求：参数拼接到url后面

<script>
    function getMsg(){
        var url = '/process_get?year=2019&mouth=10&day=25'
        //1.创建xhr对象
        var xhr = new XMLHttpRequest()
        //2.初始化参数
        xhr.open('GET',url,true)
        //3.监听state变化
        xhr.onreadystatechange = function(){
            if (xhr.readyState==4 && xhr.status==200)
            {
                console.log(xhr.responseText)
            }
        }
        //执行发送
        xhr.send(null)
    }
</script>

• post请求：参数放在请求体中，需要在请求投中为不同的参数类型设定不同的Content-type

<script>
    function postMsg(){
        var url = '/process_post'
        //1.创建xhq对象
        var xhr = new XMLHttpRequest()
        //2.初始化参数
        xhr.open('POST',url,true)
       //3.监听state变化
        xhr.onreadystatechange = function(){
            if (xhr.readyState==4 && xhr.status==200)
            {
                console.log(xhr.responseText)
            }
        }
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.withCredentials = true;//跨域访问时携带cookie
        //将要发送的数据传入send()方法
        xhr.send('year=2019&mouth=10&day=25')
    }
</script>

• 设置超时以及超时后的回调

//其他代码略

//超时后的回调
xhr.ontimeout = function () {
  console.error('The request for ' + url + ' timed out.');
}

// 指定 10 秒钟超时
xhr.timeout = 10 * 1000

xhr.send(null)

• 终止请求：通过xhr.abort()方法终止此次请求

var xhr = new XMLHttpRequest()

//abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
xhr.onabort = function () {
  console.log('The request was aborted');
}

//其他代码略
xhr.abort()

2.Content-type

• 这个请求头字段只是声明，前端不会自动为其字段转换发送数据的编码类型，后端也不一定会处理，一般来说，作为业务开发者，契约明确、环境可控 → 追求效率，可省略冗余声明，作为库/框架/中间件作者：面向未知调用方、需保证健壮性与兼容性 → 必须校验 Content-Type
• 如果是get请求，无需设置Content-type，将要发送的数据以 username=xxx&pass=xxx 的形式拼接到url后面

var url = '/process_get?year=2019&mouth=10&day=25'

• 如果是post请求，发送的数据通过 xhr.send() 进行发送，并在请求头中为其设置正确的数据类型，因为它告诉服务器请求体的数据类型是什么。这有助于服务器正确解析请求体中的数据

//urlencoded
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send('year=2019&mouth=10&day=25')

//JSON数据
xhr.setRequestHeader("Content-type","application/json")
xhr.send(JSON.stringify({}))

//FormData 是结构化二进制流 无需设置Content-type
var formData = new FormData()
formData.append('username', '张三')
xhr.send(formData)

• 打个比方：我送个易碎的东西给朋友，我亲自送上门，那些易碎申明可以不要，反正我自己和朋友知道轻拿轻放就行，但是实际上大部分时候，我们送都是都是靠快递，那就的写上电子产品易碎的标签，甚至走保价，不然中间很不可控

3.事件及状态

• onreadystatechange事件，触发事件时xhr.readyState值发生改变

状态码	说明
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

<script>
    function getMsg(){
        var url = 'http://127.0.0.1:8097/api/data.json'
        //创建xhq对象
        var xhr = new XMLHttpRequest()
        //监听state变化
        xhr.onreadystatechange = function(){
            console.log('xhr.readyState = ',xhr.readyState)
        }

        //load 事件（请求成功完成）的监听函数,不一定有数据返回
        xhr.onload = function() {
            console.log('onload',xhr.response)
        };
        //abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
        xhr.onabort = function () {
            console.log('The request was aborted');
        };

        //progress事件（正在发送和加载数据）的监听函数
        xhr.onprogress = function (event) {
            console.log('onprogress',event.loaded,event.total);
        };

        //error 事件（请求失败）的监听函数
        xhr.onerror = function() {
            console.log('There was an error!');
        };

        //发送请求
        xhr.open('GET',url,true)
        xhr.send()
    }

    getMsg()
</script>

• 服务器响应状态通过xhr.status进行判断，他表示HTTP状态码

常用状态码	说明
200	请求已成功，服务器正常处理并返回请求的资源
3xx系列	重定向状态码
401	需要用户进行身份验证
403	没有权限访问
404	未找到页面
5xx系列	服务器错误状态码

一个正常的请求应该是：请求已完成，且响应已就绪 (xhr.readyState == 4) 且 请求已成功，服务器正常处理并返回请求的资源 (xhr.status == 200)

4.服务器的响应

• 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 response / responseText / responseXML 属性
• response/responseText 获得字符串形式的响应数据，可以自主转换成其他类型的数据
• responseXML 获得 XML 形式的响应数据，在没有收到任何数据或数据类型错误的情况下返回的 null

<script>
    //创建服务
    var xhr = new XMLHttpRequest()
    //其他代码略

     var result = JSON.parse(xhr.response)
</script>

5.将token添加到请求头中

• 从localStorage读取token，并使用setRequestHeader()添加到请求头中

xhr.setRequestHeader("Authorization",window.localStorage.getItem('token'));

6.跨域携带cooikie

• 前端设置

xhr.withCredentials = true;//跨域访问时携带cookie

• 后端设置

//1.Access-Control-Allow-Credentials 设置为 true
//2.不能把 Access-Control-Allow-Origin 设置为 “” 或 *，而要设置为客户端发送请求时的IP地址

7.get/post区别

• 用途：Get 是用来从服务器上获得数据，而 Post 是用来向服务器上传递数据
• 参数的位置：get的提交的数据通过?key=val拼接到url后面，而post提交的数据在请求体中
• 数据长度：Get 传输的数据量小，这主要是因为受 URL 长度限制；而 Post 可以传输大量的数据，所以在上传文件只能使用 Post
• 安全性：post安全性更高，get方法请求的信息因为拼接在url中，对所有人都是可见的。
• 浏览器历史：GET 请求保留在浏览器历史记录中，而POST 请求不会
• 可被缓存：GET 请求可被缓存，POST 请求不会被缓存，所谓缓存，指的就是浏览器直接读取本地已经缓存资源，而不是每次都从原始服务器上重新获取