JS的异步传输 - 爱码网

后端使用Django框架来实现

1、AJAX

常规的异步传输方式，适用于大部分场景

原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JS来操作DOM而更新页面

(1).AJAX的优点
<1>.无刷新更新数据
<2>.异步与服务器通信
<3>.前端和后端负载平衡
<4>.基于标准被广泛支持
<5>.界面与应用分离

(2).AJAX的缺点
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏
<2>.AJAX的安全问题
<3>.对搜索引擎支持较弱
<4>.破坏程序的异常处理机制
<5>.违背URL和资源定位的初衷
<6>.AJAX不能很好支持移动设备
<7>.客户端过肥，太多客户端代码造成开发上的成本

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/static/jquery-3.3.1.js"></script>
 7 </head>
 8 <body>
 9     <div id="div1">
10         用户名：<input type="text" id="id_username"></br>
11         密码：<input type="password" id="id_password"></br>
12         <input type="button" id="id_submit" value="submit" onclick="ajax()"></br>
13     </div>
14 
15 <script>
16     
17     function ajax() {
18         var username = document.getElementById('id_username');
19         var password = document.getElementById('id_password');
20         var div1 = document.getElementById('div1');
21         var div_u = document.createElement('div');
22         var div_p = document.createElement('div');
23         // 新建XMLHttpRequest对象
24         var req = new XMLHttpRequest();
25         // 状态发生变化时，函数被回调
26         req.onreadystatechange=function () {
27             //状态码为4代表请求完成
28             if (req.readyState==4&&req.status==200) {
29                 data = req.responseText;
30                 data = JSON.parse(data);
31                 div_u.innerText = data.username;
32                 div_p.innerText = data.password;
33                 div1.appendChild(div_u);
34                 div1.appendChild(div_p);
35             }
36         };
37         //post方式建立连接
38         req.open('post','http://127.0.0.1:8000/ajax',true);
39         //post请求的编码方式，这是浏览器的原生 form 表单的默认编码方式
40         req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
41         //发送请求
42         req.send("username="+username.value+"&password="+password.value);
43     }
44 </script>
45 </body>
46 </html>

AJAX前端(原生JS)