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对象的方法
![Ajax]()
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>
