Ajax

1.ajax与axios两者其实并没有太大的区别，在写法上大致相同，axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。JQuery ajax 是对原生XHR的封装。也就是说，ajax 是对原生XHR的封装 , 而 通过 promise 又把 ajax 进行封装就成了 axios。现在主要用axios
2.应用场景
1）页面上拉加载更多数据
2）列表数据无刷新分页
3）表单项离开焦点数据验证
4）搜索框提示文字下拉列表等等
3.Ajax的运行环境：需要运行在网站环境中才能生效（双击打开html是没有用的）
4.Ajax运行原理：Ajax相当于浏览器发送请求与接收响应的代理人。
5.Ajax实现步骤：
1）创建Ajax对象

var xhr = new XMLHttpRequest();

2）告诉Ajax请求地址以及请求方式

xhr.open('get'，'http://www.example.com')

3）发送请求

xhr.send()

4）获取服务器端与客户端的响应数据

xhr.onload = function(){console.log(xhr.responseText)}

6.服务端响应的数据格式：一般都是JSON对象。
7.请求参数传递

1)get请求：请求参数放在路由的后面，? 参数名=参数值，多个参数用&连接
xhr.open('get'，'www.example.com?name='zs'&age='13'')
2)post请求
xhr.setRequestHeader('Content-Type'，'application/x-www-form-urlencoded')
xhr.send('name=zs&age=13')
还有一种请求参数的格式
application/json：{name:'zs',age:'20'}
get请求是不能提交json对象数据格式的，传统网站的表单提交也不支持json数据格式。

8.请求报文：在HTTP请求和响应的过程中传递的数据块叫报文，包括要传递的数据和一些附加信息，这些数据和信息要遵守好规定的格式。
9.Ajax状态码：在创建ajax对象，配置ajax对象，发送请求，以及接受完服务器端响应数据，这个过程，每一个过程对应一个数值，这个数值就是ajax状态码。获取状态码：xhr.readyState
0：请求未初始化（还没调用open）
1：请求已经建立，但是还没有发送（没有调用send）
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用
4：响应已经完成，可以获取并使用服务器的响应了
10.Ajax错误处理：
1）网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果
可以判断服务器端返回的状态码，分别进行处理，xhr.status获取http状态码
2）网络畅通，服务端没有接收到请求，返回404状态码
检查请求地址是否错误
3）网络畅通，服务器端接收到请求，服务器端返回500状态码
服务器端错误，找后端程序员进行沟通
4）网络中断，请求无法发送到服务器端
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理
11.使用ajax，存在低版本iE浏览器缓存问题：请求地址不发生改变，只有第一次请求获得的数据是真正的。其他都是从缓存中获取的。
解决方案：在请求地址后面加上请求参数，保证每次请求参数不同。Math.random()

xhr.open('get'，'www.example.com?t='+Math.random())

12.同步异步，ajax属于异步。
1）同步：一个人同一时间只能做一件事情，一件事做完了才能做另一件事。即代码逐行执行。
2）异步：一个人一件事做了一半，转去做其他事情，其他事情做完了，再回来做没有做完的事。
13.Ajax封装
问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

function ajax(options){
        //存储对象的默认值
        var defaultObj = {
            type: 'get',
            url: '',
            data: {},
            header:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            success: function () {},
            error: function (){},
        };
        //合并对象，有相同属性则覆盖
        Object.assign(defaultObj, options);
        //创建对象
        var xhr = new XMLHttpRequest();
        //拼接请求参数
        var params = "";
        for( var attr in defaultObj.data ){
            params += attr + '=' + defaultObj.data[attr] + "&";
        }
        //将最后一个&去掉
        params = params.substr( 0, params.length-1 );
        //判断请求方式
        if( defaultObj.type == "get" ){
            defaultObj.url = defaultObj.url + '?' + params;
        }
        //配置ajax对象
        xhr.open( defaultObj.type, defaultObj.url );
        //发送请求
        if(defaultObj.type == "post"){
            var contentType = defaultObj.header['Content-Type']
            //设置请求参数的格式类型
            xhr.setRequestHeader('Content-Type',contentType);
            //判断请求参数的格式是JSON还是字符串
            if(contentType == 'application/json'){
                xhr.send(JSON.stringify(defaultObj.data))
            }else{
                xhr.send(params);
            }
        }else{
            xhr.send();
        }
        //当xhr对象接收完响应数据后触发
        xhr.onload = function (){
            //服务器端返回的数据类型字符串改成JSON格式
            //获取响应头中的数据
            var contentType = xhr.getResponseHeader('Content-Type');
            //服务器端返回的数据
            var responseText = xhr.responseText;
            if(contentType.includes('application/json')){
                responseText = JSON.parse(responseText);
            }

            //请求成功
            if(xhr.status==200){
                defaultObj.success(responseText, xhr);
            }else{
                defaultObj.error(responseText, xhr);
            }
        }
    }
    //调用即可
    ajax({
        type: "get",
        url: "www.example.com",
        data: {
            name: "zs",
            age: 20,
        },
        //post请求时，设置请求参数的类型是字符串还是JSON格式
        header:{
            'Content-Type':'application/x-www-form-urlencoded'
        },
        success: function (data, xhr) {
            console.log('这里是success函数');
            console.log(data);
        },
        error: function (data, xhr){
            console.log('这里是error函数');
            console.log(data);
        },
    })

14.模板引擎：（有很多种模板引擎），作用：使用模板引擎提供的模板，可以将数据与HTML拼接起来。
以art-template为例：

//使用步骤：
//1，下载art-template模板引擎文件并在HTML页面引入库文件
<script src="./js/template-wb.js"></script>
//2.准备art-template模板，通过id区分模板
<div id="container"></div>
<script id="tpl" type="text/html">
	<div class="box"></div>
</script>
//3.告诉模板引擎将哪一个模板和哪个数据进行拼接
var html = template['tpl',{username:'zs',age:20}]
//4.将拼接好的html添加到页面中
document.getElementById('container').innerHTML = html
//5.通过模板语法告诉模板引擎，数据和html字符串要如何拼接
<script id="tpl" type="text/html">
	<div class="box">{{username}}</div>
</script>