前后端交互之Ajax
The Jquery library has a full suite of Ajax capabilities.The functions and methods there in allow us to load data from the server without a browser page fresh.
传统方式：用户触发一个HTTP请求到 Web服务器，服务器接收并处理传来的数据，然后回送一个新的页面
- 分析1：这种方式浪费了很多资源和带宽，很多情况下，返回的页面大部分HTML代码是一致的
- 分析2：客户在服务器处理请求期间，只能等待，不能进行操作
AJAX方式：AJAX可以只向服务器发送请求，并且取回必要的数据，客户端采用 JavaScript 的方式处理来自服务器的回应
- 分析1：大大的减少了数据量，服务器回应速度更快，部分处理转移到了客户端，减轻了服务器的负荷
- 分析2：可以实现客户端和服务器的异步通讯方式
异步和同步是基于客户端和服务器端相互通信的基础上
- 同步：客户端必须的等待服务器端给予的响应，在此期间不能进行其他操作
- 异步：与同步不同，客户端不需要等待服务器响应，在此期间可以进行任何操作
XMLHttpRequest基本原理：
Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装，然后再发送到服务器，接着服务器以流的形式将数据返回给浏览器
处理响应：
xhr.onreadystatechange=function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xhr.readyState==4 && xhr.status==200) {
//获取服务器的响应结果
var responseText = xhr.responseText;
alert(responseText);
}
}
| 状态 | 描述 |
|---|---|
| readyState = 0 | 请求未初始化：在创建XMLHttpRequest对象之后，但在调用open（）方法之前 |
| readyState = 1 | 请求已建立：在调用open（）方法之后但在调用send（）之前 |
| readyState = 2 | 请求已发送：调用send（）之后 |
| readyState = 3 | 请求正在处理中：浏览器与服务器建立通信之后，但服务器未完成响应之前 |
| readyState = 4 | 请求已完成：请求完成后，并且已从服务器完全接收到响应数据 |
Jquery实现方式
使用原生的 JavaScript 实现 AJAX 确实比较麻烦，而 使用 Jquery 也可以帮助我们实现这样一种需求，而且也会让我们的代码更加简洁，直观。
html中：
html代码：每个input标签都要有id值，因为ajax是通过id定位的。
js代码中：
ajax请求方式中的各参数：
url：这个url就是请求接口的url:/api/add_event, 需要在urls.py文件中加入这个url对应的请求函数即path(‘api/add_event/’*, *views.add_event)，同时需要在views.py文件中添加函数add_event()。如下图
type：请求方式
dataType：设置接受到的响应数据的格式。
data：请求数据
success+function：如果请求成功，执行回调函数
error+function：如果请求失败，执行回调函数
add_event函数的响应
