Ajax

2022-02-17 06:28:25

1.Ajax预备知识回顾

1.1 jQuery

    jQuery是一个非常强大的JavaScript库，它对JavaScript、CSS、DOM、AJAX等的操作步骤已经简化到极致，其主旨思想是：用更少的代码，实现更多的功能
    jQuery是一个兼容多种浏览器的JavaScript库

1.2 网络通信原理

    网络通信的基本原理。为了保证数据能够从目标源到达目的地，并且保证数据的完整性，两端都要使用的规范就是协议。协议决定了数据的格式和传输的一组规则或者惯例。

1.3 Ajax简介

    AJAX并不是一项全新的技术，它所使用的JavaScript、CSS、DOM等技术早已存在，AJAX通过使用这些传统的技术来改善用户体验，并通过异步请求来缩短用户等待时间。
    AJAX的使用就是这么简单，使用封装好的库，只需导入这个文件，使用它封装的方法，传入几个简单的参数即可。

1.4 同步与异步

    同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程就会一直等待下去，直到收到返回信息才继续执行。**简单讲同步就是我必须走完一套完整的流程，才能继续下一个动作。**比如Web网站，只有当发出一个请求，并且服务器给我们返回数据后，我们才可以继续其他的操作。
    异步是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有消息返回时会通知进程进行处理，这样可以提高执行的效率。简单理解一下，异步就是我们发出一个请求，这个请求会在后台自动发出并获取数据，然后再对数据进行处理。在这个过程中，我们可以继续其他的操作，不用管它怎么发送请求，也不用关心它怎么处理数据。
    来看一个异步简单的例子。我正在工作，急需一本书，我把小王叫过来，让小王帮我去买书，我继续忙我的工作。至于小王怎么做、用多少时间，都和我没关系。等小王把书拿过来，我拿着用就行了

关于何时使用异步、何时使用同步，简单地说，就是看看需要请求的数据是否是程序继续执行必须依赖的数据。

2.AJAX的应用场景

1.可以使用AJAX来验证表单。
通过AJAX让前台数据和后台数据实时通信，形成一个完整的数据库闭环，让用户能够时刻获得准确的数据信息，大幅提升用户体验

2.可以使用AJAX来实现瀑布流效果。

        使用瀑布流无限加载技术，取消了分页按钮，当用户浏览完当前页面的数据之后，会自动加载数据，无缝衔接，给人非常友好的体验，尤其是在移动端，更是随处可见。
        从表面上看是为了完成非常炫酷的页面特效，但实质上是为了分批异步给客户端发送资源，用来缓解服务器端一次请求产生的巨大压力
        与此同理，无刷新删除、无刷新上传图片等功能都是为了减轻服务器端的压力。它通过服务器提供操作接口，使用AJAX进行部分数据交互，从而实现应用功能；而不像传统的处理方式那样，在提交整个网页后，重新向服务器请求资源，这是对服务器资源的极大浪费。

2.XMLHttpRequest

    简单来说，AJAX的原理就是通过XMLHttpRequest对象向服务器发起异步请求，从服务器获取数据，然后通过JavaScript操作DOM节点来更新页面数据。所以，要想使用AJAX，就必须对XMLHttpRequest对象有所了解。
    XMLHttpRequest对象是AJAX的核心。微软在IE 5的时候就引入了XMLHttpRequest对象。这是一种支持异步请求的技术，简单地说就是JavaScript通过XMLHttpRequest对象向服务器请求数据和处理响应，达到用户看到的页面无刷新效果。

3.XMLHttpRequest对象的方法

4. AJAX的优缺点

事物都是有两面性的，AJAX也不例外。尽管使用AJAX的好处众多，但是也存在许多缺点；虽然可以通过一些特殊方法解决，但是非常烦琐。下面我们一起来看看AJAX的优缺点。

4.1 AJAX的优点

（1）最大的优点应该就是页面无刷新了，大家对此都深有体会。

（2）所有浏览器都支持，集成在浏览器内部，不需要下载额外的插件。

（3）使用异步的方式与服务器通信，用户不用长时间等待某一个操作，可以继续其他的操作。

（4）减轻了服务器的压力，加快了响应速度，这主要体现在AJAX是按需获取数据的。

4.2 AJAX的缺点

