关于异步——AJAX

Posted 2020-12-01 一条上镜的咸鱼

MTV 与 MVC

MVC : Model View Controller 模型-视图-控制器

是一种Web架构的模式。特点：把业务逻辑、模型数据、用户界面分离开来，让开发者将数据与表现解耦。

Model： 代表数据存取层，

View 代表的是系统中选择显示什么和怎么显示的部分，

Controller 指的是系统中根据用户输入并视需要访问模型，以决定使用哪个视图的那部分。

MTV : Model Templates View 模型-模板-视图

１．Models：数据存取层。 该层处理与数据相关的所有事务： 如何存取、如何验证有效，是一个抽象层，用来构建和操作你的web应用中的数据，模型是你的数据的唯一的、权威的信息源。它包含你所储存数据的必要字段和行为。通常，每个模型对应数据库中唯一的一张表。

2.模板(templates)：即表现层。 该层处理与表现相关的决定： 如何在页面或其他类型文档中进行显示。模板层提供了设计友好的语法来展示信息给用户。使用模板方法可以动态地生成html。模板包含所需HTML 输出的静态部分，以及一些特殊的语法，描述如何将动态内容插入。

3.视图（views）：业务逻辑层，该层包含存取模型及调取恰当模板的相关逻辑。用于封装负责处理用户请求及返回响应的逻辑。视图可以看作是前端与数据库的中间人，他会将前端想要的数据从数据库中读出来给前端。他也会将用户要想保存的数据写到数据库。

区别 :

MVC中的View的目的是「呈现哪一个数据」，而MTV的View的目的是「数据如何呈现」。

也就是把MVC中的View分成了视图（展现哪些数据）和模板（如何展现）2个部分，而Contorller这个要素由框架自己来实现了，我们需要做的就是把（带正则表达式的）URL对应到视图就可以了，通过这样的URL配置，系统将一个请求发送到一个合适的视图。

AJAX（***重点***)

同步与异步

同步：
    一个进程在执行某个请求时，如果该请求需要一段时间才能返回信息，那么，这个请求会卡在这，直到收到返回信息才继续执行下去
    
异步：
    在上面那种情况下，该进程不需要一直等待下去，而是发出请求后继续执行自己的代码，当请求有信息返回时，通知该进程进行处理，然后通过回调函数拿到结果，可以大大提高程序的执行效率。
    也就是说，异步是我们发出的一个请求，该请求会在后台自动发出并获取数据，然后对数据进行处理，在此过程中，我们可以继续做其他操作，不管它怎么发出请求，不关心它怎么处理数据。
    
总结：
    以上总结起来，通俗地讲，也就是说，同步需要按部就班地走完一整个流程，完成一整个动作，打个比方：同步的时候，你在写程序，然后你妈妈叫你马上拖地，你就必须停止写程序然后拖地，没法同时进行。而异步则不需要按部就班，可以在等待那个动作的时候同时做别的动作，打个比方：你在写程序，然后你妈妈让你马上拖地，而这时你就贿赂你弟弟帮你拖地，于是结果同样是拖好地，你可以继续敲你的代码而不用管地是怎么拖的哈哈。
    
同步与异步适用的场景：
    就算是ajax去局部请求数据，也不一定都是适合使用异步的，比如应用程序往下执行时以来从服务器请求的数据，那么必须等这个数据返回才行，这时必须使用同步。而发送邮件的时候，采用异步发送就可以了，因为不论花了多长时间，对方能收到就好。总结得来说，就是看需要的请求的数据是否是程序继续执行必须依赖的数据

阻塞与非阻塞

局部刷新

一个页面 不是整体刷新 而是页面的某个地方局部刷新

PS： AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX的使用

基本的ajax传递数据

1.展示一个前端页面  页面上有三个输入框  前两个框输入数字 点击按钮朝后端发请求
页面不刷新的情况下 完成数字的加法运算  

<input type="text" id="add1">+
            <input type="text" id="add2">=
            <input type="text" id="res">
            <a href="#" class="btn btn-primary" id="start">计算</a>


