Ajax简介
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
Ajax最重要的功能是通过js对浏览器异步提交请求，局部刷新页面。
XML文本标记语言(类似于HTML)：主要用来书写配置文件，并且在一些框架中充当前端页面的编写语言(odoo框架)。
前端一些能够发送网络请求的简单方法如下：
- a——get请求
- form表单——get请求、post请求
- Ajax——get请求、post请求
而关于同步与异步的理解可以为如下：
- 同步：提交任务之后原地等待任务结果期间不做任何事。
- 异步：提交任务之后不原地等待任务结果，等任务产生结果通过异步回调机制。
能够实现ajax效果的书写方式有很多，比如：原生js代码、jQuery封装代码、组件框架代码等。我们使用的是较为简单常见的jQuery封装版本。
Ajax的基本语法与使用
要使用jQuery封装的Ajax首先需要导入jquery，推荐的方法有两种：
- 在使用bootCDN https://www.bootcdn.cn/jquery/
这是一免费的cdn提供网站。
相关代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
优点：无需将文件下载到本地，同时操作相对简单便捷。
缺陷：必须在有网络的情况下才能正常使用。
- 本地导入 jQuery.js
可在jQuery官网下载对应的jQuery https://jquery.com/download/
相关代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="本地jquery地址/jquery文件名.js"></script>
</head>
优点：可以直接在本地进行操作，无需网络的连接。
缺陷：必须先将文件下载导本地。
Ajax基本语法
$.ajax({
url:'', //控制提交地址，规律与form中的action一致
type:'', //控制请求方式
data:'', //发送的数据
success:function(args){} //异步回到函数，args为回调的数据
})
ps:发送的数据一定要保证与数据类型的一致性。
实例之两数相加局部刷新结果
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3">
// 输入数的input框id分别为i1、i2,结果的input框id为i3
<button id="d1">求和</button>
</body>
<script>
$('#d1').on('click', function () {
i1Val = $('#i1').val();
i2Val = $('#i2').val();
$.ajax({
url:'',
type:'post',
data:{'i1':i1Val,'i2':i2Val},
success:function (args) {
$('#i3').val(args)
}
})
})
</script>
</html>
后端之view.py：
def ab_ajax(request):
if request.is_ajax(): # 判断当期请求是否是ajax请求
if request.method == 'POST':
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
res = int(i1) + int(i2) #注：post取得的数据都为str类型，运算需对其进行类型转化
return HttpResponse(res)
return render(request, 'ab_ajax.html')
路由urls.py：
urlpatterns = [
url(r'^ab_ajax/', views.ab_ajax, name='ab_ajax')
]
运行结果
其他部分常用参数的补充
contentType（传输的数据格式）
前后端数据传输的格式主要有以下：
application/x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。
multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息。
application/json：作为请求头告诉服务端消息主体是序列化的JSON字符串，除了版本低的IE浏览器，其他的基本都支持。
text/plain：将文件设置为纯文本的形式，浏览器在获取导这种文件时并不会对其进行处理。
朝后端发送数据的时候针对不同的方式后端有不同的处理措施。
dataType（数据类型）
当其参数指定为JSON：
django后端如果使用JsonResponse给回调函数返回json格式字符串，回调函数会自动反序列化成js中的自定义对象。
如果不使用JsonResponse而是自己通过json模块序列化的数据，回调的函数接收到之后不会自动反序列化。