（1）破坏了浏览器的后退功能，用户不能通过后退来取消前一次操作。虽有办法解决，但仍显得很笨重。

（2）网络延迟问题。通常会通过一些进度条或者图片告诉用户正在读取数据。

（3）安全性问题。AJAX变相地提供了一个访问服务器数据的接口，而且AJAX的代码都是暴露在浏览器中的，很容易被***利用，进行跨站脚本***或者SQL注入，当然对应地也有一些方法去解决这些问题。

虽然缺点这么多，但是AJAX的优点更让人喜欢，所以使用AJAX成为一种趋势。

5.Ajax基本语法

5.1

EG：需求页面无刷新完成数据的求和
html文件内scrip标签内书写：
$.ajax({
url:‘‘, // 控制提交地址规律与form标签的action参数一致
type:‘post‘, // 控制请求方式
data:{‘i1‘:i1Val,‘i2‘:i2Val}, // 发送的数据
success:function (args) {
// 异步回调函数
{#alert(args)#}
// 查看input框并且写入数据
$(‘#i3‘).val(args)
}
})

5.2参数补充

1.contentType

前后端数据传输格式主要有三种

        1.application/x-www-form-urlencoded
        2.multipart/form-data
        3.application/json

朝后端发送数据的时候针对不同的方式后端有不同的处理措施

1.form表单默认是urlencoded编码格式
数据格式username=jason&password=234
django后端针对符合urlencoded格式的数据会自动解析并封装到request.POST中
django后端针对form-data格式的数据文件自动封装到request.FILES中
普通的符合urlencoded还是封装到request.POST中

2.ajax默认是urlencoded编码格式
1.ajax发送json格式数据
django后端不做任何处理直接以二进制形式存放在request.body中
data
contentType
2.ajax发送文件数据

            $(‘#d1‘).on(‘click‘,function () {
                // 1.先生成一个内置对象
                let formDataObj = new FormData();
                // 2.添加符合urlencoded格式的普通键值对数据
                formDataObj.append(‘name‘,‘jason‘);
                formDataObj.append(‘password‘,123);
                // 3.添加文件数据
                formDataObj.append(‘myfile‘,$(‘#myfile‘)[0].files[0]);
                // ajax发送给后端
                $.ajax({
                    url:‘‘,  // 控制提交地址    规律与form标签的action参数一致
                    type:‘post‘,  // 控制请求方式
                    data:formDataObj,  // 发送的数据

                    // 额外指定两个参数
                    contentType:false,  // 不采用任何编码 后端能够直接识别formdata对象
                    processData:false,  // 不处理formdata对象 直接发送即可

                    success:function (args) {
                    }
                })
            });

2.dataType
django后端如果使用JsonResponse给回调函数返回json格式字符串
回调函数会自动反序列成js中的自定义对象
django后端不使用JsonResponse而是自己通过json模块序列化的数据回调函数接收到之后不会自动反序列

6.django内置序列化模块

from django.core import serializers
def ab_ser(request):
    book_queryset = models.Book.objects.all()
        #法1
    #自己构造字典
    #book_list = []
    #for book_obj in book_queryset:
    #book_list.append({‘title‘:book_obj.title,
    #‘price‘:book_obj.price,
    #‘publish_time‘:book_obj.publish_time
    #})
    #res = json.dumps(book_list)
    #return render(request,‘ab_ser.html‘,locals())
        #法2
    res = serializers.serialize(‘json‘,book_queryset)
    return HttpResponse(res)

7.基于ajax实现二次确认

<script>
        $(‘.del_link‘).on(‘click‘,function (a) {
            var $aEle = $(this);
            var deleteId = $(this).attr(‘delete_id‘);
            // 提示二次确认
            res = confirm(‘你确定真的要删吗?‘);
            // 判断是否删除
            if (res){
                // 发送ajax请求
                $.ajax({
                    url:"/book_delete/" + deleteId,
                    type:‘get‘,
                    data:{},
                    success:function (args) {
                        // 1.页面刷新  不推荐使用
                        window.location.reload();
                        // 2.DOM操作   正规 用户体验好
                        $aEle.parent().parent().remove()
                    }
                })
            }else{
                alert(‘怂逼不敢删啦‘)
            }
        })
</script>