<script>
    $('#start').on('click',function () {
        {#var myFormData = new FormData();#}
        {#myFormData.append('add1',$("#add1").val());#}
        {#myFormData.append('add2',$("#add2").val());#}
        $.ajax({
            url:'',
            type:'post',

            data:{'add1':$('#add1').val(),'add2':$('#add2').val()},
            success:function (data) {
                {#data是从后端获得的return值#}
                $('#res').val(data)
        }
        })
    })
</script>

Ajax传json格式数据

# 前端
<script>
    var a = {'username':'a','password':'123'};

    $.ajax({
        url:'',
        type:'post',
        contentType:'application/json',
        data:JSON.stringify(a),
        success:function (data) {
            alert(data)
        },
    })
</script>  
# 后端
if request.is_ajax():
    res = json.loads(request.body)
    print(request.body, type(request.body))
    # b'{"username":"a","password":"123"}' <class 'bytes'>
    return HttpResponse(request.body)

注意：
    后端接收到的数据在request.body里，并且是bytes格式的字符串
    
PS:
    1.指定contentType参数
        contentType:'application/json',
    2.要将你发送的数据 确保是json格式的  
    data:JSON.stringify({'username':'jason','password':'123'})
        

AJAX传文件

# 前端
<input type="file" name="" id="myfile1">
<input type="button" id="sub1" value="123">
<script>
    $('#sub1').on('click',function () {
        var myformdata = new FormData();
        myformdata.append('username','lijian');
        myformdata.append('password','123');
        myformdata.append('myfile',$('#myfile1')[0].files[0]);
        console.log($('#myfile1')[0].files[0]);
        $.ajax({
            url:'',
            type:'post',
            data:myformdata,
            contentType:false,
            processData:false,
            success:function (data) {
                alert(data);
            }
        })

    })
</script>


# 后端
def ajax_file(request):
    if request.is_ajax():
        print(1,request.POST)
        # if request.body:
        #     print(2,request.body)
        print(3,request.FILES)
        return HttpResponse(123)
    return render(request, 'ajax_file.html')


# $('#myfile1')[0].files[0]
获取文件内容
    1.先通过jquery对象查找到file标签  
        $('#file1')
    2.将jquery对象转换成原生js对象  
        $('#file1')[0]
    3.利用原生js对象的方法，直接获取文件内容   
        $('#myfile1')[0].files[0]   
        因为获取的文件内容可以是多个，所以取第一个
        
注意：如何传递文件
    1.创建FormData对象
        var myFormData = new FormData();
    2.为FormData对象添加键值
        2.1普通键值
            myFormData.append('username',普通字符串);
        2.2文件
            myFormData.append('myfile',$('#t3')[0].files[0]);
     
    
    ************
    3.ajax里的几个必要参数
        data:myFormData
        contentType:false
        processData:false
        

contentType 前后端传输数据编码格式

form表单 默认的提交数据的编码格式是urlencoded
    urlencoded
        username=admin&password=123这种就是符合urlencoded数据格式

        django后端针对username=admin&password=123的urlencoded数据格式会自动解析
        将结果打包给request.POST 用户只需要从request.POST即可获取对应信息

    formdata
        django后端针对formdata格式类型数据 也会自动解析
        但是不会方法request.POST中而是给你放到了request.FILES中

    ajax  
        ajax默认的提交数据的编码格式也是urlencoded
        username=jason&password=123

    总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法

序列化组建

1.将用户表的数据 查询出来 返回给前端
给前端的是一个大字典 字典里面的数据的一个个的字段




from django.core import serializers

def ajax_load(request):
    user_list = []
    user_queryset = models.User.objects.all()
    # 方式一
    # 手动将对象的属性放入字典
    for user_obj in user_queryset:
        user_list.append({
            'id':user_obj.pk,
            'username':user_obj.username,
            'gender':user_obj.gender,
        })
    print(user_list[0],type(user_list[0]))
    # 方式二
    # 利用serializers将queryset对象反序列化成json格式字符串，并将对象的所有属性封装成列表套字典的形式
    # 因为这是一个字符串，所以要将它还原再给前端使用
    
    res = serializers.serialize('json',user_queryset)
    res = eval(res)
    print(res, type(res))
    # [{'model': 'user.user', 'pk': 1, 'fields': {'username': 'mark', 'gender': 1}}, {'model': 'user.user', 'pk': 2, 'fields': {'username': 'ja', 'gender': 2}}, {'model': 'user.user', 'pk': 3, 'fields': {'username': 'la', 'gender': 3}}] <class 'list'>
    print(res[0],type(res[0]))
    # {'model': 'user.user', 'pk': 1, 'fields': {'username': 'mark', 'gender': 1}} <class 'dict'>
    return render(request, 'ajax_load.html', locals())