2020/2/1 ajax和mock.js的理解

ajax

1.什么是ajax
     ajax是多项前端技术的综合，包括了html、css、js、Json、XMLHttpRequest。
     ajax模式： 浏览器创建一个ajax对象，然后ajax对象向后端发送请求，后端响应数据给前端，                      之后前端接收导数据更新视图，整个过程中浏览器“不刷新”。
     传统模式： 浏览器直接向后端发送请求，后端响应新页面给前端，整个过程浏览器会刷新。

2.ajax工作原理

3.ajax发送get请求
1)创建ajax对象
     var xhr = new XMLHttpRequest();
2)配置请求方式和请求地址
     xhr.open(“get”,”xxx地址”);
     如果传入参数
     xhr.open(“get”,”xxx地址?属性名1=属性值1&属性名2=属性值2”);
3)发送
     xhr.send();
4)监听状态&接收数据
    xhr.onreadystatechange  =  function(){
         if(xhr.readyState===4 && xhr.status===200){
             var data = xhr.reponseText;
         }
    }

4.ajax发送post请求
1)创建ajax对象
     var xhr = new XMLHttpRequest();
2)配置请求方式和请求地址
     xhr.open(“post”,”xxx地址”);     
3)设置请求头
    xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
4)发送
     xhr.send(“属性名1=数值型1&属性名2=数值2”);
5)监听状态&接收数据
    xhr.onreadystatechange  =  function(){
         if(xhr.readyState===4 && xhr.status===200){
             var data = xhr.reponseText;
         }
    }

5.服务器概念
服务器就是一台提供服务的主机
区分几个地址
1.     http://127.0.0.1  本机
2.     http://localhost   本机
3.     http://172.16.16.254   ip地址（会随着网络环境不同而变化）
如果本地起了服务，其他人可以通过ip地址加服务端口号访问该服务。

6.jquery发送ajax

            $.ajax({

                type: 'get',//请求类型

                url: ”xxx地址”,//请求地址

                data: {

                    参数名1: 参数值1,

                    参数名2: 参数值2,

                },

                dataType: ”json”,//告诉后端我们想要的数据格式    

                success: function (data) {

                    //后端返回的数据就放在data中

                }

            });

mock.js

mockjs使用步骤

    1.下载&引入
    2.Mock.mock('xxx地址','请求方式',{
        //数据模板，写具体的生成规则

      });
      
      $.ajax({
          url:'要与mock设置的地址一致',
          type:'要与mock设置请求方式一致',
          dataType:"json",
          success:function(data){
              //data就是mockjs生成的数据

          }
      });

artTemplate使用步骤

    1.下载引入
    2.编写模板
       
    3.渲染模板
        template('模板id',data数据) //得到的是一个html片段